OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 05:41:34 AM	rwxr-xr-x
📄 AnnotationsDemo.ts	1.64 KB	02/20/2020 05:41:36 AM	rw-r--r--
📄 CommandsDemo.ts	3.06 KB	02/20/2020 05:41:36 AM	rw-r--r--
📄 ContentEditableFalseDemo.ts	2.53 KB	02/20/2020 05:41:37 AM	rw-r--r--
📄 CustomThemeDemo.ts	1.79 KB	02/20/2020 05:41:37 AM	rw-r--r--
📄 Demos.ts	725 bytes	02/20/2020 05:41:38 AM	rw-r--r--
📄 FixedToolbarContainerDemo.ts	231 bytes	02/20/2020 05:41:38 AM	rw-r--r--
📄 FullDemo.ts	4.07 KB	02/20/2020 05:41:39 AM	rw-r--r--
📄 InlineDemo.ts	1.31 KB	02/20/2020 05:41:39 AM	rw-r--r--
📄 SourceDumpDemo.ts	1.74 KB	02/20/2020 05:41:41 AM	rw-r--r--
📄 TinyMceDemo.ts	922 bytes	02/20/2020 05:41:41 AM	rw-r--r--
📄 UiContainerDemo.ts	3.95 KB	02/20/2020 05:41:42 AM	rw-r--r--

Editing: CustomThemeDemo.ts

import { document } from '@ephox/dom-globals';

declare const tinymce: any;

export default function () {
  const textarea = document.createElement('textarea');
  textarea.rows = 20;
  textarea.cols = 80;
  textarea.innerHTML = '<p>Bolt</p>';
  textarea.classList.add('tinymce');
  document.querySelector('#ephox-ui').appendChild(textarea);

tinymce.init({
    selector: 'textarea',
    theme (editor, target) {
      const dom = tinymce.DOM;
      let editorContainer;

editorContainer = dom.insertAfter(dom.create('div', { style: 'border: 1px solid gray' },
        '<div>' +
        '<button data-mce-command="bold">B</button>' +
        '<button data-mce-command="italic">I</button>' +
        '<button data-mce-command="mceInsertContent" data-mce-value="Hello">Insert Hello</button>' +
        '</div>' +
        '<div style="border-top: 1px solid gray"></div>'
      ), target);

dom.setStyle(editorContainer, 'width', target.offsetWidth);

tinymce.each(dom.select('button', editorContainer), function (button) {
        dom.bind(button, 'click', function (e) {
          e.preventDefault();

editor.execCommand(
            dom.getAttrib(e.target, 'data-mce-command'),
            false,
            dom.getAttrib(e.target, 'data-mce-value')
          );
        });
      });

editor.on(function () {
        tinymce.each(dom.select('button', editorContainer), function (button) {
          editor.formatter.formatChanged(dom.getAttrib(button, 'data-mce-command'), function (state) {
            button.style.color = state ? 'red' : '';
          });
        });
      });

return {
        editorContainer,
        iframeContainer: editorContainer.lastChild,
        iframeHeight: target.offsetHeight - editorContainer.firstChild.offsetHeight
      };
    },
    height: 600
  });
}