Back

WYSIWYG Field for Frontend REST Forms

Description

The following snippet allows you to add a WYSIWYG field to a Frontend Form that works with Content REST API. 

  • The $!{wysiwygField} Variable needs a valid WYSIWYG field's Velocity Var Name, so once the form is submitted, the values are properly saved in the new/edited content. 
  • This snippet does not contain code that would handle the form submission, and it does not contain the Form HTML Markup. It's meant to insert only the WYSIWYG field on the form. 
  • You can add as many WYSIWYG fields to the form as you want, depending on the amount of fields of this kind you have in your Content Type. Keep in mind that each one of them needs their own Velocity Var Name, which is used as the field's id and name attributes on the HTML Markup. 
  • You can customize the available buttons and features in the embedded TinyMCE editor.
  • If you want to access the value of the WYSIWYG field before submitting the form, you can do this: 

var fieldValue =  tinymce.get('yourFieldVelVarName').getContent();

Image

WYSIWYG Field for Frontend REST Forms

Code

#set($wysiwygField = 'yourFieldVelVarName')

<script type="text/javascript" src="/html/js/content/content_form_macro.js"></script>

<script src="/html/js/tinymce/js/tinymce/tinymce.js" type="text/javascript"></script>
<script type="text/javascript">
    tinyMCE.baseURL = "/html/js/tinymce/js/tinymce/";
    tinyMCE.init({
            mode : "none",
            theme : "advanced",
             theme_advanced_blockformats : "p,h1,h2,h3,code",
            theme_advanced_toolbar_align : "left",
            theme_advanced_buttons1 : "bold,italic,underline,undo,redo,bullist,numlist,link,separator,formatselect",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : ""
        });

    function enableWYSIWYG(textAreaId){
        try {
            tinyMCE.execCommand('mceAddControl', false, textAreaId);
        }catch(e){
            alert(e.message);
        }
        enabledWYSIWYG[textAreaId] = true;
    }
</script>

<textarea dojoType="dijit.form.Textarea" name="$!{wysiwygField}" id="$!{wysiwygField}" class="textAreaField">
</textarea><span id="alert$!{wysiwygField}" class="errorMessages"></span>
<script type="text/javascript">
    enableWYSIWYG("$!{wysiwygField}");
</script>

Topics

Have you created code you'd like to share with the dotCMS community?

Share your code Become a Contributor