Adopting CKEditor

Docs

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 src="http://dnbe.net/docs/ckeditor.js"></script>
  <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.

BlogEngine Adopting CKEditor

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.

ckeditor.zip (856.41 kb)

More BlogEngine Docs

Custom Fields

Custom Profile Fields Custom fields used to extend standard data structures. Go to your profile page in admin and click "add" button in custom fields area. E...

Read More

Creating Custom Theme

This is a walk-through on how to build custom theme for BlogEngine.NET from scratch. In this example, version 3.1 was used, but should work with later versio...

Read More