OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:33:39 AM	rwxr-xr-x
📄 ButtonSetupDemo.ts	2.82 KB	02/20/2020 06:33:34 AM	rw-r--r--
📄 Demos.ts	515 bytes	02/20/2020 06:33:34 AM	rw-r--r--
📄 FormatSelectDemo.ts	2.4 KB	02/20/2020 06:33:35 AM	rw-r--r--
📄 MenuItemDemo.ts	3.9 KB	02/20/2020 06:33:35 AM	rw-r--r--
📄 MockDemo.ts	508 bytes	02/20/2020 06:33:36 AM	rw-r--r--
📄 PlayDemo.ts	5.03 KB	02/20/2020 06:33:36 AM	rw-r--r--
📄 SidebarDemo.ts	1.46 KB	02/20/2020 06:33:37 AM	rw-r--r--
📄 ToolbarButtonDemo.ts	2.92 KB	02/20/2020 06:33:37 AM	rw-r--r--
📄 ToolbarComponentsDemo.ts	3.67 KB	02/20/2020 06:33:38 AM	rw-r--r--

Editing: SidebarDemo.ts

import { console } from '@ephox/dom-globals';
import { Element } from '@ephox/sugar';

import Editor from 'tinymce/core/api/Editor';

// import ButtonSetupDemo from './ButtonSetupDemo';
declare let tinymce: any;

export default function () {
  const makeSidebar = (ed: Editor, name: string, background: string, width: number) => {
    ed.ui.registry.addSidebar(name, {
      icon: 'comment',
      tooltip: 'Tooltip for ' + name,
      onSetup: (api) => {
        console.log('onSetup ' + name);
        const box = Element.fromHtml('<div style="width: ' + width + 'px; background: ' + background + ';"></div>');
        api.element().appendChild(box.dom());
        return () => {
          api.element().removeChild(box.dom());
        };
      },
      onShow: (api) => {
        console.log('onShow ' + name);
      },
      onHide: (api) => {
        console.log('onHide ' + name);
      },
    });
  };

tinymce.init({
    selector: 'textarea.tiny-text',
    theme: 'silver',
    toolbar: 'sidebar1 sidebar2 sidebar3',
    plugins: [
      'lists', // Required for list functionality (commands),
      'autolink', // Required for turning pasted text into hyperlinks
      'autosave', // Required to prevent users losing content when they press back
    ],
    // statusbar: false,
    resize: 'both',

setup (ed: Editor) {
      makeSidebar(ed, 'sidebar1', 'green', 200);
      makeSidebar(ed, 'sidebar2', 'red', 300);
      makeSidebar(ed, 'sidebar3', 'blue', 150);
    }
  });
}