JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.4.2/skins/content/default/content.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.4.2/tinymce.min.js"></script>
<textarea></textarea>

JavaScript

tinymce.init({
  selector: 'textarea',
  height: 500,
  toolbar: 'platzhalter',

  setup: (editor) => {

    const menuItems = [{
        text: 'Menu item 1',
        value: '@{x1}',
        onAction: () => editor.insertContent('<span contenteditable="false">@{x1}</span>')
      },
      {
        text: 'Menu item 2',
        value: '@{x2}',
        onAction: () => editor.insertContent('<span contenteditable="false">@{x2}</span>')
      },
      {
        text: 'Menu item 3',
        getSubmenuItems: () => {
          return [{
              type: 'nestedmenuitem',
              text: 'Nested menu item 3-1',
              getSubmenuItems: () => {
                return [{
                    type: 'menuitem',
                    text: 'Submenu item 3-1-1',
                    onAction: () => editor.insertContent('<span contenteditable="false">@{x3}</span>')
                  },
                  {
                    type: 'menuitem',
                    text: 'Submenu item 3-1-2',
                    onAction: () => editor.insertContent('<span contenteditable="false">@{x4}</span>')
                  }
                ];
              }
            },
            {
              type: 'nestedmenuitem',
              text: 'Nested menu item 3-2',
              getSubmenuItems: () => {
                return [{
                    type: 'menuitem',
                    text: 'Submenu item 3-2-1',
                    onAction: () => editor.insertContent('<span contenteditable="false">@{x5}</span>')
                  },
                  {
                    type: 'menuitem',
                    text: 'Submenu item 3-2-2',
                    onAction: () => editor.insertContent('<span contenteditable="false">@{x6}</span>')
                  }
                ];
              }
            }
          ];
        }
      }
    ];

    const createMenuItems = (items) => {
      return items.map(item => {
        if (item.getSubmenuItems) {
          return {
          ...