📝 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.

This technique has been lightly tested. Please test thoroughly!

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 with the below code.
   1. The first three scripts are needed resources. You may need to find new/updated resource URL's as Technolutions continues to update Slate.
   2. The last <script> tag actually attaches CKEditor to the text box. You must replace form_14002e40-7a52-4002-b282-256efa3cf1ea with the actual ID of the textarea element, which can be found with your browser's inspector tool.
   3. removePlugins removes images and template options under the assumption that people submitting the form do not have /manage access.

<script src="/fw/framework/ckfinder/ckfinder.js?v=25af&amp;cdn=0"></script>
<script src="//slate-technolutions-net.cdn.technolutions.net/manage/deliver/ckeditor.js?v=TS-25af-635119916154460870"></script>
<script src="//fw.cdn.technolutions.net/framework/ckeditor.js?v=25af"></script>
<script>
    // Attach the editor
    if (CKEDITOR.instances)
        if (CKEDITOR.instances['form_14002e40-7a52-4002-b282-256efa3cf1ea'])
            CKEDITOR.remove(CKEDITOR.instances['form_14002e40-7a52-4002-b282-256efa3cf1ea']);
    editor = CKEDITOR.replace('form_14002e40-7a52-4002-b282-256efa3cf1ea',
        {
            startupFocus: true,
            fullPage: false,
            height: 320,
            forceEnterMode: true,
            toolbar: CKEDITOR.getToolbar('full'),
            removePlugins: 'image,templates'
        });
</script>

Alternate version that allows image and template browsing:

<script>
// Attach the editor
    if (CKEDITOR.instances)
        if (CKEDITOR.instances['form_14002e40-7a52-4002-b282-256efa3cf1ea'])
            CKEDITOR.remove(CKEDITOR.instances['form_14002e40-7a52-4002-b282-256efa3cf1ea']);
    editor = CKEDITOR.replace('form_14002e40-7a52-4002-b282-256efa3cf1ea',
        {
            filebrowserImageBrowseUrl: '/manage/database/asset?cmd=browse&type=images',
            filebrowserBrowseUrl: '/manage/database/asset?cmd=browse&type=documents',
            templates_files: ['/manage/deliver/?cmd=templates'],
            startupFocus: true,
            fullPage: false,
            height: 320,
            forceEnterMode: true,
            toolbar: CKEDITOR.getToolbar('full'),
        });
</script>