Role Based Profile Configuration

One of the TinyMCE's most attractive features is the vast control you have over how the editor looks, which buttons it displays, and what functionality is enabled. In order to make these decisions, you need to create one or more configuration profiles that can be assigned to your existing user roles.

From the TinyMCE settings page (admin/settings/tinymce), click Create new profile (admin/ settings/tinymce/add). This leads to a new configuration screen with a wealth of options.

After naming your new profile, select the roles to which it will apply. The roles available will be those that have the Access TinyMCE permission. Each role can belong to only one profile, so the roles that you select here for this profile will not be available if you create another profile.

Editor Display and Formatting Options

You can set the following options for this profile's editor display and formatting options:

Make TinyMCE visible on: You can decide whether to show the editor on all text areas or only on those pages that you specify. For indicating specific pages, you can use any valid Drupal paths and use the asterisk (*) as a wildcard. You can also use <front> to indicate the front page (as you defined it on the admin/settings page).

Buttons: The Buttons group of options lets you decide exactly which buttons will be active in the editor for this particular profile. More than 50 buttons are available, ranging from basic formatting (boldface, italic, and so on) to scripts to check spelling and clean the HTML output.

Tip Try out the buttons before you activate them by visiting the TinyMCE web site: http://tinymce.

Editor appearance: The Editor appearance group of options lets you customize how the editor should appear.

• The Toolbar Location option lets you set whether the editor's toolbar appears above the text area (top) or below it (bottom).

• The Toolbar Alignment option sets the editor's toolbar to appear on the left or right, or in the center.

• The Path Location field refers to a context-sensitive display of the Document Object Model (DOM) hierarchy within the rich-text editor. Wherever the cursor is placed, the path will show you which HTML element it is dealing with, as well as that element's parents, all the way up the hierarchy within the editor. The example in Figure 4-3 shows the cursor in an <li> with an <ol> as its parent, which, in turn, is in a <blockquote> element, resulting in the path blockquote » ol » li. The main purpose of the path information is to help people with an understanding of HTML figure out why something in the editor works the way it does, which can be useful if achieving a particular format is proving to be a tricky task.

disable rich-text

Figure 4-3. Path information in the TinyMCE editor disable rich-text

Figure 4-3. Path information in the TinyMCE editor

• The Enable Resizing Button option allows you to grab the bottom-right side of a text area and drag it to any size you need.

Block formats: The list of block formats allows you to remove options from the block element selector, which appears next to the styles selector in Drupal's Advanced theme. By default, the block format selector contains nine options, which correspond to the following HTML elements: <p>, <address>, <pre>, <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. These elements are all known as block-level elements because the default behavior for browsers is to place them on their own line. The rich-text editor allows any highlighted text to be promoted to block level using these controls. In reality, it is rather uncommon for all of them to have special meanings on any given web site. If this is the case on your web site, you can remove the irrelevant options from the list in the Block Formats field and avoid tempting your web users to add meaningless markup. Note that it is impossible to add elements other than these nine.

Cleanup and Output Options

TinyMCE can help guarantee the quality of the HTML that users enter into your web site. It does so by offering three different types of processing or cleanup of input.

Verify HTML: Setting Verily HTML to True will help eliminate HTML errors from user input. This includes detecting and closing unclosed elements, and stripping the <html>, <head>, and <body> tags. Occasionally, the editor may be used to make modifications to an entire HTML document, including the <html> and <head> tags. For this case, it is essential that you set Verify HTML to False, as the <head> tags will be stripped otherwise.

Preformatted: The Preformatted option, when set to True, will replace white space characters with their HTML entities, thus functioning like the <pre> tag. This might be a good idea if your site specializes in ASCII art, but in most other cases, it is probably a bad idea, as many web users will try to format their posts with the spacebar, a practice that should

Convert <font> tags to styles: This is a cleanup task that is highly recommended, as the <font>tag has been deprecated (see html#edef-FONT). When this option is enabled, <font> tags will be converted to <span> tags with style attributes to replace the function of the <font> tags.

CSS Settings

One of the most significant advances in modern web development is the widespread adoption of Cascading Style Sheets (CSS) as the preferred means for adding style elements to HTML. Gone are <font> tags, where size and color are embedded directly into the HTML. Most in-browser WYSIWYG editors, including TinyMCE, offer font, size, and color selectors that allow web users to apply their favorite shades of purple or pink to their postings, effectively marring the design and color scheme of your carefully designed web site. This is the reason why these elements are, by default, turned off in the Drupal TinyMCE module.

Note The styles selector is visible only in the Advanced theme.

Fortunately, there is a better way to offer these same features in a controlled and limited way that gives the web users the tools they want and eliminates the danger of them overstepping their bounds, stylistically. With TinyMCE, you can identify a style sheet that defines text attributes the user is encouraged to apply. TinyMCE will look at the style sheet and offer each defined style in a drop-down box, so it is easy for your users to apply style information.

The Editor CSS field gives you three options for where TinyMCE should look to find this style sheet:

Use theme CSS: This grabs the style.css file that is included in your Drupal theme. Figure 4-4 shows the list of style names available when using this option with the default Drupal Blumarine theme. While this option guarantees that the user won't be able to do anything that doesn't fit with the look and feel of your site, it is probably not the best choice. First, the style names are rather cryptic and theme-developer-oriented. Terms like box, block, and node don't really describe how the resulting style will look. Furthermore, some styles, like error, don't need to be accessible to web users.

Define CSS: This is the best option, and it also requires the most extra effort on your part. When you select this option, TinyMCE takes the value from the next field, CSS Path, and looks there for the style sheet to use.

CSS path: Here, you can enter any web-accessible URL. The variables %h and %t are available and are dynamically replaced with your host name and the path to the current theme, respectively. This allows a site that supports different themes for different users to have a fitting TinyMCE style sheet for each theme.


B I U ABe = =

-- Styles -- Lr

~ Format - 1

m= i * * i -) 'i

-- Styles -links

J © HTmL

S 1 H E I a*" 1 '+'ti J V 1 H

site-name site-slogan

i 1 n © 1 a


1. Example

messages error title submitted


block block node sticky comment

Path: blockquote s ol » li

disable rich-text disable rich-text

Figure 4-4. Styles available with the Bluemarine theme

■Caution TinyMCE, which is visible only on editing screens, imports the style sheet you define in the CSS Path field itself. You will need to add the import for this style sheet to your theme as well. Otherwise, the style sheet will be loaded only when editing, and the styles visible in TinyMCE will not take effect when the content is being viewed normally.

Exercise 4-1 demonstrates how to add a custom style sheet for use with TinyMCE.

Was this article helpful?

0 0

Post a comment