📝 Rich Text Editor in a Form

Have you ever wanted to allow persons/end users to input HTML? You might do this to allow a person lacking a Slate user account to insert content, or for other reasons.

Special thanks to Lloyd Lentz for fixes to this script! He may have a more up-to-date version here. Thanks also to Jonathan Thornton.

Summary

Basically, we pick a Paragraph Text (textarea) form element, supply some background scripts, then transform the textarea into a CKEditor.

Your text field will store raw HTML. If you output it in a portal, use Liquid like {{ field_name | rawhtml }} to avoid the HTML being escaped.

Instructions

1. Create a Paragraph Text form element. We recommend width 80 and height 10.
2. Create an Instructions form element below the Paragraph Text and supply the below code in the source.
   
   1. The first three scripts are needed resources. You may need to find updated URL's as Technolutions continues to update Slate.
   2. Update var exportKey = "purpose"; with the actual export key of your textarea.

<script>
  var exportKey = "purpose";

  // Load CKFinder and CKEditor from the Slate framework (v4b62), then attach the editor
  $.when(
    $.getScript("/fw/framework/ckfinder/ckfinder.js?v=4b62&cdn=0"),
    $.getScript("/fw/framework/ckeditor.js?v=4b62")
  ).done(function () {
    var textareaId = $('div[data-export="' + exportKey + '"] textarea').attr('id');
    console.log("rich text textarea id:", textareaId);
    if (!textareaId) return;

    if (CKEDITOR.instances[textareaId]) {
      CKEDITOR.remove(CKEDITOR.instances[textareaId]);
    }
    CKEDITOR.replace(textareaId, {
      startupFocus: true,
      fullPage: false,
      height: 320,
      forceEnterMode: true,
      toolbar: CKEDITOR.getToolbar('full'),
      //removePlugins: 'image,templates'
      filebrowserImageBrowseUrl: '/manage/database/asset?cmd=browse&type=images',
      filebrowserBrowseUrl: '/manage/database/asset?cmd=browse&type=documents',
      templates_files: ['/manage/deliver/?cmd=templates'],
    });
  }).fail(function (jqxhr, textStatus) {
    console.error("CKEditor script failed to load:", jqxhr.status, textStatus);
  });
</script>

If people submitting the form don't have /manage access, you can disable template and image browsing by:

• uncommenting removePlugins
• commenting out filebrowserImageBrowseUrl, filebrowserBrowseUrl, and templates_files

Live Example

https://go.reworkflow.com/register/?id=05bd67e0-cfc3-4777-97bc-fef7c08a8549 (with image browsing disabled)