Create CMS Website

WYSIWYG Editor

The Beginner's Tutorial
How To Create Own Website with CMS Made Simple

WYSIWYG Editor (TinyMCE)

WYSIWYG Editor is the central and most important feature for every CMS. Editor helps you to add, edit and format you content without having any HTML knowledge. It displays the edited content the same way it will be displayed on the website. If you create a website with CMS then you are going consequently add content to your website. It means that apart from other modules WYSIWYG Editor will be the one you use most frequently. Therefore it is very important to know how the editor can help you and what you can do to make it more convenient and suited to your needs.

There are some WYSIWYG editors. In CMS Made Simple you will find the editor called TinyMCE that is fully integrated. If you are choosing CMS now and have not yet installed CMS Made Simple, you can see the demo of the editor on the official website. If you already started to create website with CMS Made Simple you will find TinyMCE fully integrated in the admin panel.

In the admin panel go to Content → Pages and select any page for edit. The field content uses WYSIWYG editor (you can see a tool bar above the content field).

TinyMCE Toolbar

The tool bar of the editor is self-explanatory and is similar to popular word processing programs. There are much more settings that can simplify your life if you discover them.

Settings

In the admin panel go to Extensions → TinyMCE WYSIWYG. You can change width and height of editor field here. By default the size of the editor field is set automatically, change it according to your screen preferences to gain more space to write and read:

TinyMCE Change Editor Size

Change it and press “Save settings”. There is a test field below the setting where you can immediately see the changes. This field is a kind of preview so that you do not need to edit pages to control the appearance of the editor.

Profiles

In the Profiles tab you can add more features to your profile. As administrator of the website your changes have to be made in the section “Advanced backend profile”. Check the field “Allow table operations” to be able to create and edit tables with the editor. After saving profile you will find the 3rd line in the tool bar of the editor with help for visual building of HTML tables.

Check the field “Show file management options“ if you would like to upload the images direct from the editor. Press “Save profile” and click on “Insert / Edit image” icon in the tool bar. There is a small window that pop-ups where you can change an image URL. Click on it and the content of your image folder is displayed. Normally no uploads are allowed from this window. But by activating file management option you will find “File operations” line where you can upload your images.

TinyMCE File Operation

Plugins

In the tab Plugins you continue to customize your editor. There are some useful plugins that are not active by default but can be activated if needed. I recommend activating plugins:

  • Print – allows you to print the text from the editor
  • Full Screen - adds full screen editing mode
  • Search and Replace - adds search / replace dialogs for the text

TinyMCE Plugins

Press “Save plugins”.

Obviously only the icon for full screen is added to the second tool bar after help icon. The other two are not there. Why? Let’s make a step back and see on the tab Profiles again. In the "Advanced backend profile settings" you can see the three tool bar lines. These lines control the order of the icons shown in the editor in the first, second and third (yet empty) line. The single buttons are represented with their names in the tool bar fields:

TinyMCE Tool bar lines

You can delete some of them, change the order or add new (!). That is what we are going to do. If you have activated three plugins above you can add to the 3rd line in the tool bar the names for the missing icons:

TinyMCE

Save profile now and see the 3rd tool bar line added to the editor with new buttons. This way you can fully customize the editor according to your needs.


del.icio.us digg stumbleupon buzzup BlinkList mixx myspace linkedin facebook reddit.com ma.gnolia.com newsvine.com furl.net google yahoo technorati.com

CMS Made Simple Beginner's Guide
Loading...