[New] WYSIWYG Editor: TinyMCE

[admin]

The default WYSIWYG editor in nuBuilder is now TinyMCE (previously Quill)
TinyMCE comes with a a lot of nice plugins like table, image, emoticons, link, lists, charmap, etc.

tinymce.jpg (43.51 KiB) Viewed 313 times

FAQ

How can I still use Quill as default editor?

Set $nuConfigIncludeQuill to true in nuconfig.php

Code: Select all

$nuConfigIncludeQuill = true;

Set nuDefaultUseQuill to true in nuconfig.php

Code: Select all

nuUXOptions['nuDefaultUseQuill'] = true;

Can I use both editors at the same time?

Make sure that these two includes are set to true in nuconfig.php

Code: Select all

	
$nuConfigIncludeTinyMCE		= true;	//-- Include TinyMCE WYSIWYG library
$nuConfigIncludeQuill		= true;	//-- Include Quill WYSIWYG library

Set the option to true, if Quill should be the default editor, set it to false, to use TinyMCE instead.

Code: Select all

nuUXOptions['nuDefaultUseQuill'] = true;

Declare a function with name nuOnEditorLoad() in the form's custom code to decide which editor should be used for what WYSIWYG object.

E.g. use Quill for the WYSIWYG id quill_editor_id and TinyMCE for all other editors on the form:

Code: Select all

function nuOnEditorLoad() {
    $('.nuEditor').each((index, element) => {
        if (element.id == 'quill_editor_id') {
            nuQuill(element.id);
        } else {
            nuInitTinyMCE(element.id);
        }
    });
}

How can I remove certain plugins, customise the toolbar etc?

Declare a function with name nuOnEditorLoad() in the form's custom code.

Example to load a minimal toolbar:

Code: Select all

function nuOnEditorLoad() {
    $('.nuEditor').each((index, element) => {
        nuInitTinyMCE(element.id, undefined, undefined, 'minimal', undefined, '');
    });
}

nuInitTinyMCE takes the following parameters. Pass undefined for a parameter to use the default configuration. See nuwysiwyg.js for their defaults.

Code: Select all

nuInitTinyMCE(id, options = {}, mobile, toolbar = 'default', toolbar_groups = {}, menubar = 'file edit view insert format tools table tc help', contextmenu = 'image table configurepermanentpen', quickbars = 'bold italic | quicklink h2 h3 blockquote quickimage quicktable') 

Load custom options:

Code: Select all

function nuOnEditorLoad() {

	$('.nuEditor').each((index, element) => { 

		let options = {
			// options here...
		};

		nuInitTinyMCE(element.id, options);

	});
}