PhpRiot
News Archive
PhpRiot Newsletter
Your Email Address:

More information

Advanced Content Editing with the Recite CMS WYSIWYG

Recite CMS features a WYSIWYG Editor ("What You See Is What You Get"), which allows you to quickly and easily enter rich content without needing to know HTML. When implementing a site in Recite CMS there are some advanced features you can leverage to make content editing even easier in the future.

These features include:

  • Front-end content editing
  • WYSIWYG templates
  • Custom styles in styles dropdown
  • Custom look-and-feel of editor

Spending a little bit of time setting these up early on will make things much easier for other users (and you!) in future!

Front-End Content Editing

Every page in Recite CMS can have any number of content blocks associated with it. These are defined in page templates using the following code:

{contentblock name='Main Content'}

You can define any number of content blocks in each page. You simply use {contentblock} and provide a different name for each block.

The great thing about content blocks is that in addition to being able to update content while in the Control Panel, you can also make changes to your site in real-time while viewing it!

All you need to do is open the page you want to edit in container management mode then click Edit on the block you want to change. This will open up the WYSIWYG editor!

WYSIWYG Templates

The WYSIWYG has a feature where you can insert pre-defined blocks of HTML into the editor. This is useful if you have a particular piece of markup you want to use often. You can open this list by clicking on the Templates toolbar button in the WYSIWYG.

This list is populated automatically using certain templates you define in Recite CMS. To create a new template for this list, create a new template with type WYSIWYG Template (in the "Miscellaneous" category).

When templates appear in this list, they display the name and description you enter when creating the template.

Custom Look-And-Feel of Editor

When the WYSIWYG editor displays normally, it shows a white background and black text. It is possible to change this default look and feel using a WYSIWYG stylesheet.

The WYSIWYG stylesheet is a normal CSS stylesheet that you can create in the Recite CMS file management tools. Any styles defined in this stylesheet are automatically loaded into the WYSIWYG.

In order for the WYSIWYG to load this stylesheet you must first set Recite CMS to use this template. You can do so by opening Site Settings and loading the Files bundle.

Under the WYSIWYG Settings section, select the stylesheet you created and click Save Settings.

Now when you use the WYSIWYG, this stylesheet will automatically be loaded, as you can see in the following screenshot.

Custom Styles in Styles Dropdown

One of the great features of the WYSIWYG editor is the Styles dropdown. This allows you easily format content in the editor using a pre-defined style.

This dropdown box is empty by default, but Recite CMS allows you to easily populate this. Once again it uses the a WYSIWYG stylesheet. In fact, it is the same stylesheet you create in the previous section (for defining the look and feel of the WYSIWYG).

To define a new dropdown style, you must define it in the stylesheet then put a special comment above it. This comment is in the format /* @wysiwyg [Name to appear in WYSIWYG] */

For example, to create a style that has a yellow background and black bold text, add the following to your stylesheet:

/* @wysiwyg Fancy Block */ div.fancy { background : yellow; color : black; font-weight : bold; }

Now when you load the WYSIWYG editor, this new style will appear in the dropdown.

Summary

As we have seen in this article, the Recite CMS WYSIWYG editor is very powerful and easy to customize. If you have any questions about the topics covered in the article, please Contact Us.