In our previous post, we discussed Django-tinymce, a JavaScript WYSIWYG editor that converts an HTML textarea field into an editor instance. Again, django-tinymce is a Django application that contains a widget that renders a form field as a TinyMCE editor. This is especially helpful when you have forms that require rich text editing.
TinyMCE also has a lot of options you can use to enhance your WYSIWYG editor. We’re going to take a walk-through of the basic options that you have in TinyMCE, and we’re also going to discuss plugins.
Options
readonly : This enables your editor into readonly mode. When in readonly mode, your user cannot change the contents in the textarea.
You can enable this option by having “readonly:1” in your list of options.
mode: this tells which (specific) textareas will be converted into TinyMCE editor instances. By default, TinyMCE converts all textareas into TinyMCE editor instances.
There are four options for mode:
1. textareas -converts all textareas. This is the default setting (even without having the mode option)
2. specific_textareas- converts specific textareas that matches editor_selector setting option (see the documentation for this)
3. exact -converts elements of specified names, listed in the elements option— it can be of any element, but we would usually use divs or textareas.
4. none – does not convert any element. This is useful for when you want to toggle (turn on/off) a textarea or div into a tinyMCE editor (you can control it by calling the function tinyMCE.execCommand. See the documentation for how to use this function).
elements: this contains a comma-separated list of element IDs that will be converted into editor instances. This is only available if you set your mode option to exact (again, this list of element IDs can be any element, but we would usually use divs and textareas).
theme: this option lets you choose what theme your tinymce editors will show. The default option is simple (but in our previous examples, we used advanced). The simple theme contains the basic functions, the advanced theme (which we’ve used in our previous examples) lets us add or remove buttons and panels. We use the advanced theme because we want our text editors to be flexible and customizable. It would be great if you read the documentation to see all of the configurations you can have for the advanced theme.
The advanced theme is very useful for when you need to use plugins.
Plugins
Plugins is an option in tinyMCE, but I’ve put this one in a different section in this article because there’s so many things you can do with plugins in tinyMCE.
Plugins, as an option in tinyMCE, is a comma separated list of plugins. These plugins are loaded from a folder in your tinymce named “plugins” (tinymce/jscripts/tiny_mce/plugins) you can see the list of plugins available for use by searching for that folder, or you can see the Plugins reference in tinyMCE’s documentation. You can also add plugins from a source other than the ones already bundled with your installation. You load these custom plugins after your tinyMCE.init call, but we won’t discuss the details of this one— for now, let’s concentrate on the plugins that are pre-installed.
When using plugins, add this one to your options list:
plugins : “nameofplugin, -nameofexternalplugin”
(external plugins have a – character before its name.)
Here are a few plugins that can be very useful for your projects:
save – this plugin allows you to create a callback function when a save button is pressed. This save button can be used to submit the form that your tinyMCE editor is in.
paste – this plugin allows your user to paste/copy text in your TinyMCE in different modes: text (converts any text into plain text), word (pastes text with formatting) and allows you to select all of the text in your textarea.
style– if you want an even richer text editor with more options, the style plugin is quite useful, because it lets you edit most CSS styles. Add styleprops to your toolbar controls to show its functions. (Some of its functions include letter spacing, font size and style, adding white spaces, and borders.)
fullscreen – this plugin enables you to edit text in your TinyMCE in fullscreen mode.
There are about 30 plugins you can use in TinyMCE, so take a look at the documentation and use the one that best suits your project.