uCKEditor

CKEditor plugin for Umbraco 7

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features.

Features

• Integrates CKEditor version 4.4.7 (full)

• Can be used as a normal Umbraco backoffice property editor

• Can be used only as a Front-end editor (Inline editing). It is not necessary to change the backoffice property editor (for instance it is possible to have the Umbraco's default RTE editor in the backoffice and the uCKEditor for front-end inline editing)

• Front-end inline edititing security. Checks whether the current user is logged in as valid Umbraco backoffice user and has enough rights to access the content node.

• Integration with Umbraco Media gallery (backoffice editor and inline editing editor)

• Integration with Umbraco Embed dialog (backoffice editor and inline editing editor)

• Setup: using DataType prevalues or using a CKEditor config file

• Compatible with the Vorto and Archetype packages (backoffice)

• Support inline editing for uCKEditors contained in Archetype properties

Roadmap

• Support inline editing for uCKEditors contained in Vorto properties

• Umbraco macros

• Umbraco Links (dialog to link to a content node or media like as in RichText editor)

• Update the example project with the last version of uCKEditor

Demo

It is an Umbraco Visual Studio Project (Umbraco v7.1.7), running on SQL CE and with the Umbraco TXT starter kit installed. The default Umbraco RTE editor as been remplaced by the uCKEditor for the content type 'News'. The front-end uCKEditor is already setup for 'News' pages.

https://github.com/Alain-es/uCKEditor-Demo/blob/master/Umbraco.zip 

Backoffice Username: admin

Password:1234

Installation

Install the package through the backoffice like any other Umbraco package. A new datatype 'uCKEditor' is created by the installer. That's it!

Installation warning message:

BACKOFFICE EDITOR:

Everything is like any Umbraco property editor.

You can create multiple uCKEditor Data Types with different configuration (like you do for the Umbraco RTE property editor)

IMPORTANT: If you change the data type of an existing property to use uCKEditor, you shouldn't loose any data. Nevertheless you need to be aware of a CKEditor feature called Advanced Content Filter (ACF) that filters the content depending on the plugins loaded and/or editor settings. That means that if you have an existing field that is using Umbraco RTE data type and you change it to uCKEditor, when you open the content node, some Html tags (<img>, <span>, …) could not appear.

For further information: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter 

You can turn ACF off at any moment by setting the <AllowedContent> setting to true. That means that NO html tag will not be removed.

FRONT-END EDITOR:

To get front-end editing up and running, you need to modify your templates/views/partial views as described below:

@Html.Raw(uCKEditor.InlineEditorHelper.InlineEditorInitialize())

This helper method will take care to load all required libraries. The editor needs Jquery to be loaded in order to work properly. If for any reason you need to use a different version of Jquery, this method accept a boolean parameter which intructs it to don't load Jquery.

@Html.Raw(uCKEditor.InlineEditorHelper.InlineEditorInitialize(False))

Note that the uCKEditor (front-end editor) will not work properly if Jquery is not loaded.

@Html.Raw(uCKEditor.InlineEditorHelper.InlineEditorCreate("editorID", "newsContent"))

The first paramater is the ID of the Html element that will be remplaced by the editor.
The second parameter is the alias of the property (content type) in which the data will be saved (when the user clicks on the save button).

<div id="editorID">    @Html.Raw(CurrentPage.newsContent)</div>

Since a backoffice user could be logged in or not, in both case the content should appear on the page, therefore the editor will not load any content from the backoffice. Instead of that it is your responsability to load the property value into the html element that will be remplaced by the editor.

Configuration

If you want to customize the editor, please read first the official CKEditor documentation.

http://docs.ckeditor.com/#!/api/CKEDITOR.config 

The most used configuration parameters are available through the Umbraco Data Type editor. If more advanced configuration is required you can define a .js file for each uCKEditor Data Type.

Updates

• v1.1.1 [2015-04-06]
  - Remove properly all files when uninstalling 
  
  
  

• V1.1.0 [2015-03-08]
  - Doesn't use embedded resources anymore
  (https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/61145-Packages-only-work-in-debug-mode)

• v1.0.1 [2015-02-01]
  - Upgraded CKEditor to v4.4.7
  - Added support for inline editing with Archetype
  - Fixed bug when the property editor is explicitly specified for the inline editor.
  - New property editor to generate unique Ids (necessary for inline editing when uCKEditor is inside an Archetype property)

• v1.0.0 [2015-01-25]
  - Compatible with the Vorto and Archetype packages (backoffice)

• v0.8.0 [2015-01-17]
  - Fixed a bug when saving from front-end editor (inline editing)

• v0.7.0 [2015-01-10]
  - Full support for 'Media picker' and 'Embed Dialog' in both, backoffice editor and front-end editor (inline editing)
  - Upgraded CKEditor to v4.4.6 (upgrade highly recommended for security reasons)
  - Added a new installation option allowing users to choose whether they want to create a new uCKEditor data type or not.

• v0.5.0 [2014-10-04]  
   - Initial release