Skip to main content
Error Showing Content - please login as admin for details.
Error Showing Content - please login as admin for details.

Customize Edit UI/UX

Tutorial Home

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:

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

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

      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);
      })();