Rich Text Element


The Rich Text icon in the Dreamweaver object palette

This element is useful for long text passages like product descriptions or news articles - or even whole pages. The text content of this element can be formatted by the user by either entering raw HTML code or by using one of the supported WYSIWYG HTML in-browser editors "TinyMCE", "FCKeditor" or "CKEditor".

This element is represented by the following PHP code:

<?php webyep_richText("Fieldname", false, "../styles.css", true); ?> more...

Arguments for the webyep_richText() PHP function call:
(see "Attributes of the Rich Text Element" below for details)
  1. "Fieldname": A string – the field name for this element.
  2. true/false: A boolean – the scope for this element.
    true if the element should have the same content on all pages (global).
    false if it should have different content on each page it appears on.
  3. "../styles.css": A string – the URL to a CSS file to be used in the WYSIWYG editor - this URL can be relative to the current document.
  4. true/false: A boolean – whether email links should be encoded.
    true if email links inserted into the text should be encoded using JavaScript.
    false if they should be simply output as HTML.


The Rich Text Element in action - by clicking the "Edit" button the Rich Text Editor window opens


The Rich Text Editor window, using the TinyMCE in-browser HTML editor


To Top of Page

Choosing a WYSIWYG in-browser Editor

The WebYep Rich Text Element supports the third party in-browser HTML Editors TinyMCE and CKeditor. Those editors are not bundled with WebYep. To use one of them, simply download the editor package from its creator's web site and place it into WebYep's opt folder - WebYep will then automatically recognize its existence and use it for the Rich Text Element's editor window.

The TinyMCE editor can, at the time of writing, be downloaded from: http://tinymce.moxiecode.com/

The CKeditor can, at the time of writing, be downloaded from: http://ckeditor.com/

Download and extract the package (ZIP or TAR) an extract it. When extracting the TinyMCE package you should get a folder named tinymce. When extracting the CKeditor package you should get a folder named ckeditor.

Then place that folder into the opt subfolder of the webyep-system/program directory on the web server. The next time you open the Rich Text Editor window in the browser, WebYep will use that WYSIWYG HTML editor.

Note about browser compatibility:
Please note that not all browsers are supported by these editors. To find out which browsers are currently supported by which editor, please consult each WYSIWYG editor's website.

Important: The WYSIWYG editors give the user the opportunity to format the entered text. Some of them also offer to paste already formatted text in – text that was already formatted in some word processing application. It turned out that doing so is not a good idea. Most word processing applications tend to create (to put it nice) disadvantageous HTML code. Even pasting non formatted text from such applications will transfer (bad) HTML code. So the user should either enter the text directly into the WYSIWYG editor or create it in some pure ASCII editor (like Notepad on Windows or TextEdit, in Plain Text Mode, on the Mac).

Setting up the WYSIWYG editor

Each WYSIWG editor has its own unique features and way to set them up. Please refer to the WYSIWYG editors web site to learn about this setup. To apply these settings, you can create an optional setup file within the webyep-system/program/opt folder. The file needs to be named tinymce_init.php for TinyMCE and ckeditor_init.php for CKEditor (click the file's name for an example for that file's content).

For CKEditor there is the additional possibility to configure its Styles popup menu. The style definitions must be placed in a file named ckeditor_styles.js inside the webyep-system/program/opt folder (click the file's name for an example for that file's content). For details about the syntax of these style definitions please see CKEditor's website (URL above).

Adding optional file managers

There are optional file managers for each supported WYSIWYG editor, enabling users to upload and manage images from the WYSIWYG editor's interface.

Currently the following file managers are supported by WebYep:
For CKEditor use the commercial add-on CKFinder.
For TinyMCE use the commercial add-on MCImageManager.

Important: Please note, that those are third party products. Objective Development is in no way associated with their respective vendors and therefore can't be held responsible for any issues you might have with this software. Every file manager has its own strengths and weaknesses and we can't determine which one will suit your needs.

If you want to use one of the above mentioned file managers with WebYep, you can find detailed installation instructions here:

Placing the Rich Text Element

Please always remember that the Rich Text Elements produces HTML code! When the user creates a bullet list for example the Rich Text Elements creates <ul> and<li> HTML tags. Thus it is important to place the Rich Text Element at a position in your page where such HTML tags are allowed!

The safest place is inside a <div> tag. Not ideal would be a paragraph (<p> tag), as HTML does not allow certain HTML code inside a paragraph.

To determine the HTML tag in which you have placed the Rich Text Element simply click the PHP icon representing the Rich Text Element and take a look at Dreamweaver's Tag Selector (at the bottom of the document window): The right most listed tag is the tag that encloses your Rich Text Element.

If you find your Rich Text Element placed inside a <p> tag you can change it into a <div> tag by clicking the <p> tag in the Tag Selector with the right mouse button and choose "Edit Tag...".


To Top of Page

Attributes of the Rich Text Element


The Dreamweaver inspector showing the Rich Text Element's attributes

Fieldname

A distinctive name for that element. This name will be displayed in the page in edit mode to give the user a hint on what this elements content stands for and to distinguish the different WebYep Elements in a page.

Content

When set to "for this doc only" the elements content is unique for this page - even if another element on a different page has the same name. If set to "for all documents" the content will be the same on all pages for elements of this kind that use the same name.

CSS

With this attribute you can define a CSS file to be used for the HTML WYSIWYG in-browser editor.

If you want the text displayed in the editor window to look like the final text in the page, you need to let the editor know the CSS you're using in your page. So you could create a reduced version of the CSS file you have attached to your pages (by removing all not text related attributes) and use it for this Rich Text Element attribute.

You can enter the relative path to the CSS file into the text field or click the folder icon to its right, to select the file.

Encode EMail Links

If a user inserts an email link ("mailto" link) into a Rich Text Element, WebYep can encode (or obfuscate) this email address. If you enable the "Encode EMail Links" option, WebYep will encode the links to keep SPAM spiders from collecting the email addresses.

Do do so, WebYep uses a JavaScript based encoding. If the visitors of your website have deactivated JavaScript, they will only see these email addresses in the form:

name(_AT_)domain.com

and the email addresses will then not be clickable.

For this to work, the link inserted must be a "mailto:" link and it must have the email address as the link text.


To Top of Page

© 2011, Objective Development