Plone Add-on Gallery

collective.ckeditor

BEWARE

The master branch of collective.ckeditor is now where we are working to support for Plone 5 and Plone 6.

First alpha releases are on their way.

Plone 4 code can be found in 4.x branch.

TODO before final release

  • fix tests

  • fix issues with portal types vocabularies

  • upgrade to latest CKEditor 4

  • fully remove usage of portal_properties

  • integrate work done at TU Dresden

  • P6 move form.widgets.IRichTextBehavior.text_text_format below CK textarea

  • fix warning with @@ckeditor_vars.js (text/plain MIME type)

  • remove references to Flash (do not forget quickupload)

Done

  • hide profiles that should be hidden in ckeditor

  • ckeditor_vars depends on plone

  • fix issues with CSS

  • Continue control panel work to migrate to registry - Fix mandatory fields - Remove old adapter CKEditorControlPanelAdapter

  • Write a migration from portal properties to portal registry.

https://travis-ci.org/collective/collective.ckeditor.svg https://coveralls.io/repos/collective/collective.ckeditor/badge.svg?branch=master&service=github

Introduction

This addon is a ckeditor integration for Plone. This release includes ckeditor version 4.12.1.

How to install

You can install it as any Plone addon. Please follow official documentation.

The code source can be found at https://github.com/collective/collective.ckeditor

Please report issues at https://github.com/collective/collective.ckeditor/issues

Dependencies

Translations

This product has been translated into

  • Spanish.

  • French.

  • Italian.

You can contribute for any message missing or other new languages, join us at Plone Collective Team into Transifex.net service with all world Plone translators community.

Upgrades

Go to ZMI–>portal_setup–>Upgrades, choose “collective.ckeditor:default” profile and execute the upgrade steps.

4.3.0

Release 4.3.0 comes with the Enhanced Image plugin (image2). It is not enabled by default as it removes some of the advanced functionality provided by the default image plugin (image). However, the Enhanced Image plugin provides the ability to add a caption together with the image. It is also much more user-friendly.

To enable the plugin, you need to setup ckeditor_properties through generic setup propertiestool.xml:

<?xml version="1.0"?>
<object name="portal_properties" meta_type="Plone Properties Tool">
 <object name="ckeditor_properties" meta_type="Plone Property Sheet">
  <property name="removePlugins" type="lines">
   <element value="image"/>
  </property>
  <property name="plugins" type="lines">
   <element value="ajaxsave;/++resource++cke_ajaxsave/plugin.js"/>
   <element value="image2;/++resource++ckeditor/plugins/image2/plugin.js"/>
  </property>
 </object>
</object>

This disables the image (default) plugin and enables the image2 plugin.

The image2 plugin comes with two specific settings (configurable only through generic setup):

<?xml version="1.0"?>
<object name="portal_properties" meta_type="Plone Properties Tool">
 <object name="ckeditor_properties" meta_type="Plone Property Sheet">
  <property name="image2_captionedClass" type="string">image</property>
  <property name="image2_alignClasses" type="lines">
   <element value="image-left"/>
   <element value="image-dummy"/>
   <element value="image-right"/>
  </property>
 </object>
</object>

The settings are image2_captionedClass and image2_alignClasses. The values above are the default values.

If you enable the plugin, you also need to setup Plone to accept the figcaption tag.

This is done by configuring HTML filtering with a setup handler like:

def enable_figcaption(p):
    """ Allow figcaption as valid tag in portal_transforms safe_html"""

    from Products.PortalTransforms.Transform import make_config_persistent

    pt = getToolByName(p, 'portal_transforms')
    tid = 'safe_html'
    if not tid in pt.objectIds():
        return
    trans = pt[tid]
    tconfig = trans._config

    validtags = tconfig['valid_tags']
    validtags.update({'figcaption': 1})

    make_config_persistent(tconfig)
    trans._p_changed = True
    trans.reload()
    log.info('added figcaption as valid tag')

CKEditor plugins

balloontoolbar plugin

provided since version 4.8.0

Not enabled by default, this plugin provides an API to setup context sensitive toolbars.

To enable the plugin, add balloontoolbar;/++resource++ckeditor/plugins/balloontoolbar/plugin.js to the Plugins field in CKEditor control panel (@@ckeditor-controlpanel).

uploadimage plugin

provided since version 4.7.0

Enabled by default, this plugin manages support for uploading images that were dropped or pasted into the editor.

nonbreaking plugin

provided since version 4.4.5.

When enabled, the plugin provides keyboard shortcuts to insert non breaking chars:

  • Ctrl-Alt-Space for non breaking space,

  • Ctrl-Alt-Hyphen for non breaking hyphen.

Corresponding buttons can also be configured in the toolbar:

  • NbSpace

  • NbHyphen

To enable the plugin, add nonbreaking;/++resource++cke_nonbreaking/plugin.js to the Plugins field in CKEditor control panel (@@ckeditor-controlpanel).

Or setup ckeditor_properties through generic setup propertiestool.xml:

<?xml version="1.0"?>
<object name="portal_properties" meta_type="Plone Properties Tool">
 <object name="ckeditor_properties" meta_type="Plone Property Sheet">
  <property name="plugins" type="lines">
   <element value="ajaxsave;/++resource++cke_ajaxsave/plugin.js"/>
   <element value="nonbreaking;/++resource++cke_nonbreaking/plugin.js"/>
  </property>
 </object>
</object>

tableresize plugin

When enabled, the plugin makes it easy to change the table columns width by drag/dropping it from left to right and right to left.

To enable the plugin, add tableresize;/++resource++ckeditor/plugins/tableresize/plugin.js to the Plugins field in CKEditor control panel (@@ckeditor-controlpanel).

Or setup ckeditor_properties through generic setup propertiestool.xml:

<?xml version="1.0"?>
<object name="portal_properties" meta_type="Plone Properties Tool">
 <object name="ckeditor_properties" meta_type="Plone Property Sheet">
  <property name="plugins" type="lines" purge="False">
   <element value="tableresize;/++resource++ckeditor/plugins/tableresize/plugin.js"/>
  </property>
 </object>
</object>

Development

After checking out collective.ckeditor sources, run the included buildout.

This installs and runs the copy_ckeditor_code script. It takes care of copying ckeditor code in the appropriate browser/ckeditor directory.

The browser/ckeditor directory makes ckeditor javascript code available to the browser at:

http://yourplonesite/++resource++ckeditor/

How to Release

Obviously, the ckeditor code also needs to be included in the released eggs.

collective.ckeditor registers an entry point for zest.releaser that (if called properly) takes care of copying the code when preparing the release.

However, in order to take advantage of the entry point, you have to use the bin/fullrelease locally installed by the development buildout instead of a globally installed fullrelease.

Only the local bin/fullrelease script can see the entry_point registered by collective.ckeditor.

How to update to a newer version of CKEditor

Valid for CKEditor 4

  1. Go to dev/build-ckeditor

  2. Update plugin versions computation in image2.sh, moono.sh, scayt and wsc in scayt.sh

  3. Issue the following command CKEDITOR_VERSION=4.x.x make

  4. Run bin/copy_ckeditor_code

  5. Test

  6. Add untracked files git add ../../src/collective/ckeditor/_src/ckeditor/

  7. Commit

If you need unminified JS to debug the release, step 3 can be replaced with:

MINIFIED_JS=--leave-js-unminified CKEDITOR_VERSION=4.x.x make

Tests status

This add-on is tested using Travis CI. The current status of the add-on is:

https://img.shields.io/travis/collective/collective.ckeditor/master.svg https://img.shields.io/coveralls/collective/collective.ckeditor/master.svg https://img.shields.io/pypi/v/collective.ckeditor.svg

Credits

Companies

Contributors

Changelog

5.0.0a4 (2023-02-20)

  • add Plone Addon classifier [MrTango]

5.0.0a3 (2023-02-20)

  • Fix all tests for 5.2 and 6 and run them on GHA [gotcha]

  • Fix CKEditor in rich text field in modal dialog [gotcha]

5.0.0a2 (2022-12-12)

  • Fix brown bag release. [gotcha]

5.0.0a1 (2022-12-12)

  • Plone 5.2 and Plone 6 support. [aduchene, gotcha, spereverde, Mychae1]

  • Fix robot tests. [aduchene]

4.10.1 (2021-10-01)

  • Fix CKEditor not packaged properly in 4.10.0 release. [aduchene]

  • Use zest.releaser = 6.22.1. [aduchene]

4.10.0 (2021-06-11)

  • Add disallowedContent option to blacklist content. [naro, gotcha]

4.9.1 (2021-02-12)

  • Add Transifex.net service integration to manage the translation process. [macagua]

  • Add Spanish translation [macagua]

  • AjaxSave plugin, add message when nothing saved because nothing changed (Content already saved (nothing changed).) [gbastien]

  • AjaxSave plugin, added async:true attribute so it is possible to set it to async:false and make sure content is saved before continuing. [gotcha, gbastien]

4.9.0 (2019-09-12)

  • Update to CKEditor 4.12.1 [gotcha]

4.8.3 (2018-11-13)

  • AjaxSave plugin, defend against not traversable objects like plone.registry records [gotcha]

4.8.2 (2018-10-12)

  • refactor AjaxSave plugin

    • fix for Archetypes

    • support for plone.app.contenttypes

    • support for formlib portlets

    [gotcha]

4.8.1 (2018-07-10)

  • CKEditor language is coherent with edit view language [gotcha]

4.8.0 (2018-06-22)

  • Update to CKEditor 4.9.2 Include not enabled balloontoolbar plugin [gotcha]

4.7.2 (2017-12-15)

  • Make uploadimage resolveuid links relative. [gotcha]

4.7.1 (2017-12-08)

  • uploadimage support uses resolveuid. [gotcha]

4.7.0 (2017-12-01)

  • Enable uploadwidget and uploadimage plugins. Corresponding upgrade step (Now depends on plone.api) [gotcha]

4.6.0 (2017-08-18)

  • Update to CKEditor 4.7.2 [gotcha]

4.5.0 (2017-02-24)

  • Add a setting for CKEditor skin: colored or flat buttons

    Default skin remains Moonocolor, colored buttons. Flat buttons comes from the new Moono-lisa skin (see https://ckeditor.com/addon/moono-lisa) [gotcha]

    To avoid ugly border-bottom on buttons in default Plone 4 skin: add the following style to your CSS:

    #content a.cke_button {
        border-bottom: 0;
    }
    
    #content a.cke_button:hover {
        border-bottom: #ccc 0.1em solid;
    }
  • Update to CKEditor 4.6.2 [gotcha]

4.4.5 (2016-11-23)

  • nonbreaking plugin: used to insert non breaking spaces and hyphens. [gotcha]

4.4.4 (2016-05-02)

  • Fix overloading settings: it should be empty dict rather than None [gotcha]

4.4.3 (2016-05-02)

  • Enable settings overloading for formlib wysiwyg widget [gotcha]

4.4.2 (2016-04-13)

  • Fix customization per widget of filexxxBrowserUrl, depending on language [gotcha]

4.4.1 (2016-04-13)

  • Enable settings overloading for plone.app.z3cform wysiwyg widget [gotcha]

  • Enable customization per widget of filexxxBrowserUrl, depending on language [gotcha]

4.4.0 (2016-03-11)

  • Store custom toolbars in registry. (With previous change, enable different toolbars per widget) [gotcha]

  • Improve settings overloading per widget [gotcha]

  • Load js only if you are an authenticated user. [bsuttor]

4.3.5 (2016-02-16)

  • Fix image preview in ckeditor when clicking on main image in pop-pup window. [boulch]

4.3.4 (2016-01-21)

  • Fix context of ckeditor_plone_config.js when called by plone.app.form.widgets.wysiwygwidget when adding a portlet. [gotcha]

4.3.3 (2016-01-20)

  • Fix context of ckeditor_plone_config.js when called by plone.app.form.widgets.wysiwygwidget when editing a portlet. [gotcha]

4.3.2 (2016-01-08)

  • Fix default value of image2_alignClasses (plus upgrade step) [gotcha]

  • Add option to not minify JS to build-ckeditor scripts [gotcha]

  • Fix build-ckeditor scripts to keep option to not use image2 plugin [gotcha]

  • Update ckeditor accordingly [gotcha]

  • Check validity of image2_alignClasses [gotcha]

4.3.1.1 (2015-01-05)

  • Re-publish egg with generated static resources [ebrehault]

4.3.1 (2015-12-14)

  • Update to CKeditor 4.5.6 [gotcha]

  • Add some robot tests [spreverde, gotcha]

  • Add defaultTableWidth option to control panel to set the default table width in the table dialog window.

4.3.0b2 (2014-06-19)

  • Fix javascript order though GS. [montypie]

4.3.0b1 (2014-06-19)

  • Add image2 plugin and its dependencies. [gotcha]

  • Add image2_alignClasses and image2_captionedClass setting to setup image2 plugin. [gotcha]

  • Updated to CKeditor 4.4.1. [gotcha]

  • Add removePlugins option to control panel to allow to deactivate plugins. [gotcha]

4.2.0 (2014-06-05)

  • Show actual url in link dialog besides resolveuid. [gotcha]

4.1.1 (2014-03-27)

  • Fix upgrade steps to avoid overwriting custom configuration. [gotcha]

  • Updated to CKeditor 4.3.4 [gotcha]

4.1 (2014-03-27)

  • Expand setup of Advanced Content filter (ACF). [spereverde, gotcha]

4.0.0 (2014-02-05)

  • Updated to CKeditor 4.3.2 [gotcha]

  • Add extraAllowedContent option to setup filter rules. [gotcha]

  • Backward compatibility of toolbar settings [gotcha]

  • Moved to CKeditor 4.2.3 [gbastien]

3.6.12 (2013-09-05)

  • Make it possible to enable/disable SCAYT by default [gbastien]

3.6.11 (2013-05-30)

  • Stay compatible with IE<9, do not use indexOf in JS [gbastien]

3.6.10 (2013-05-30)

  • Updated ckeditor to 3.6.6.1 [vincentfretin]

  • travis setup / buildout infra [kiorky]

3.6.9 (2013-05-29)

  • Works under Plone 4.3. [thomasdesvenain]

3.6.8 (2012-12-13)

  • Update install and uninstall to change the default_editor site property instead of the wysiwyg_editor memberdata property. [maurits]

  • Also check the default_editor site property when determining whether the member wants to use CKeditor. [maurits]

  • Changed the way external plugins are registered. It’s better to use the three parameter variant of CKEDITOR.plugins.addExternal because this will make the base URL for the plugin resources available within the plugin code as this.path correctly. Otherwise this.path contains the full URL to the plugin script itself which consequently breaks loading of related resources (images, translations, etc). [dokai]

  • Refactored the ck_ruid_to_url transform to use plone.app.uuid to transform UIDs to URLs. This avoids using reference_catalog in favor of portal_catalog and appears to fix issues with Dexterity types not available through the reference_catalog. [dokai]

  • Limited string length to be searched under 3000 characters by re.search method. [taito]

3.6.7 (2012-08-20)

  • take care of external stylesheets registered with an absolute URL. [gotcha]

  • fix plugins (add migration) [kiorky]

  • refresh translations [kiorky]

  • translate styles menu [kiorky]

3.6.6 (2012-07-05)

  • Fix default value for images [kai.hoppert@tomcom.de]

  • Add a duplicate directory for ckeditor sources: it needs a more ambitious patch but fix a development installation [kiorky]

3.6.5 (2012-07-04)

  • Fix missing directory in 3.6.4 release [encolpe]

3.6.4 (2012-07-03)

  • Fix missing include for rst files in the manifest [encolpe]

  • Version the latest known working ckeditor commited in browser/ckeditor [kiorky]

3.6.3 (2012-07-03)

  • Don’t show ckeditor if html is not in the allowable content types of the field. This fixes integration with Products.Poi where the details field of a PoiIssue allows only text/x-web-intelligent by default. [vincentfretin]

  • Fixed the finder to honor the “Allow folder creation” option. [dokai]

  • Added i18n support [giacomos]

  • Added Italian translation [giacomos]

  • Fix language configuration according to plone_portal_state.language() [toutpt]

  • Add French translation [toutpt]

  • Add z3c.autoinclude targeted to Plone [toutpt]

3.6.2 (2011-12-12)

  • Describe in README how to release to ensure ckeditor code is included in the egg. [gotcha]

3.6.2b2 (2011-12-12)

  • Nothing changed yet.

3.6.2b1 (2011-12-12)

  • use ckeditor 3.6.2 [spereverde]

  • Add ajaxsave plugin to allow asynchronous save. [gotcha]

  • Use zest.releaser entry point to bundle ckeditor code. [gotcha]

3.6.1 (2011-07-14)

  • Nothing changed yet.

3.6.1rc (2011-07-14)

  • use ckeditor 3.6.1 [spereverde]

  • some pep8 and pyflakes [spereverde]

  • added control panel setting for templates_replaceContent [spereverde]

  • add control panel setting for registration of custom templates [gotcha]

  • Plone4.1 support - fix IVocabularyFactory import [msmith64]

3.4.1

  • use ckeditor 3.4.1 [macadames]

  • fix an error in set_media_type [macadames]

  • fix an error in mediaupload session [macadames]

3.4

  • use ckeditor 3.4

3.3.1b

  • use ckeditor 3.3.1 [macadames]

  • icon for control panel is now in controlpanel.xml [macadames]

  • Make control panel (and tests) running without errors with last Plone4 version … The listTypesForInterface method was broken. [macadames]

  • Use the new mediaupload attribute in collective.plonefinder (Force the selection of content-type in jquery.uploadify) [macadames]

  • Added support for z3c.autoinclude so no zcml slugs will be needed for this package. [sneridagh]

3.2.1b

  • image sizes selection added (use this new option provided by collective.plonefinder)

  • some fixes for last collective.plonefinder usage.

3.2.1a

  • use ckeditor 3.2.1

  • plone 4 compliance :

    • remove iw.resourcetraverser dependency

    • remove wysiwyg_support in skin (no more useful)

  • control panel improvements

  • functional doctests added or improved

  • FAQ added

  • buildout examples added to help developers using svn product

  • javascript contextuel config is now packed

  • added local field widget settings overload

  • changed portal_transforms resolveuid

  • all basehref problems fixed

  • menu styles through control panel finished

  • toolbar through control panel finished

3.0.2

  • use ckeditor 3.0.2

3.0

  • Initial release

CKEditor for Plone : FAQ

How to completely remove any trace of ckeditor in Plone ?

Use the Plone control panel > Addons > remove the product In ZMI > portal_properties remove ‘ckeditor_properties’, all your registered parameters for ckeditor will be destroyed.

How to install a new version of CKeditor for Plone ?

Always read this FAQ From one version to another, it could be needed to run a migration Generic Setup upgrade step for ckeditor_properties sheet.

How to use a svn version of collective.ckeditor ?

Just take a look at buildout/buildout.cfg and buildout/sources.cfg in this package. Checkout the standard plone4 buildout. Make a diff with standard plone4 buidout to see the parts you need to change. You need to add the svn adresses in sources.cfg for mr.developper, ‘ckeditor’ in egg and zcml sections, and the ‘ckeditor’ part ….

How to completly overload the ckeditor configuration with your own javascript config ?

Just create a javascript file called ‘ckeditor_plone_config.js’ in your ZMI > portal_skins > Custom or in a skin product.