template::widget::richtext (public)

 template::widget::richtext element_reference tag_attributes

Defined in packages/acs-templating/tcl/richtext-procs.tcl

Implements the richtext widget, which offers rich text editing options. This version integrates support for the xinha and tinymce editors out of the box, but other richtext editors can be used including and configuring them in your custom template. If the acs-templating.UseHtmlAreaForRichtextP parameter is set to true (1), this will use the WYSIWYG editor widget set in the acs-templating.RichTextEditor parameter. Otherwise, it will use a normal textarea, with a drop-down to select a format. The available formats are:

  • Enhanced text = Allows HTML, but automatically inserts line and paragraph breaks.
  • Plain text = Automatically inserts line and paragraph breaks, and quotes all HTML-specific characters, such as less-than, greater-than, etc.
  • Fixed-width text = Same as plain text, but conserves spacing; useful for tabular data.
  • HTML = normal HTML.

You can also parameterize the richtext widget with a 'htmlarea_p' attribute, which can be true or false, and which will override the parameter setting.

The richtext widget can be extended with several plugins, which are OpenACS packages named richtex-EDITOR. Plugins are available e.g. for xinha, tinymce and ckeditor4. When the plugins are installed, one can use e.g. xinha by specifying 'editor xinha' in the options of the widget spec. The following options for xinha may be specified:

  • editor: xinha
  • height: height of the xinha widget (e.g. 350px)
  • width: width of the xinha widget (e.g. 500px)
  • plugins: Tcl list of plugins to be used in xinha. There is a special plugin for the oacs file selector available, called OacsFs. If no options are specified, the following plugins will be loaded: GetHtml CharacterMap ContextMenu FullScreen ListType TableOperations EditTag LangMarks Abbreviation

These options are used by the OacsFs plugin

  • folder_id: the folder from which files should be taken for the file selector. Can be used alternative with fs_package_id, whatever more handy in the application.
  • fs_package_id: the package id of the file_storage package from which files should be taken for the file selector. Can be used alternative with folder_id, whatever more handy in the application. If nothing is specified, the globally mounted file-store is used.
  • file_types: SQL match pattern for selecting certain types of files (e.g. pdf files). The match pattern is applied on the MIME type of the field. E.g. a value of %text/% allows any kind of text files to be selected, while %pdf% could be used for pdf-files. If nothing is specified, all file-types are presented.
  • javascript: provide JavaScript code to configure the xinha widget and its plugins. The configure object is called xinha_config.

Example to use xinha with only a few controls: 

    {options {editor xinha plugins {OacsFs} height 350px javascript {
        xinha_config.toolbar = [
                                ['popupeditor', 'bold','italic','createlink','insertimage','separator'],
                                ['killword','removeformat'] ];
    }}}

Example for the use of the xinha widget with options: 

    text:richtext(richtext),nospell,optional
    {label Content}
    {options {editor xinha plugins OacsFs height 350px file_types %pdf%}}
    {html {rows 15 cols 50 style {width: 100%}}}

Caveat: the three adp-files needed for the OpenACS file selector (insert-image, insert-ilink and file-selector) are currently part of the xowiki package, since acs-templating is per default not mounted. This is hopefully only a temporal situation and we find a better place.

Example for the use of the tinymce widget with options: 

    text:richtext(richtext),nospell,optional
    {label #acs-subsite.Biography#}
    {options {theme simple plugins "oacsimage,oacslink,style"}}
    {html {rows 15 cols 50 style {width: 100%}}}

See TinyMCE documentation for a full list of available options

Caveat: the scripts needed for the oacsimage and oacslink plugins require acs-templating to be mounted. This is a temporary situation until we find a better way to handle plugins.

Example for the use of a custom editor widget: 

    text:richtext(richtext),nospell,optional
    {label #acs-subsite.Biography#}
    {options {editor custom ...custom configuration...}}
    {html {rows 15 cols 50 style {width: 100%}}}

If provided with a WYSIWYG editor different than 'xinha' or 'tinymce', system will just collect formfield ids and supplied options for the richtext field and will provide them as-is to the blank-master environment. When using a custom editor, functional meaning of the options is totally up to the user.

Note that the richtext editors interact with blank-master.tcl and blank-master.adp.

Derived from the htmlarea richtext widget for htmlarea by lars@pinds.com
modified for RTE http://www.kevinroth.com/ by davis@xarg.net
xinha and ckeditor4 support by gustaf.neumann@wu-wien.ac.at
tinymce support by oct@openacs.org

Parameters:
element_reference (required)
tag_attributes (required)

Partial Call Graph (max 5 caller/called nodes):
%3 _ _ (public) apm_package_id_from_key apm_package_id_from_key (public) parameter::get parameter::get (public) security::csp::nonce security::csp::nonce (public) template::util::richtext::format_options template::util::richtext::format_options (public) template::widget::richtext template::widget::richtext template::widget::richtext->_ template::widget::richtext->apm_package_id_from_key template::widget::richtext->parameter::get template::widget::richtext->security::csp::nonce template::widget::richtext->template::util::richtext::format_options

Testcases:
No testcase defined.
Source code:

    upvar $element_reference element
    set output ""

    #ns_log notice "widget::richtext: richtext-options? [info exists element(options)] HTML? [info exists element(html)]"

    array set attributes  [::template::widget::merge_tag_attributes element $tag_attributes]

    if { [info exists element(value)] } {
        set contents [template::util::richtext::get_property contents $element(value)]
        set format   [template::util::richtext::get_property format $element(value)]
        if {$format ni [template::util::richtext::formats]} {
            ns_log warning "Ignoring provided format '$format' for richtext widget with id $element(id)"
            set format {}
        }
    } else {
        set contents {}
        set format {}
    }

    array set options [expr {[info exists element(options)] ? $element(options) : ""}]

    if { $element(mode) eq "edit" } {
        set attributes(id) $element(id)
        set package_id_templating [apm_package_id_from_key "acs-templating"]

        set user_agent [string tolower [ns_set iget [ns_conn headers] User-Agent]]

        if {[string first "safari" $user_agent] != -1} {
            if {[regexp {version/([0-9]+)[.]} $user_agent _ user_agent_version]
                && $user_agent_version < 3} {
                set element(htmlarea_p) false
            }
        } elseif {[string first "opera" $user_agent] != -1} {
            if {[regexp {^[^/]+/([0-9]+)[.]} $user_agent _ user_agent_version]
                && $user_agent_version < 9} {
                set element(htmlarea_p) false
            }
        }

        if { [info exists element(htmlarea_p)] && $element(htmlarea_p) ne "" } {
            set htmlarea_p [string is true -strict $element(htmlarea_p)]
        } else {
            set htmlarea_p [parameter::get  -package_id $package_id_templating  -parameter "UseHtmlAreaForRichtextP"  -default 0]
        }
        set edit_item_tag [::template::util::richtext::get_tag -options [array get options]]
        set format_menu [menu $element(id).format [template::util::richtext::format_options] $format {}]
        set output [textarea_internal $element(id) attributes $contents "edit" $edit_item_tag]

        # Spell-checker
        array set spellcheck [template::util::spellcheck::spellcheck_properties  -element_ref element]
        #ns_log notice "widget::richtext: $htmlarea_p, spellcheck [array get spellcheck] OPTIONS [array get options]"

        if { $htmlarea_p } {
            # figure out, which rich text editor to use
            set richtextEditor [expr {[info exists options(editor)] ?
                                      $options(editor) : ""}]
            #
            # Tell the blank-master to include the special stuff
            # for the richtext widget in the page header
            #
            set ::acs_blank_master($richtextEditor) 1

            #
            # Collect ids of richtext form fields
            #
            lappend ::acs_blank_master__htmlareas $attributes(id)

            #
            # Try to initialize the widget via richtext plugins
            #
            set result [::template::util::richtext::initialize_widget  -form_id $element(form_id)  -text_id $attributes(id)  -editor $richtextEditor  -options [array get options]]
            ns_log debug "widget::richtext: ::template::util::richtext::initialize_widget -> $result"

            if {[dict get $result success] == 1} {
                #
                # Everything is set-up via the editor plugin. In
                # general, we can pass back more information back from
                # the plugins via the dict "result" without extending
                # the interface, but that feature is not used yet.
                #
            } else {
                # Editor is custom. All options are passed as-is to
                # the blank master and their meaning will be defined
                # in a custom template.

                set ::acs_blank_master(${richtextEditor}.options) [array get options]
            }

            #
            # The following trick with document.write is for providing
            # reasonable behavior when JavaScript is turned completely
            # off.
            #
            append output  "</span>\n<script type='text/javascript' nonce='[security::csp::nonce]'>\n"  [subst {document.write("<input name='$element(id).format' value='text/html' type='hidden'>");}]  "</script>\n<noscript><div>"  [subst {<span class="form-widget"><label for="$element(id).format">[_ acs-templating.Format]: </label>}]  $format_menu "</span></div></noscript>\n"  "<span>"

            if { $spellcheck(render_p) } {
                append output [subst {</span>
                    <span class="form-widget"><label for="$element(id).spellcheck">[_  acs-templating.Spellcheck]: </label>
                    [menu "$element(id).spellcheck" [nsv_get spellchecker lang_options]  $spellcheck(selected_option) {}]
                }]
            }

        } else {
            # htmlarea_p is false

            append output [subst {</span>
                <span class="form-widget"><label for="$element(id).format">[_ acs-templating.Format]: </label>$format_menu
            }]

            if { $spellcheck(render_p) } {
                append output [subst {</span>
                    <span class="form-widget"><label for="$element(id).spellcheck">[_  acs-templating.Spellcheck]: </label>
                    [menu "$element(id).spellcheck" [nsv_get spellchecker lang_options]  $spellcheck(selected_option) {}]
                }]
            }

        }

    } else {
        # Display mode
        if { $element(mode) eq "display" && [info exists element(value)] } {
            append output [template::util::richtext::get_property html_value $element(value)]
            append output "<input type=\"hidden\" name=\"$element(id)\" value=\"[ns_quotehtml $contents]\">"
            append output "<input type=\"hidden\" name=\"$element(id).format\" value=\"[ns_quotehtml $format]\">"
        }
    }

    return $output
XQL Not present:
Generic, PostgreSQL, Oracle
[ hide source ] | [ make this the default ]
Show another procedure: