Spell checker hack for Ghost

UPDATE 24/04/2014: NOT WORKING FOR VERSION 0.42!

Unfortunately after changes introduced in version 0.42 I was not able to find a way how to make it working again. The Ghost guys encapsulated the editor really well

During the writing of my first blog post ever, I found that the browser spell checker didn't work in the Ghost editor. This is a "must have" feature for me therefore I started looking for a solution. I didn't find any solution that worked for me (external markdown editor could work but I wanted to use Ghost online editor). That was the point when I started slowly going through the Ghost client code.

The Problem

I found that the problem is the CodeMirror library, which is used for the editor itself. Because it displays words/lines as multiple elements the browser spell checker doesn't have a chance to work at all.

The Hack

There are a few "good things" that enables this hack:

  • The Ghost Editor has a text area field behind it
  • The CodeMirror has methods for getting/setting the formatted text to/from the editor
  • The CodeMirror instance is exposed by backbone editor view

This enables us to write a code which hides the CodeMirror element, displays the text area behind it and copy the value from the editor to the text area and vice versa.

How it works for the user?

The editor is extended with the "RAW TEXT" button, which displays the text area behind it, in which the browser spell checker is working.

A new editor

Then you can switch back to the editor by clicking on the "EDITOR" button.

Raw Text

Questions and answer

  • Is this a hack? YES
  • Can this be broken anytime with any new version? YES
  • Is it working for version 0.3? YES

Ghost Plugin

The initial idea was to create a Ghost plugin. Later, I found that support for plugins is planed to version 0.5 and I didn't want to wait so long.

Chrome Extension

One of my good friends mentioned Chrome extensions to me. He told me that the development of extensions is really easy and I decided to give it a try.

You can install the Chrome extension from web store:

https://chrome.google.com/webstore/detail/ghost-editor-raw-text-but/flcgagocnilfdaigipejmegagelhpafd?hl=en

I will try to cover details about this extension development in a separate blog post. But if you want to see the source code right now you can find it on github:

https://github.com/pvasek/GhostRawTextExtension

Please, let me know if it is working for you. Is it enough for you? Would you like to have this feature built into Ghost? I could try to find out if the pull request for this feature would be accepted.