Adding Tinymce option to FuelCMS

pierlo · November 2012

Hello there,

I've recently tried out Tinymce after a long while and I'd like to use it in my next FuelCMS project.

I'd like to provide a deeper integration with Fuel pretty much in the same way it is achieved with Ckeditor.
Basically I'd like to add 'tinymce' as an option for the MY_Fuel.php config file and possibly also specify some of the editor's preferences via an array like 'ck_editor_settings'.

I know it's not a simple thing to answer, but could you maybe just provide some general advice on how to about doing this? Like which files to look into etc...
Thanks a ton!

pierlo · November 2012

OK fwiw I've found out a super simple way of achieving this (at least partially).

1) download Tinymce and extract the tiny_mce folder inside /fuel/modules/fuel/assets/js/editors

2) add 'editors/tiny_mce/tiny_mce.js' at the end of the 'fuel_javascript' array found in /fuel/modules/fuel/config/fuel.php

3) inside '/fuel/modules/fuel/assets/js/fuel/controller/BaseFuelController.js' locate the line that starts with


$editors.each(function(i) {

and then inside that change


if ((jqx.config.editor.toLowerCase() == 'ckeditor' && $(this).is('textarea[class!="markitup"]')) || $(this).hasClass('wysiwyg')){
				createCKEditor(this);
			} else {
				createMarkItUp(this);
			}

to


if ((jqx.config.editor.toLowerCase() == 'ckeditor' && $(this).is('textarea[class!="markitup"]')) || $(this).hasClass('wysiwyg')){
				createCKEditor(this);
			} else if ((jqx.config.editor.toLowerCase() == 'tinymce' && $(this).is('textarea[class!="markitup"]')) || $(this).hasClass('wysiwyg')){ // PIERLO
                createTinyMCE(this); // PIERLO
            } else {
				createMarkItUp(this);
			}

we're basically adding the option to create a TinyMCE editor via the following function


var createTinyMCE = function(elem){

            tinyMCE.init({
                // General options
                mode : "exact",
                elements: $(elem).attr('id'),

                [... your TinyMCE options here]
            });

        }

which can be added right before the line starting with


$editors.each(function(i) {

You can now add


$config['text_editor'] = 'tinymce';

in your MY_fuel.php config file as an option.

Yes, it's hacky. And yes, the tinymce configuration options could be easily taken out of that createTinyMCE function and passed in as parameters - but I don't have enough time to do that now! If someone wants to chime in...

PS: You might have strange CSS clashes with the TinyMCE provided stylesheets - good luck with those!

mahmudul · July 2013

Thank you very much for showing a way to use tinymce editor. And I have found that while adding the code to create tinymce editor it shows an error. and it's not working.

admin · July 2013

You may be able to do this using FUEL 1.0 and custom fields which allow you to associate a field with it's own javascript and CSS:
http://docs.getfuelcms.com/general/forms

Howdy, Stranger!

Categories

Adding Tinymce option to FuelCMS

Comments