Have anyone tried to integrate other wysiwyg editor, like tinymce, because 99% of clients dont understand a thing about html, so they cant realy edit anything.. in overall the best cms on CI in my thoughts, really easy to modify, update backend + inline editing is very nice!
Comments
1. Download the ckeditor here:
http://ckeditor.com/download
2. Place it's contents here in the FUEL installation:
fuel/modules/fuel/assets/js/ckeditor/
3. Add the following lines to your fuel/application/config/MY_fuel.php file so it will load the proper javascript:
$config['fuel_javascript'][] = 'ckeditor/ckeditor.js'; $config['fuel_javascript'][] = 'ckeditor/adapters/jquery.js';
4. Add the following code to the fuel/modules/fuel/assets/js/fuel/controller/BaseFuelController.js around line 333 and comment the lines above that are used to instantiate MarkItUp (line 320-332)
$ckEditor = $('textarea:not(textarea[class=no_editor])', context); $ckEditor.ckeditor();
I believe that is it to get it to render the ckeditor instead of MarkItUp. However, you'll probably need to create some plugins and change the toolbar. Here is some additional info:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Setting_Configurations
http://ckeditor.com/blog/CKEditor_for_jQuery
http://www.voofie.com/content/2/ckeditor-plugin-development/
In fuel/modules/fuel/assets/js/fuel/controller/BaseFuelController.js the code he's talking about should look like this...
// set up markitup /* $markitupField = $('textarea:not(textarea[class=no_editor])', context); if ($markitupField.size()){ var q = 'module=' + escape(this.module) + '&field=' + escape($markitupField.attr('name')); var markitUpClass = $markitupField.attr('className'); if (markitUpClass.length){ var previewPath = markitUpClass.split(' '); if (previewPath.length && previewPath[0] != 'no_editor'){ q += '&preview=' + previewPath[previewPath.length - 1]; } } myMarkItUpSettings.previewParserPath = myMarkItUpSettings.previewParserPath + '?' + q; $markitupField.markItUp(myMarkItUpSettings); } */ $ckEditor = $('textarea:not(textarea[class=no_editor])', context); $ckEditor.ckeditor();
If you have any trouble getting this set up let us know. Will be happy to help. The links admin provided above are very helpful.
only for pages to ckeditor to work i needed an extra if:
$ckEditor = $('textarea:not(textarea[class=no_editor])', context); $ckEditor.ckeditor(); if (CKEDITOR.instances['vars--body']) { CKEDITOR.remove(CKEDITOR.instances['vars--body']); }
I'm not strong at javascript, I found this solution searching by error message
"Error: uncaught exception: [CKEDITOR.editor] The instance "vars--body" already exists."
fuel/modules/fuel/assets/js/fuel/edit_mode.js
tested with ckeditor and tinymce editor.
To build on the info a fraction further:
Custom tool bar/skin on instantiation:
$ckEditor.ckeditor({toolbar : "MyCustomToolbarsName", skin : "mySkinsName"});
Custom toolbar config in /editor/config.js:
config.toolbar = 'MyToolbar'; config.toolbar_MyToolbar = [ ['Source'], ['Bold','Italic'], ['Image','HorizontalRule'], ['PasteFromWord','-'], ['NumberedList','BulletedList'], ['Format'], ['Link','Unlink'], ['Undo','Redo','RemoveFormat'], ['Maximize'] ];
And if you want to hook up CKFinder to run off the CKEditors 'image' button:
Drop the ckfinder directory next to the editor from above.
In MY_Fuel.php add:
$config['fuel_javascript'][] = 'ckfinder/ckfinder.js';
Open config.php and set your $baseUrl and $baseDir.
In the baseFuelController.js file I changed the CKEditor instantiation to:
$("textarea:not(textarea[class=no_editor])").ckeditor({toolbar : "MyToolbar", skin : "chris"}); var editor = $("textarea:not(textarea[class=no_editor])").ckeditorGet(); CKFinder.setupCKEditor(editor, 'http://yoursite.com/path/to/ckfiner/');
I'm sure there's a nicer way to do the above js, I pulled it out of another project that doesn't use fuel..
Edit: Oh and if you get message like "Error: uncaught exception: CKEditor not yet initialized, use ckeditor() with callback." Stick the last two lines in the call back area like:
$("textarea:not(textarea[class=no_editor])").ckeditor( function() { var editor = $("textarea:not(textarea[class=no_editor])").ckeditorGet(); CKFinder.setupCKEditor(editor, 'http://yoursite.com/path/to/ckfiner/'); }, {toolbar : "MyToolbar", skin : "chris"} );
With two config files: for back-end (with reach toolbar) and front-end (with several buttons only).
We will be making a minor change to the add_edit method in the fuel/modules/fuel/assets/js/controller/BaseFuelController.js file to be able to say whether to initialize special fields or not like so (will default to true):
add_edit : function(initSpecFields){ if (initSpecFields == null) initSpecFields = true;
And then in the fuel/modules/fuel/assets/js/controller/PageController.js file on line 14 or so this change so it won't initialize the special fields on the first call and will wait fo the the callback of the #layout_vars load function on line 56:
fuel.controller.BaseFuelController.prototype.add_edit.call(this, false);
Also, I've found this implementation code of CKEditor won't generate the warning that a field has changed when it hasn't (the customConfig path is pointing to a file at fuel/modules/fuel/assets/js/editors/fuel_ckeditor.js).
$ckEditor = $('textarea:not(textarea[class=no_editor])', context); $ckEditor.each( function() { var ckId = $(this).attr('id'); // cleanup just in case if (CKEDITOR.instances[ckId]) { CKEDITOR.remove(CKEDITOR.instances[ckId]); } CKEDITOR.replace(ckId, { customConfig: jqx.config.jsPath + 'editors/fuel_ckeditor.js' }); });
https://github.com/daylightstudio/FUEL-CMS/tree/1.0