wysiwyg editor

kristapsv · December 2010

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!

admin · December 2010

I did a quick test a bit ago and was able to get it to render the ckeditor, but it required a significant amount of customization to get the toolbar to work like the MarkItUp editor and that's where I stopped. Regardless, I'll post as many steps as I can remember to get the ball rolling:

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/

swampthang · December 2010

I've been able to get the CKEditor to work successfully so thought I'd add a little more detail for you.

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.

kristapsv · December 2010

great, thanks for quick response, will try it in next few days.

kristapsv · December 2010

ok thank you, I changed to ckeditor in backend, now will try to edit inline editing,
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."

admin · December 2010

For inline editing you'll need to make the same change displayed above to the following file on line 272:
fuel/modules/fuel/assets/js/fuel/edit_mode.js

kristapsv · December 2010

thanks for help, everything works !
tested with ckeditor and tinymce editor.

Lance · January 2011

Yeah thanks from me too, works sweet.

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"}
);

trimboot · January 2011

I think CKEditor must be in distributive by default.

With two config files: for back-end (with reach toolbar) and front-end (with several buttons only).

admin · February 2011

Some of you may have found that the Page module throws a javascript error if you put the ckeditor in the initSpecialFields method. This is because the initSpecialFields() function, is getting called twice. I will be making a few changes in the next release but wanted to post what I know at this time to help anyone trying to incorporate CKeditor.

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'
     });
});

admin · February 2011

Another note about getting CKeditor to work for inline editing. You'll need to load the ckeditor javascript files in the fuel/modules/fuel/views/_blocks/inline_edit_bar.php file (around line 8 where the js() function is). Also, you will need to replicate the code from the BaseFuelController.js file above to the fuel/modules/fuel/assets/js/fuel/edit_mode.js file (around line 260 or so).

bernihollis · April 2013

So sad this isnt an out if the box feature. It is industry standard with other CMS. Deal; breaker.

admin · April 2013

This is an older post. A lot of updates have been made in the 1.0 beta regarding better integration with CKEditor. I'd highly recommend checking it out here:
https://github.com/daylightstudio/FUEL-CMS/tree/1.0

Howdy, Stranger!

Categories

wysiwyg editor

Comments