Users often require a limited set of stylistic controls over content on their site. We implement this in Drupal using the wysiwg module and TinyMCE.
Commonly, users need to create subheadings in their posts. Markup should always be privileged over wrapping content in classes. For example, it is much better, both from a structural and a maintenance perspective, to use an h2 tag to create a title, rather than adding a class of, say, .title to a paragraph tag, then forcing the paragraph to look like an h2. It will make a mess of your stylesheet, plus render your site less accessible to screen readers and search engines.
It is most often advisable to create a new Input profile called “Rich Text” or “Graphical HTML Editor”, but we can also edit the “Full HTML” input format.
Our wysiwyg profiles will be listed at [ /admin/settings/wysiwyg/profile ] where we edit the profile to which we’ve assigned the TinyMCE editor. Under Buttons and plugins, we enable the following buttons:
- HTML block format
- Font style
- Source code (not necessary, but useful for checking what we’ve done)
Under the CSS fieldset, we limit the number of block tags available, i.e.
and set the Editor CSS to use the theme CSS. By default, this will generate a lot list of classes from our theme’s style.css. Now, you can create a separate stylesheet just for the wysiwyg, but coordinating changes across them can be a hassle. Instead, we open up only a subset of the classes in our stylesheet using the CSS classes textarea, following the [title]=[class] format (this will seem familiar if you’ve ever used webform module):
intro text=intro description text=description read more link=more-link
This is great because we can now provide a more meaningful list of styles to the user, and also a limited set of structural markup tags. The downside is that we have 2 dropdown lists and have to provide the tiniest bit of eduction.