wysiwyg - Decko

WYSYWIG = What You See Is What You Get

Wagn uses the customizable TinyMCE editor for user-friendly editing of rich text, so that users don't have to learn a lot of markup.

Example

Our *tinyMCE card here on wagn.org has:

theme_advanced_buttons1 : "formatselect,bold,italic,"

The "formatselect" is what makes the menu appear in our edit toolbar, and the "bold" and "italic" puts the corresponding buttons there as well:

There's also a line with:

theme_advanced_blockformats : "p,h1,h2,pre",

...which is why the menu offers Paragraph, Heading 1, Heading 2, and Preformatted.

How To

Simply edit the *tinyMCE card to your heart's content (on your Wagn — here, you can only edit it if you have the Role of Developer). See the TinyMCE configuration documentation and especially their button documentation to learn about everything that you can do.

Tips

You can separate very long lines contained in quotes by putting an endquote and starting a new line with a plus and opening the quote again. We use this trick in our *tinyMCE card to keep theme_advanced_buttons1 and extended_valid_elements from running off the right edge of the card:

{
  "theme": "silver",
  "menubar": "edit view insert format table",
  "plugins": "autoresize code lists hr link autolink table",
  "toolbar1": "formatselect | bold italic strikethrough forecolor backcolor | deckolink nest |   | numlist bullist outdent indent  | removeformat",
  "width":"100%",
  "auto_resize":true,
  "autoresize_max_height": 500,
  "relative_urls":false,
  "extended_valid_elements":"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
 }

To format text as monospaced (as you see in the example above), you can add "pre" to theme_advanced_blockformats and "Preformatted" will appear as an option in the Format menu.

Discussion

Tickets relevant to wysiwyg