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", "RTE" or "FCKeditor".

This element is represented by the following PHP code:

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

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

---

Choosing a WYSIWYG in-browser Editor

The WebYep Rich Text Element supports three in-browser HTML Editors: "TinyMCE", "RTE" and "FCKeditor". Those editors are not bundled with WebYep. To use one of them, simply download the editor package from the editor's home 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 RTE editor can, at the time of writing, be downloaded from: http://www.kevinroth.com/rte/

The FCKeditor can, at the time of writing, be downloaded from: http://www.fckeditor.net/

Download and extract the package archive (ZIP or TAR) an extract it. When extracting the TinyMCE package you should get a folder named "tinymce", when extracting the RTE package you should get a folder named "rte" and when extracting the FCKeditor package you should get a folder named "fckeditor".

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.

Upgrading your Long Text Element content

If you are replacing a Long Text Element with a Rich Text Element you can let the Rich Text Element take over the previous content. To do so, pay attention to the following:

• Give the new Rich Text Element the same field name as the Long Text Element had.
• Keep the "Content" setting ("for this doc only" / "for all documents") the same.
• If you used custom CSS styles in the Long Text Element's content, make sure a stile sheet file containing definitions for these CSS styles is passed to the Rich Text Element (CSS Attribute – see below).

If you keep this in mind, the Rich Text Element will automatically taker over the old Long Text data. It will use the old data up to the first time the Rich Text Elements data is first saved (the uses clicked "Save" in the Rich Text Element's editor window). From that point on, it uses its own data file.

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 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 Long 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...".

---

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.

---