Adopting CKEditor

At the core of any editor, no matter how complex it is, is a simple text box. And two main operations with editor include writing to this box and reading out of it. Understanding this is all you need to port any editor to BlogEngine.

Downloading and checking editor files

CKEditor comes with number of examples found in "samples" folder, when we open for example "api.html" and strip out all unimportant code, we should see all the pieces needed for BlogEngine to work with this editor. This includes two functions with examples how to set and get text, registering text area and setup script that runs to initialize editor.

  <script>
  function SetContents() {
    var editor = CKEDITOR.instances.editor1;
    var value = document.getElementById( 'htmlArea' ).value;
    // Set editor contents (replace current contents).
    editor.setData( value );
  }
  function GetContents() {
    var editor = CKEDITOR.instances.editor1;
    // Get editor contents
    alert( editor.getData() );
  }
  </script>
  <textarea cols="100" id="editor1" name="editor1" rows="10">Hello</textarea>
  <script>
    // Replace the <textarea id="editor1"> with an CKEditor instance.
    CKEDITOR.replace( 'editor1', {
      on: {
        // Check for availability of corresponding plugins.
        pluginsLoaded: function( evt ) {
          var doc = CKEDITOR.document, ed = evt.editor;
        }
      }
    });
  </script>

This is how editor looks in browser on its own, using cleared api.html code.

Building CKEditor into BlogEngine

To add CKEditor to BlogEngine, first we create "editors/ckeditor" folder and move all downloaded files there, excluding "samples" which we don't need. Then we create two files required by BlogEngine. First will contain text area and look like this.

<textarea cols="100" id="editor1" name="editor1" rows="10"></textarea>

Second is JavaScript file that will be used by BlogEngine to get/set text and initialize editor on page load. By convention, function names must be "editorGetHtml" and "editorSetHtml". As you can see both files mostly used code snippets from sample that came with CKEditor.

// editor.js
var editorGetHtml = function () {
    return CKEDITOR.instances.editor1.getData();
}
var editorSetHtml = function (html) {
	CKEDITOR.instances.editor1.setData(html);
}
CKEDITOR.replace( 'editor1', {
	on: {
		pluginsLoaded: function(evt) {
			var doc = CKEDITOR.document, ed = evt.editor;
		}
	}
});

We also need to add JavaScript to BlogEngine whenever page with editor is loaded. This is accomplished by adding scripts to bundle in "AppCode/App_Start/BundleConfig.cs". No need to load scripts for all editors, so we check if CKEditor is default and if it is, scripts are added.

  // BundleConfig.cs
if (BlogConfig.DefaultEditor == "~/editors/ckeditor/editor.cshtml")
{
  bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/editors/ckeditor/ckeditor.js");
  bundles.GetBundleFor("~/scripts/wysiwyg").Include("~/editors/ckeditor/editor.js");
}

Last thing we need to do is modify web.config to set CKEditor as default editor for a blog. This is one of the application keys and should be modified like this.

  
<add key="BlogEngine.DefaultEditor" value="~/editors/ckeditor/editor.cshtml"></add>

Now when we open post for editing, it should look something like this.

Attached file contains modified "ckeditor" folder that can be added to "editors" folder. To make it work, only changes to BundleConfig.cs and web.config are needed as described above.