CKEditor 4.4.x

edited August 2014 in Installation
Anyone tried patching in CKEditor 4.4.x to replace the existing CKEditor ?

The current version in production (Fuel 1.1) is 3.x and v4.0 is in the development branch on Git. I need 4.4.x so I can use the widget plugin. Unfortunately, 4.4.x breaks the Fuel image plugin (in custom_field.js). Anyone come across this?

Cheers

Comments

  • edited 3:34PM
    The version in 1.1 should be v4.0. There appears to be two things that need to be fixed for this to work:

    1. An additional configuration setting is required for the plugins to work called "allowedContent" which can be added in the MY_fuel.php $config['ck_editor_settings'] array and set to "true":
    http://ckeditor.com/forums/Support/editor.insertHtml-doesnt-work-properly-anymore

    2. In custom_fields.js change around line 198 or so:
    var src = element.attributes['src']; // v4.4 fix // TO var src = element.attributes['data-cke-saved-src']; // v4.4 fix

    Please test out on your end and report back. I can push this to the develop branch after a little more testing is done.
  • Seems successful at first glance. Thanks. I'll do more testing...

    I needed to edit the fuelimage and fuellink plugins though (see below).

    So, using Fuel 1.1 production version, what I did:

    1. Rename ./editors/ckeditor
    2. Downloaded the latest ckeditor (4.4.3) making sure it had the same standard plugins bundled. (I also needed "widget" for my project so included that too)
    4. Copied fuelimage and fuellink plugins from development branch to ckeditor plugins
    5. Copied in custom_fields.php from development branch
    6. Edited custom_fields.php per request above ('data-cke-saved-src')
    7. Edited MY_fuel.php to account for the new fuelimage and fuellink plugin names

    I found that the image and links icons on the toolbar were corrupt when running CKeditor - it seems the CSS was looking for '*_fuelimage', '*_fuellink' and '*_fuelunlink' classes rather than image, link and unlink. To fix it, I edited the plugin.js for both plugins:

    ...at the bottom:
    editor.ui.addButton( 'FUELImage', { label: 'Insert an Image', command: 'fuelimage', toolbar: 'image', /** +++ **/ icon: 'image' /* and 'link' and 'unlink' for fuellink plugin*/ });
  • edited 3:34PM
    The icon fix I believe is already in the develop branch from a previous commit (the classes cke_button__fuellink_icon, cke_button__fuelunlink_icon, cke_button__fuelimage_icon were added to fuel.css). Let me know if you uncover anything else after your testing.
  • edited 3:34PM
    Sorry to hijack this thread, but it's directly relevant. I noticed Fuel 1.2 is using CKEditor 4.4.4 which has true in-line editing. I was unable to get it working directly with Fuel when I played with it for a few minutes. Is there an easy way (simple config perhaps) to get it working, or is that not possible yet?
  • edited 3:34PM
    To enable that type of inline editing, we would need to drastically overhaul inline editing in general so it's currently not supported but something we are looking at for down the road.
Sign In or Register to comment.