Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Won't Fix
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: core
    • Labels:
      None
    • Environment:
      Create a descendent of TextArea which uses a rich editor

      Description

      Many javascript editors exists to acomplish that. tiny mce http://tinymce.moxiecode.com/ for example could be fine.

        Activity

        Hide
        Malcolm Edgar added a comment -

        Will look to providing a TinyMCE RichTextArea example in click-examples application.

        Show
        Malcolm Edgar added a comment - Will look to providing a TinyMCE RichTextArea example in click-examples application.
        Hide
        Malcolm Edgar added a comment -

        Hi Antoni,

        I did start working on an implementation of this control, see the code below.

        However I have decided not to provide an implementation in Click because of number of issues:

        • size of the tinymce distribution
        • browser compatability issues

        Please see the post by Ahmed: http://article.gmane.org/gmane.comp.web.click.devel/266

        The code below should work with the next release Click 0.16. Maybe we could write it up on the Wiki so people can readily implement it.

        regards Malcolm Edgar

        --------------------------------------------------------------

        public class RichTextArea extends TextArea {

        private static final long serialVersionUID = 4955743445097747828L;

        protected static final String HTML_IMPORTS =
        "<script type=\"text/javascript\" src=\"$/tiny_mce/tiny_mce.js\"></script>\n";

        /**

        • The textarea TinyMCE theme [<tt>simle</tt> | <tt>advanced</tt>],
        • default value:   <tt>"simle"</tt>
          */
          protected String theme = "simple";

        /**

        /**

        • Return the textarea TinyMCE theme.
          *
        • @return the textarea TinyMCE theme
          */
          public String getTheme() { return theme; }

        /**

        • Return the DateField calendar.js and calendar-en.js includes.
        • @see Field#getHtmlImports()
          */
          public String getHtmlImports()
          Unknown macro: { String[] args = { getContext().getRequest().getContextPath() }; return MessageFormat.format(HTML_IMPORTS, args); }

        /**

        • @see TextArea#toString()
          */
          public String toString() {
          HtmlStringBuffer buffer = new HtmlStringBuffer();
          buffer.append(super.toString());

        buffer.elementStart("script");
        buffer.appendAttribute("type", "text/javascript");
        buffer.elementEnd();
        buffer.append("\ntinyMCE.init(

        {\n"); buffer.append(" theme : \""); buffer.append(getTheme()); buffer.append("\",\n"); buffer.append(" mode: \"exact\",\n"); buffer.append(" elements : \""); buffer.append(getId()); buffer.append("\"\n"); buffer.append("}

        );\n");
        buffer.elementEnd("script");

        return buffer.toString();
        }

        }

        Show
        Malcolm Edgar added a comment - Hi Antoni, I did start working on an implementation of this control, see the code below. However I have decided not to provide an implementation in Click because of number of issues: size of the tinymce distribution browser compatability issues Please see the post by Ahmed: http://article.gmane.org/gmane.comp.web.click.devel/266 The code below should work with the next release Click 0.16. Maybe we could write it up on the Wiki so people can readily implement it. regards Malcolm Edgar -------------------------------------------------------------- public class RichTextArea extends TextArea { private static final long serialVersionUID = 4955743445097747828L; protected static final String HTML_IMPORTS = "<script type=\"text/javascript\" src=\"$/tiny_mce/tiny_mce.js\"></script>\n"; /** The textarea TinyMCE theme [<tt>simle</tt> | <tt>advanced</tt>] , default value:   <tt>"simle"</tt> */ protected String theme = "simple"; /** /** Return the textarea TinyMCE theme. * @return the textarea TinyMCE theme */ public String getTheme() { return theme; } /** Return the DateField calendar.js and calendar-en.js includes. @see Field#getHtmlImports() */ public String getHtmlImports() Unknown macro: { String[] args = { getContext().getRequest().getContextPath() }; return MessageFormat.format(HTML_IMPORTS, args); } /** @see TextArea#toString() */ public String toString() { HtmlStringBuffer buffer = new HtmlStringBuffer(); buffer.append(super.toString()); buffer.elementStart("script"); buffer.appendAttribute("type", "text/javascript"); buffer.elementEnd(); buffer.append("\ntinyMCE.init( {\n"); buffer.append(" theme : \""); buffer.append(getTheme()); buffer.append("\",\n"); buffer.append(" mode: \"exact\",\n"); buffer.append(" elements : \""); buffer.append(getId()); buffer.append("\"\n"); buffer.append("} );\n"); buffer.elementEnd("script"); return buffer.toString(); } }

          People

          • Assignee:
            Malcolm Edgar
            Reporter:
            antoni aloy
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved:

              Development