plainblack.com
Username Password
search
Bookmark and Share

Rich Editor

WebGUI's rich editor is highly configurable so that you can make it work exactly as you need it to for your site.

 

 

The rich editor can do almost everything you can do in a word processing program, including text formatting, image insertion, tables, lists, and more. In addition, it's integrated into WebGUI so that you can use WebGUI's resources from within the rich editor, like linking to other files and pages, and inserting WebGUI images.

Configuration

To configure the rich editor go to Admin Console > Assets.

 

 

And then select Search.

 

Now search for the “WebGUI::Asset::RichEdit” class without any keywords.

 

 

That search will give you a list of all the rich editors that are defined in WebGUI. Click “Edit” on one of the rich editors to edit its properties. Among other things the edit screen will display a list of buttons you can add to the toolbar in the rich editor.

 

 

You have three columns of checkboxes, which will allow you to choose which toolbar buttons are displayed, and on which row of the toolbar.

 

 

Some power users will prefer to either not use the rich editor, or to decide at the time of editing whether to edit the HTML directly, or to enable the rich editor. These options will give power users those abilities.

 

 

The rich editor also gives properties for formatting. When “Preserve whitespace as preformatted text?” is used spaces typed pasted or typed into the editor will be preserved as formatted content. When using the “<br /> instead of <p>” option is enabled the editor will use <br /> in the resulting HTML instead of <p> tags, and you'll have to type the carriage return twice to make room for the next paragraph. The “Remove line breaks from HTML?” option is similar to the whitespace option above, except that instead of stripping out extra spaces, it strips out extra carriage returns from the HTML.

 

 

The “Text Direction” option allows you to specify which way the text flows in the rich editor, which is useful for many non-western languages.

 

 

The “CSS File” option allows you to associate a cascading style sheet file with the rich editor. When you do this in combination with the “Apply Style” toolbar option your users can apply formatting to their content using styles you create for them with CSS.

 

 

You need to use a full URL like one of the following:

 

/styles/site.css

http://www.example.com/site.css

^FileUrl(some/file/asset);

 

Note that the URL can be the fully qualified url to a snippet acting like a CSS file. However, it cannot be a relative url like this:

 

site.css

style/site.css

 

The “Enable Context Menu” option creates a context menu in the rich editor when the user right clicks.

 

 

The context menu looks like this:

 

 

Since it is a context menu, however, it will have different options depending upon what the user right clicks on. This won't work on all browsers, because some browsers don't allow javascript triggered right clicks.

Under the Display tab we can set how big this editor will appear by default on whatever page it is rendered on. Setting it to 0 will cause it to try to stretch to fit the area it's given.

 

 

We can also set the width and height of the HTML source editor. That editor is enabled as a toolbar button.

 

 

The HTML Source Editor looks like this.

 

 

The editor can also be told whether or not to wrap text as it is typed, or to create scroll bars instead, as well as whether the toolbar should be at the top or bottom of the editor.

 

 

On the Security tab there is one final option.

 

 

This option is used to enforce what kind of HTML is allowed to be created by the users. The default is:

 

*[*]

 

This means that the users can create any tags they want, and those tags can have any attributes that they want to put in them. If we wanted to allow users to create any tags they want, but only allow title and class attributes, then we could configure Valid Elements as follows:

*[title|class]

If we want to use a typical HTML ruleset we could do something like:

 

+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|style],-ul[class|style],-li[class|style],br,img[id|dir|lang|longdesc|usemap|style|class|src|removed|removed|border|alt=|title|hspace|vspace|width|height|align],-sub[style|class],-sup[style|class],-blockquote[dir|style],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],-td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[style|class|align],-pre[class|align|style],address[class|align|style],-h1[id|style|dir|class|align],-h2[id|style|dir|class|align],-h3[id|style|dir|class|align],-h4[id|style|dir|class|align],-h5[id|style|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],-font[face|size|style|id|class|dir|color],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang]

 

And if we want to do XHTML Strict we could do:

 

a[accesskey|charset|class|coords|dir<ltr?rtl|href|hreflang|id|lang|name|onblur|removed|removed|onfocus|removed|removed|removed|removed|removed|removed|removed|removed|rel|rev|shape<circle?default?poly?rect|style|tabindex|title|target|type],abbr[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],acronym[class|dir<ltr?rtl|id|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],address[class|align|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],applet[align<bottom?left?middle?right?top|alt|archive|class|code|codebase|height|hspace|id|name|object|style|title|vspace|width],area[accesskey|alt|class|coords|dir<ltr?rtl|href|id|lang|nohref<nohref|onblur|removed|removed|onfocus|removed|removed|removed|removed|removed|removed|removed|removed|shape<circle?default?poly?rect|style|tabindex|title|target],base[href|target],basefont[color|face|id|size],bdo[class|dir<ltr?rtl|id|lang|style|title],big[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],blockquote[dir|style|cite|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],body[alink|background|bgcolor|class|dir<ltr?rtl|id|lang|link|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|onunload|style|title|text|vlink],br[class|clear<all?left?none?right|id|style|title],button[accesskey|class|dir<ltr?rtl|disabled<disabled|id|lang|name|onblur|removed|removed|onfocus|removed|removed|removed|removed|removed|removed|removed|removed|style|tabindex|title|type|value],caption[align<bottom?left?right?top|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],center[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],cite[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],code[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],col[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|span|style|title|valign<baseline?bottom?middle?top|width],colgroup[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|span|style|title|valign<baseline?bottom?middle?top|width],dd[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],del[cite|class|datetime|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],dfn[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],dir[class|compact<compact|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],div[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],dl[class|compact<compact|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],dt[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],em/i[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],fieldset[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],font[class|color|dir<ltr?rtl|face|id|lang|size|style|title],form[accept|accept-charset|action|class|dir<ltr?rtl|enctype|id|lang|method<get?post|name|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title|target],frame[class|frameborder|id|longdesc|marginheight|marginwidth|name|noresize<noresize|scrolling<auto?no?yes|src|style|title],frameset[class|cols|id|removed|onunload|rows|style|title],h1[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],h2[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],h3[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],h4[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],h5[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],h6[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],head[dir<ltr?rtl|lang|profile],hr[align<center?left?right|class|dir<ltr?rtl|id|lang|noshade<noshade|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|size|style|title|width],html[dir<ltr?rtl|lang|version],iframe[align<bottom?left?middle?right?top|class|frameborder|height|id|longdesc|marginheight|marginwidth|name|scrolling<auto?no?yes|src|style|title|width],img[align<bottom?left?middle?right?top|alt|border|class|dir<ltr?rtl|height|hspace|id|ismap<ismap|lang|longdesc|name|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|src|style|title|usemap|vspace|width],input[accept|accesskey|align<bottom?left?middle?right?top|alt|checked<checked|class|dir<ltr?rtl|disabled<disabled|id|ismap<ismap|lang|maxlength|name|onblur|removed|removed|onfocus|removed|removed|removed|removed|removed|removed|removed|removed|onselect|readonly<readonly|size|src|style|tabindex|title|type<button?checkbox?file?hidden?image?password?radio?reset?submit?text|usemap|value],ins[cite|class|datetime|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],isindex[class|dir<ltr?rtl|id|lang|prompt|style|title],kbd[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],label[accesskey|class|dir<ltr?rtl|for|id|lang|onblur|removed|removed|onfocus|removed|removed|removed|removed|removed|removed|removed|removed|style|title],legend[align<bottom?left?right?top|accesskey|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],li[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title|type|value],link[charset|class|dir<ltr?rtl|href|hreflang|id|lang|media|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|rel|rev|style|title|target|type],map[class|dir<ltr?rtl|id|lang|name|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],menu[class|compact<compact|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],meta[content|dir<ltr?rtl|http-equiv|lang|name|scheme],noframes[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],noscript[class|dir<ltr?rtl|id|lang|style|title],object[align<bottom?left?middle?right?top|archive|border|class|classid|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|standby|style|tabindex|title|type|usemap|vspace|width],ol[class|compact<compact|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|start|style|title|type],optgroup[class|dir<ltr?rtl|disabled<disabled|id|label|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],option[class|dir<ltr?rtl|disabled<disabled|id|label|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|selected<selected|style|title|value],p[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],param[id|name|type|value|valuetype<DATA?OBJECT?REF],pre/listing/plaintext/xmp[align|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title|width],q[cite|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],s[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],samp[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],script[charset|defer|language|src|type],select[class|dir<ltr?rtl|disabled<disabled|id|lang|multiple<multiple|name|onblur|onchange|removed|removed|onfocus|removed|removed|removed|removed|removed|removed|removed|removed|size|style|tabindex|title],small[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],span[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],strike[class|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],strong/b[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],style[dir<ltr?rtl|lang|media|title|type],sub[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],sup[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],table[align<center?left?right|bgcolor|border|cellpadding|cellspacing|class|dir<ltr?rtl|frame|height|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|rules|style|summary|title|width],tbody[align<center?char?justify?left?right|char|class|charoff|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title|valign<baseline?bottom?middle?top],td[abbr|align<center?char?justify?left?right|axis|bgcolor|char|charoff|class|colspan|dir<ltr?rtl|headers|height|id|lang|nowrap<nowrap|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|rowspan|scope<col?colgroup?row?rowgroup|style|title|valign<baseline?bottom?middle?top|width],textarea[accesskey|class|cols|dir<ltr?rtl|disabled<disabled|id|lang|name|onblur|removed|removed|onfocus|removed|removed|removed|removed|removed|removed|removed|removed|onselect|readonly<readonly|rows|style|tabindex|title],tfoot[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title|valign<baseline?bottom?middle?top],th[abbr|align<center?char?justify?left?right|axis|bgcolor|char|charoff|class|colspan|dir<ltr?rtl|headers|height|id|lang|nowrap<nowrap|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|rowspan|scope<col?colgroup?row?rowgroup|style|title|valign<baseline?bottom?middle?top|width],thead[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title|valign<baseline?bottom?middle?top],title[dir<ltr?rtl|lang],tr[abbr|align<center?char?justify?left?right|bgcolor|char|charoff|class|rowspan|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title|valign<baseline?bottom?middle?top],tt[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],u[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title],ul[class|compact<compact|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title|type],var[class|dir<ltr?rtl|id|lang|removed|removed|removed|removed|removed|removed|removed|removed|removed|removed|style|title]

 

Of course that's a terribly ridiculous, but useful example. The intent was to show you exactly how strict you can make the HTML produced by the rich editor.

You can create whatever rules you want. You need to add all your rules on a single line (no carriage returns). The basic format is

 

tagname[attribute1|attribute2],tag2[attrib1,attrib2]

 

Here are all the control characters for this mini language:

 

,

 

Separates element chunk definitions.

 

/

 

Separates element synonymous. The first element is the one that will be output.

 

|

 

Separates attribute definitions.

 

[

 

Starts a new attribute list for an element definition.

 

]

 

Ends an attribute list for an element definition.

 

=

 

Makes the attribute default to the specified value. For example, "target=_blank"

 

:

 

Forces the attribute to the specified value. For example, "border:0"

 

<

 

Verifies the value of an attribute. For example, "target<_blank?_self"

 

?

 

Separates attribute verification values. See above.

 

+

 

Makes the element open if no child nodes exists. For example, "+a".

 

-

 

Enables removal of empty elements such as <strong />. For example, "-strong".

 

#

 

Enables padding of empty elements. This will pad with &nbsp; if they are empty. For example, "#p".

 

!

 

Makes attributes required. If none of the required attributes are set, the element will be removed. For example, "!href".

 

{$uid}

 

Results in a unique ID. For example, "p[id:{$uid}]".

In addition, wildcards such as *,+,? may be used in element or attribute name matching.

Keywords: html text formatting valid elements xhtml

Search | Most Popular | Recent Changes | Wiki Home
© 2018 Plain Black Corporation | All Rights Reserved