THE BEST WYSIWYG EDITOR FOR WEBSITES

Standard

Recently. I tried a couple of Rich Text Editors for one of my projects. I tried almost everything from Bootstrap-wysiwyg to CKeditor. But all had either compatibility issues or incomplete features. 

As I was actively looking for an editor, summer note caught my eye. It’s a free editor with hell lot of features and fully compatible with Internet Explorer, Firefox and Chrome. The integration too is simple and it supports Bootstrap too.

All you have to do to integrate Summernote in your app is to add reference to summernote’s css and javascript files to your page, define a div as follows: 

<div id="summernote">Hello Summer</div>

and finally, add a function to capture document ready event in your page as follows :

$(document).ready(function() {
  $('#summernote').summernote();
});

For more information, check out summer note at http://summernote.org

HOW TO CREATE A CUSTOM SEARCH BOX FOR YOUR GHOST BLOG

Aside

Ghost is a very powerful blogging tool which helps you to concentrate on the content rather than the plugins and the underlying components. However, a search bar would be an essential component for a blog, as it helps returning customers or users to search for a specific post.

image-searchboxYou might have noticed the same search bar on the left side of this website. The search bar works with the help of Google Custom Search. It accepts a query string and pass it to a Ghost Page which accepts the query and display results from Google Custom Search.

So, let’s get started by pasting the below HTML snippet into any of your Ghost Blog Page or into default.hbs file of your Ghost template.

   <form method="get" action="/search">
    <label>Search for:</label>
    <input type="search" placeholder="Search …" value="" name="q" title="Search for:">
           <input type="submit" value="Search">
        </form>

Now save the page (or update your template files in the server if you have modified default.hbs and refresh the theme) and the above HTML snippet must have added a very basic search box to your blog as shown below.

image-searchbasicLeave styling for now as we will address that in a later post. For the note, we can add the styling classes either from template or from any framework like Bootstrap to make it look more beautiful as I did in this website.

Now create an empty page in your Ghost Blog with name search, all in lower case.

Navigate to Google Custom Search and sign-in with your Google account.

You will land up in Dashboard as shown in the following screenshot.

image-googlecse1

Click Add to create a new custom search. A form will be displayed as shown below. Enter your domain name and click Create.

image-googlecse2

You will get a success message like the one shown below.

image-googlecse3

Click Get code to view the code snippet.

image-googlecse4

You can paste this directly into the search page which will show a Google Custom Search Box which may not match your blog’s theme, which has a Google Custom search logo and is very difficult to customize.

image-cseSo, we will modify the Custom Search to accept the query from our HTML form, process it and display the result. To do this, go to Look and Feel from the left navigation menu and the following screen will appear.

image-googlecse5

Select Results Only and click on Save and Get code has shown below.

image-googlecse6

You will get the new modified code snippet which you can paste in the search page of your Ghost Blog.

image-googlecse7

Save and refresh your Ghost Blog. Try the new search bar, type any query and press enter. This will navigate to
yourdomain.com/search?q=query+string which in turn will display the results.

Let me know your queries or comment. I will publish a guide for styling the same search box in another post and will update the link later.