Skip to main content
Home  › ... Razor

Customize Edit UI/UX

Tutorial HomeCustomize Edit UX
#5 Custom WYSIWYG with 1 additional button, multi-language

2sxc Custom WYSIWYG with Additional Button

This example show how we customize more of TinyMCE.

You can learn how to:

  • Use addTranslations()
  • Use configureOptions(...) to extend the toolbar
  • Use configureAddOns to change button options for the image
  • Run code when the editor is running init to add button defininiots

String WYSIWYG With Additional Button and Labels

Output

This example keeps the default buttons and adds another one, with multi-language labels
Hit this edit button to have a look:

    <p>
      This example keeps the default buttons and adds another one, with multi-language labels <br>
      Hit this edit button to have a look: 
    </p>
    @Kit.Toolbar.Empty().New("UiStringWysiwygButtonMl").AsTag()

    Source Code of ../system/field-string-wysiwyg-button-ml/index.js

    /*
      This examples shows a custom WYSIWYG JS WebComponent with additional language and button
    */
    
    // always use an IFFE to ensure you don't put variables in the window scope
    (() => {
      const tagName = 'field-string-wysiwyg-button-ml';
      const builtInWysiwyg = '[System:Path]/system/field-string-wysiwyg/index.js';
    
      // Button labels, mouse-over-tooltips, etc.
      const en = { "TestButton.Tooltip": "Tooltip Button EN!" };
      const de = { "TestButton.Tooltip": "Tooltip Knopf DE!" };
    
      /** Our custom Wysiwyg with an additional button having labels in 2 languages */
      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 {
        addTranslations(editorManager, language) {
          console.log("add translations to tinyMCE", editorManager, language);
          editorManager.addI18n(language, language == 'de' ? de : en);
        }
    
        configureOptions(options) {
          console.log('will try to modify tinyMCE options', options);
          options.toolbar += " | testButton";
          return options;
        }
    
        configureAddOns(addOnSettings) {
          console.log('configure add-on settings for stuff added by the 2sxc form');
          addOnSettings.imgSizes = [25, 10];
          return addOnSettings;
        }
    
        editorOnInit(editor) {
          console.log('editor init, will add button to tinyMCE', editor);
          editor.ui.registry.addButton('testButton', {
            icon: 'close',
            tooltip: 'TestButton.Tooltip',
            onAction: (_) => { alert('test-button used!') },
          });
        }
    
        disableDnn = true;
      }
    
      // Register this web component - if it hasn't been registered yet
      if (!customElements.get(tagName)) customElements.define(tagName, StringWysiwygCustom);
    })();
    Important: We opened permissions that you can experience the edit dialog - so you can save, but it will just create draft data 😉.
    #5 Custom WYSIWYG with 1 additional button, multi-language

    Source Code of this file

    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

    @inherits Custom.Hybrid.Razor14
    <!-- unimportant stuff, hidden -->
    
    
    <div @Sys.PageParts.InfoWrapper()>
      @Html.Partial("../shared/DefaultInfoSection.cshtml")
      <div @Sys.PageParts.InfoIntro()>
        <h2>2sxc Custom WYSIWYG with Additional Button</h2>
        <p>
          This example show how we customize more of TinyMCE. 
        </p>
        <p>You can learn how to:</p>
        <ul>
          <li>Use <code>addTranslations()</code></li>
          <li>Use <code>configureOptions(...)</code> to extend the toolbar</li>
          <li>Use configureAddOns to change button options for the image</li>
          <li>Run code when the editor is running <code>init</code> to add button defininiots</li>
        </ul>
      </div>
    </div>
    <br>
    @Html.Partial("../shared/WarnAnonymousIfFeatureIsOff.cshtml")
    </hide>
    
    <div class="alert alert-success">  
      <h2>String WYSIWYG With Additional Button and Labels</h2>
    
      <p>
        This example keeps the default buttons and adds another one, with multi-language labels <br>
        Hit this edit button to have a look: 
      </p>
      @Kit.Toolbar.Empty().New("UiStringWysiwygButtonMl").AsTag()
    
    </div>
    
    
    @Html.Partial("warning.cshtml")
    @* Footer *@
    @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })