tinymce-code-tutorial/src/main/html/Integration.html at 873894a1795fd2e816bcb48cb9651b2354aa1091 · tiny-ben-tran/tinymce-code-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>
<html lang="en">
<head>
  <title>Integration</title>
  <script src="https://cdn.tiny.cloud/1/b6r7yu1n19ibkha4z0s4gdvt0l7z2mc3dzlnc780ep0uuzks/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
  <textarea class='classic'></textarea>
  <script>
    tinymce.init({
        selector: '.classic',
        content_style: 'body {font-size: 14pt;}',
        plugins: 'table spellchecker fullscreen code print link image lists advlist wordcount autoresize',
        menubar: 'file edit view insert format tools table',
        formats: {
          myred: { inline: 'span', styles: { color: 'red' } }
        },
        menu: {
          file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
          edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
          view: { title: 'View', items: 'spellchecker | preview fullscreen' },
          insert: { title: 'Insert', items: 'inserttable' },
          format: { title: 'Format', items: 'bold italic underline strikethrough' },
          tools: { title: 'Tools', items: 'spellchecker' },
          table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
        },
        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | fontselect fontsizeselect formatselect | bullist numlist outdent indent | link image | fullscreen wordcount code print | customToolBarButton',
        max_height: 230,
        setup: function (editor) {
          editor.ui.registry.addButton('customToolBarButton', {
            text: 'My Custom Button',
            onAction: function () {
              // alert('Button clicked!');
              tinymce.activeEditor.windowManager.open({
                title: 'Custom dialog',
                body: {
                  type: 'panel',
                  items: [
                    {
                      type: 'input',
                      name: 'customInput',
                      label: 'Please enter your fruit'
                    }
                  ]
                },
                buttons: [
                  {
                    type: 'submit',
                    text: 'Submit'
                  }
                ],
                onSubmit: function (dialogApi) {
                  editor.formatter.apply('myred');
                  editor.execCommand('mceInsertContent', false, dialogApi.getData().customInput);
                  editor.formatter.remove('myred');
                  dialogApi.close();
                }
              });
            }
          });
        }
    });
  </script>

  <h1>Inline editor</h1>
  <form method='post'>
    <div class='inlineEditor'></div>
  </form>
  <script>
    tinymce.init({
        selector: '.inlineEditor',
        inline: true,
        formats: {
          myred: { inline: 'span', styles: {color: 'red'}}
        },
        placeholder: 'click here to edit .....',
        setup: function (editor) {
          // context button
          editor.ui.registry.addButton('customStrikeButton', {
            text: 'strike red',
            icon: 'cancel',
            tooltip: 'strike through and change colour to red',
            onAction: function (_) {
              editor.formatter.apply('strikethrough');
              editor.formatter.apply('myred');
            }
          });
          // context tool bar
          editor.ui.registry.addContextToolbar('imagealignment', {
            predicate: function (node) {
              return !editor.selection.isCollapsed();
            },
            items: 'bold italic underline customStrikeButton',
            position: 'selection',
            scope: 'editor'
          });
        },
    });
  </script>

  <h1>All editors</h1>
  <button onclick='gatherAll()'>Collect all</button>
  <div id='container' style='border: 1px solid; min-height: 400px;'>

  </div>
  <script>
    function gatherAll() {
      document.getElementById('container').innerHTML = tinymce.get(0).getContent() + '<br/>' + tinymce.get(1).getContent();;
    }
  </script>
</body>
</html>