Skip to content

Documentation

Paul Nieuwelaar edited this page Aug 18, 2017 · 2 revisions

Installation & Usage

  1. Download and install the unmanaged or managed solution (recommended), or download the source files from other downloads, and create all the required web resources manually using your own publisher prefix and naming style (not recommended as all the file/folder structures need to be the same, and there's a lot of web resources).
  2. Make sure to publish all customizations if installing the unmanaged solution, or creating the web resources manually.
  3. Create a new field of type 'Multiple Lines of Text' to hold the raw HTML data.
  4. Add the new field to the form somewhere (this can be hidden).
  5. Add a new web resource component to your form in the location you want the editor to be displayed.
    1. Click the INSERT tab
    2. Select Web Resource
    3. Select the 'mag_/htmleditor/htmleditor.html' web resource
    4. Give the control a label and name (this can be whatever you want)
    5. In the web resource properties, custom parameters, specify the following parameters:
      • field: (Required) The schema name of the field you created to hold the HTML.
      • defaultValue: (Optional) Default HTML to display inside the editor when there is no existing value. This value should be URL encoded.
    6. Example of parameters: field=new_html&defaultValue=%3Cb%3EHello%3C%2Fb%3E
  6. For best results, on the Formatting tab of the web resource control:
    1. Set the number of rows. About 10-15 is usually good, however the editor will automatically expand to fill whatever size you make it.
    2. Set the scrolling to never. There should never need to be a scrollbar, as the editor automatically expands to fill the space.
    3. Set the border to not display. This simply makes the editor look cleaner, but the border can make it more obvious, so this is just personal preference.
  7. That's it! The web resource will automatically just start working as soon as you load up your form. When you click out of the editor, the HTML data will be saved into the custom field you specified with the web resource, allowing the data to be saved to the record and reloaded next time.

Adding multiple HTML editors to the same form

  1. Simply repeat the Usage steps above from step 3 onward using a different field to store the HTML.

Adding additional buttons to the editor

This solution is based on the CKEditor Basic package, however they provide the ability to add many additional buttons to the editor as well. If you want any of the additional buttons, you'll need to add these to the solution manually.

In my experience adding additional plugins is quite a complex process, so if you can avoid it, I'd recommend you stick with the existing solution.

  1. Visit http://ckeditor.com/builder and build yourself a custom download package. This should include all the existing buttons plus any additional buttons you require. Recommend starting with the Basic package, and building on that.
  2. Once you've built up the selected plugins, download the CK Editor package.
  3. You'll need to create web resources for all the files included in the package.
  4. Note that some files are not actually required to make the editor work, which I've stripped out to keep the solution small, but if you want to be safe just create all the files as web resources.
  5. You also need to update all the existing files which are already included in the solution, as CK Editor adds new stuff into the config and JavaScript files when you add new plugins. So to be safe be sure to just update everything.
  6. Also make sure the publisher prefix and folder/naming structure stays the same, as CK Editor will use relative URL's which need to exactly match the folder structure when you download the package.