MicroTiny WYSIWYG Editor
MicroTiny WYSIWYG Editor
What Does This Do?
MicroTiny is a small, restricted version of the TinyMCE editor, allowing content editors a near WYSIWYG appearance for editing content. It works with content blocks in CMSMS content pages (when a WYSIWYG has been allowed), in module admin forms where WYSIWYG editors are allowed, and allows restricted capabilities for editing html blocks on frontend pages.
In order for MicroTiny to be used as the WYSIWYG editor in the Admin console, the MicroTiny WYSIWYG Editor needs to be selected in the user's preferences. Select "MicroTiny" in the "Select WYSIWYG to Use" option under "My Preferences >> User Preferences" in the CMSMS Admin panel. Additional options in various modules or in content page templates, and content pages themselves can control whether a text area or a WYSIWYG field is provided in various edit forms.
For Frontend editing capabilities MicroTiny must be selected as the "Frontend WYSIWYG" in the global settings page of the CMSMS admin console.
Features:
- Supports a subset of HTML5 block and inline elements.
- Separate profiles for admin editors and frontend editors.
- A custom file picker for selecting previously uploaded media.
- Custom plugin for creating links to CMSMS content pages (admin only).
- Customizable (somewhat) profiles for admin behavior and frontend behavior.
- Customizable appearance by specifying a stylesheet to use for the editor.
How do I use it
- Install and configure the module
- Set MicroTiny as your WYSIWYG editor of choice in "My Preferences"
About HTML, TinyMCE, and content editing
This editor provides the ability to edit content in an environment that is similar (but not necessarily identical to) to the intended output on the website frontend. Numerous factors can influence differences, including:
- Incomplete or incorrect stylesheets
- Use of advanced styling that the editor cannot understand
- Use of html elements that the WYSIWYG does not understand
As a simple content editor this editor does not support all of the HTML elements (particularly the new HTML5 block level elements. Any elements that the editor does not understand or support will be stripped from the content upon save. As a general rule of thumb (not including >div<) you can assume that the editor supports only the elements that are directly available via the various menu and toolbar options.
As CMSMS is a heavily templated environment using the Smarty template element, it is intended that the WYSIWYG editor is used only for specific blocks of content or data elements (i.e: the main content area of a page, or the description for a News or Blog article). This module (and CMSMS) do not support full page editing.
The intent and purpose of this module is to provide a WYSIWYG-like environment where editors can insert and edit content within specific blocks with limited formatting capabilities that will not interfere with, or override the styling of the page template. It is not intended and for will not be supported as a general HTML editor or layout manipulator.
Website developers should understand the points above, assume that content editors can and WILL be editing within a WYSIWYG area and ensure that only simple content is there. If advanced layout techniques are needed for a specific area, then developers should modify the appropriate templates so that the restricted functionality editor will work properly.
This editor is built with the assumption that content for a specific area of a page (or a blog article, news article, or product description, ...) is data. The data is styled by the appropriate templates, and should not be mixed with design elements, or functionality of the website.
As a simple example. If you are insisting that editors use certain classes for images, layout their images in a certain manner, or insert block elements such as
This module is not designed to handle special cases where advanced HTML is required. In such pages the WYSIWYG editor should be disabled, and editing access to the page restricted to those with the ability to understand and edit HTML code manually.
As this module is intended to provide a restricted editor for specific blocks, for use by editors without HTML knowledge. Since the WYSIWYG editor does not understand the smarty logic, you should NOT (as a general rule) mix smarty logic or module calls within WYSIWYG enabled areas. It is best to disable the WYSIWYG for these areas/pages and restrict edit access to those pages.
About Images and Media
Each profile has the ability to enable, and disable the ability for the editor to graphically insert image or media elements into the edited content. This is useful in highly structured environments where images and other media can be included in final output via other means. Particularly on frontend editing forms, where the identify of the user cannot necessarily be trusted it is recommended that users not have the ability to insert images or other media.
Note: This module does not provide the ability to upload or otherwise manipulate files, images or media. That functionality is handled elsewhere in CMSMS.
About Frontend Editing
This module provides a unique "profile" for configuring the WYSIWYG editor on frontend requests. By default the frontend profile is highly limited. To enable frontend WYSIWYG editors, the tag must be included in the head part of the template. Additionally, this module must be set as the "Frontend WYSIWYG" in the global settings page of the CMSMS admin console.
About Styles and Colors
This module provides the (optional) ability to associate a stylesheet with the profile. This provides the ability to style the edit portion WYSIWYG editor in a manner similar to the website style. Providing a more WYSIWYG like experience for the content editor.
Additionally, in conjunction with the classname parameter of the {cms_textarea} and {content} tags, this module allows the content editor module to override the specified stylesheet differently for each content block. This allows the ability to style each WYSIWYG area differently, if there are multiple WYSIWYG areas on the page. This functionality is restricted to the admin interface only.
For example, in a page template adding the cssname parameter to the {content} tag allows specifying a CMSMS stylesheet to use to customize the appearance of that content block. i.e: {content block='second block' cssname='whiteonblack'}
Additionally, a setting in the content editing section of the "Global Settings" page allows automatically supplying the css name parameter with the name of the content block.
Styles for the WYSIWYG editor
The stylesheet for the WYSIWYG editor area should style everything from the body element downwards. It is only necessary to style the elements available to, and used by the content editor. Here is a simple example of a stylesheet for a white-on-black theme:
background: black;
color: white;
}
p {
margin-bottom: 0.5em;
}
h1 {
color: yellow;
margin-bottom: 1em;
}
h2 {
color: cyan;
margin-bottom: 0.75em;
}
FAQ:
Q: Where is the support for "some functionality" in the editor, and how do I activate it?
A: You don't. The version of TinyMCE distributed with MicroTiny is a trimmed down, custom package. We have added our own custom plugins, but don't support the addition of custom plugins or the ability to customize the configuration in any way other than the edit profile form. If you require additional functionality in a WYSIWYG editor you may have some success in a third party module.
Q: Which HTML/HTML5 tags are supported by this module, and how do I change that?
A: The list of supported elements in the default TinyMCE editor can be found on the TinyMCE website (though we don't have a correct link at the moment). There is no mechanism in the MicroTiny module to extend that.
Q: I cannot get the MicroTiny editor to work in the admin interface, what can I do?
A: There are a few steps you can follow to diagnose this issue:
- Check the CMSMS admin log, your PHP error log, and the JavaScript console for indications of a problem.
- Ensure that the example WYSIWYG area works in the MicroTiny admin panel under "Extensions >> MicroTiny WYSIWYG Editor". If this does not work, recheck your PHP error log and JavaScript console.
- Ensure that MicroTiny is selected as the "WYSIWYG to use" in your user preferences.
- Check other content pages. If MicroTiny works on one or more of those then that indicates that a flag to disable WYSIWYG editors on all content blocks may be set on some content pages.
- Check the page template(s). The wysiwyg=false parameter may be specified on one or more content blocks in the page template(s) which will disable the WYSIWYG editor.
Q: How do I insert a
instead of create new paragraphs?
A: Press [shift]+Enter instead of just the Enter key.
Q: Why is "some functionality" available in the menubar, and not the toolbar?
A: For this most part this is done intentionally to allow web developers the ability to further restrict the functionality of certain editor profiles. The menubar can be toggled off in different profiles thus denying the user the functionality only available in the menubar.
Caching:
In an effort to improve performance, MicroTiny will attempt to cache the generated JavaScript files unless something has changed. This functionality can be disabled by setting the special config entry mt_disable_cache to true. i.e: adding $config["mt_disable_cache"] = true; to the config.php file.
See Also:
content tag
cms_init_editor tag
The TinyMCE editor itself.