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: AnnotationsDemo.ts

import { console, document, prompt } from '@ephox/dom-globals';
import Editor from 'tinymce/core/api/Editor';

declare let tinymce: any;

export default function () {

const button = document.createElement('button');
  button.innerHTML = 'Get all annotations';
  button.addEventListener('click', () => {
    // tslint:disable no-console
    console.log('annotations', tinymce.activeEditor.annotator.getAll('alpha'));
    // tslint:enable no-console
  });
  document.body.appendChild(button);

tinymce.init({
    skin_url: '../../../../js/tinymce/skins/ui/oxide',
    selector: 'textarea.tinymce',
    toolbar: 'annotate-alpha',
    plugins: [ ],

content_style: '.mce-annotation { background-color: darkgreen; color: white; }',

setup: (editor: Editor) => {
      editor.ui.registry.addButton('annotate-alpha', {
        text: 'Annotate',
        onAction() {
          const comment = prompt('Comment with?');
          editor.annotator.annotate('alpha', {
            comment
          });
          editor.focus();
        },
        onSetup (btnApi) {
          editor.annotator.annotationChanged('alpha', (state, name, obj) => {
            btnApi.setDisabled(state);
          });
          return () => {};
        }
      });

editor.on('init', () => {
        editor.annotator.register('alpha', {
          persistent: true,
          decorate: (uid, data) => {
            return {
              attributes: {
                'data-mce-comment': data.comment ? data.comment : '',
                'data-mce-author': data.author ? data.author : 'anonymous'
              }
            };
          }
        });
      });
    },

menubar: false
  });
}