Rich Text element

This element is useful for long text passages, like product descriptions or news articles. Potentially you could even make a whole page editable using a rich text editor. The text content of this element can be formatted by the user, either by entering raw HTML code or by using one of the built-in WYSIWYG (what you see is what you get) editors, like CKEditor or Trumbowyg. If you have purchased the commmercial version of WebYep, then you have the option of the Redactor rich text editor. All these rich text editors provide a buttoned interface that mimicks a word processing or text editing app.

The Rich Text element code

<?php webyep_richText("Fieldname", false, "", true, 900, 600); // WebYepV2 ?>

Arguments for the function call

  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. "": A string - obsolete, pass an empty string ("").
  4. true/false: A boolean - whether email links should be encoded.
    true entered email addresses should be encoded using Javascript (default).
    false if email addresses should be simply outputed as HTML.
  5. 900, 600: Maximum width and height of the editor window.

Screenshots

The Rich Text editor window, with the Redactor formatting controls activated.
The Rich Text editor window, with the Redactor formatting controls activated.
The Rich Text editor window, with the Trumbowyg formatting controls activated.
The Rich Text editor window, with the Trumbowyg formatting controls activated.
The Rich Text editor window, with the CKeditor formatting controls activated.
The Rich Text editor window, with the CKeditor formatting controls activated.

Choosing a WYSIWYG editor

The Rich Text element supports third party in-browser HTML Editors: Redactor, Trumbowyg, TinyMCE and CKeditor. Redactor is only included with the commercial (paid) version of WebYep.

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. Please refer to the WYSIWYG editors web site to learn about individual aspects of each editor. Both the TinyMCE and CKeditor load from there own respective CDN. These editors are hosted on servers spread across the globe which in turn allow scripts to load faster because they are served from the nearest locations to the end user.

To activate either Trumbowyg, CKeditor or TinyMCE editors

To activate either TinyMCE or Ckeditor editors all you need to so is simply remove the "-" character at the begining of the chosen editor's folder name which can be found witin the opt folder "webyep-system/program/opt". For example the folder named "-TinyMCE" would be renamed "TinyMCE" and "-CKeditor" would be renamed "CKeditor". WebYep will then automatically recognize its existence and use it for the Rich Text element's editor window.

Note: You can only use one editor type and renaming multiple folders will not make two or more editor types available.

To activate Redactor Editor (WebYep commercial version only)

If you have purchased the commercial version of WebYep then you will have the choice of a third WYSIWYG html editor to use. Redactor is the default in WebYep (commercial). It is a fully licensed, easy to use, fully integrated, clean and a powerful professional text editing framework.

Redactor has an incorporated image and file upload and manager. Please refer to the configuration settings for Redectors image and file manger configuration.

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 bullet lists inside a paragraph.

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

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.

Encode email links

If a user enters an email address into a Long Text Element, WebYep will display it as a clickable link ('mailto' link).

If you enable the "Encode EMail Links" option, WebYep will encode these links to keep SPAM spiders from collecting the email addresses.

To 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.

Modal window size

As the developer you can preset the dimensions of the modal window size.