14 votes

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:

If you see the warning message below when installing uCKEditor, just IGNORE it (It is NOT mandatory to install the Archetype package. uCKEditor will work properly without it).
 

Binary file errors detected

This package contains .NET binary files that might not be compatible with this version of Umbraco. If you aren't sure what these errors mean or why they are listed please contact the package creator.
Error report:  This package references the assembly 'Archetype' which was not found.


This message appears because uCKEditor references the Archetype library to allow you to use uCKEditor as a property editor with an Archetype data type.


Note:
It seems that sometimes uCKEditor doesn't work properly if you install it in an Umbraco website 7.x that has been upgraded from version 4.x or 6.x. As a work around I have created a zip file http://our.umbraco.org/FileDownload?id=13093 with all required files that you need to unzip into the ~/App_Plugins/uCKEditor/ folder (overwrite any existing file). Refresh your browser's cache and it should work.
Please, if that happens to you, let me know by posting in the bug forum.

 

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.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

 

Screenshots

Package owner

Alain

Alain

Alain has 520 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
8.1.x (untested)
8.0.x (untested)
7.14.x (untested)
7.13.x (untested)
7.12.x (untested)
7.11.x (untested)
7.10.x (untested)
7.9.x (untested)
7.8.x (untested)
7.7.x (100%)
7.6.x (100%)
7.5.x (untested)
7.4.x (untested)
7.3.x (untested)
7.2.x (86%)
7.1.x (100%)
7.0.x (untested)
6.1.x (untested)
6.0.x (untested)

You must login before you can report on package compatibility.

Package Information

  • Package owner: Alain
  • Created: 04/10/2014
  • Current version 1.1.1
  • License MIT
  • Downloads: 4592