Error Showing Content - please login as admin for details.

Customize Edit UI/UX

#8 Custom lightweight WYSIWYG (4 buttons)

Custom WYSIWYG with 1 additional button, multi-language

2sxc Custom Micro-WYSIWYG Input Field

Creating an own WYSIWYG would be super difficult. This is why we decided to create a simple API where you can use the existing WYSIWYG and just reconfigure it. For the configuration you will need to understand the TinyMCE API and the names of our callbacks, but then it's really easy.

You can learn how to:

Use connector.loadScript(...) to load the builtin WYSIWYG
...and wait for the callback to ensure it's ready
Create a inner field-string-wysiwyg
Set the mode to edit (instead of preview)
Attach the connector so the inner object has it as well
Attach the reconfigure object
Create your own Reconfigurator which can make changes
Use configureOptions to set a different toolbar

Requirements

2sxc 11.00

Resources

Important: The feature "Public Use of Edit Form" is disabled

The feature is needed for anonymous users to use the Edit Form. Register your site here https://patrons.2sxc.org/ to get access to the feature.

New syntax: String WYSIWYG Micro Custom Input Field

This example shows a reduced WYSIWYG with only 4 buttons.
Hit this edit button to have a look:

  @Kit.Toolbar.Empty().New("UiStringWysiwygMicro").AsTag()

Old syntax: String WYSIWYG Micro Custom Input Field

This example shows a reduced WYSIWYG with only 4 buttons.
Hit this edit button to have a look:

      @Edit.Toolbar(toolbar: new [] { "toolbar=empty", "+new?contentType=UiStringWysiwygMicro" })
  
  

Important: We opened permissions that you can experience the edit dialog - so you can save, but it will just create draft data 😉.

Configurable Color Picker

#8 Custom lightweight WYSIWYG (4 buttons)

Custom WYSIWYG with 1 additional button, multi-language

Source of [App]/system/field-string-wysiwyg-micro/index.js

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

/*
  This examples shows a JS WebComponent which makes a custom WYSIWYG
*/

// always use an IFFE to ensure you don't put variables in the window scope
(() => {
  const tagName = 'field-string-wysiwyg-micro';
  const builtInWysiwyg = '[System:Path]/system/field-string-wysiwyg/index.js';

  /** Our WebComponent which is a custom, lightweight wysiwyg editor */
  class StringWysiwygCustom extends HTMLElement {

    /* connectedCallback() is the standard callback  when the component has been attached */
    connectedCallback() {
      // We need to ensure that the standard WYSIWYG is also loaded
      this.connector.loadScript('tinymce', builtInWysiwyg, (x) => { this.initWysiwygCallback() })
    }

    initWysiwygCallback() {
      // 1. Create a built-in field-string-wysiwyg control
      const wysiwyg = document.createElement('field-string-wysiwyg');
      // 2. tell it if it should start in preview or edit
      wysiwyg.mode = 'edit'; // can be 'preview' or 'edit'
      // 3. attach connector
      wysiwyg.connector = this.connector;
      // 4. also attach reconfigure object which can change the TinyMCE as it's initialized
      wysiwyg.reconfigure = new WysiwygReconfigurator();
      // 5. Append it to the DOM. Do this last, as it will trigger connectedCallback() in the wysiwyg
      this.appendChild(wysiwyg);
    }
  }

  /** The object which helps reconfigure what the editor will do */
  class WysiwygReconfigurator {
    configureOptions(options) {
      options.toolbar = "undo redo | bold italic"
      return options;
    }
  }

  // Register this web component - if it hasn't been registered yet
  if (!customElements.get(tagName)) customElements.define(tagName, StringWysiwygCustom);
})();