tui.editor/examples/example10-viewer-multiple-extensions.html at master · akiander/tui.editor · 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
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>10. Viewer multiple extensions</title>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/markdown-it/dist/markdown-it.js"></script>
    <script src="../lib/to-mark/dist/to-mark.js"></script>
    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="../lib/codemirror/lib/codemirror.js"></script>
    <script src="../lib/highlightjs/highlight.pack.js"></script>
    <script src="../lib/squire-rte/build/squire-raw.js"></script>
    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
    <link rel="stylesheet" href="./explain.css">
  </head>
  <body>
    <div class="explain">
      Learn more about Viewer in <a target="_blank" href="https://github.com/nhnent/tui.editor/wiki/Getting-started-with-bower#viewer">here</a>
    </div>
    <div class="explain">
      Learn more about Extensions in <a target="_blank" href="https://github.com/nhnent/tui.editor/wiki/Extensions">here</a>
    </div>
    <div class="explain">
      See available options in <a target="_blank" href="../ToastUIEditorViewer.html#ToastUIEditorViewer">here</a>
    </div>
    <div class="code-html">
    <script src="../dist/tui-editor-Viewer.js"></script>
    <script src="../dist/tui-editor-extTable.js"></script>
    <script src="../lib/plantuml-encoder/dist/plantuml-encoder.js"></script>
    <script src="../dist/tui-editor-extUML.js"></script>
    <link rel="stylesheet" href="../dist/tui-editor-contents.css">

    <div id="editSection"></div>
    </div>
    <script class="code-js">
      var content = [
        '![image](https://cloud.githubusercontent.com/assets/389021/16107646/9729e556-33d8-11e6-933f-5b09fa3a53bb.png)',
        '# Heading 1',
        '## Heading 2',
        '    code block',
        '```js',
        'console.log("fenced code block");',
        '```',
        '[link](https://nhnent.github.io/tui.editor/)',
        '> block quote',
        '---',
        'horizontal line',
        '***',
        '`code`, *italic*, **bold**, ~~strikethrough~~, <span style="color:#e11d21">Red color</span>',
        '| @cols=2:merged |',
        '| --- | --- |',
        '| table | table |',
        '```uml',
        'partition Conductor {',
        '  (*) --> "Climbs on Platform"',
        '  --> === S1 ===',
        '  --> Bows',
        '}',
        '',
        'partition Audience #LightSkyBlue {',
        '  === S1 === --> Applauds',
        '}',
        '',
        'partition Conductor {',
        '  Bows --> === S2 ===',
        '  --> WavesArmes',
        '  Applauds --> === S2 ===',
        '}',
        '',
        'partition Orchestra #CCCCEE {',
        '  WavesArmes --> Introduction',
        '  --> "Play music"',
        '}',
        '```'
      ].join('\n');

      var editor = new tui.Editor({
        el: document.querySelector('#editSection'),
        height: '300px',
        initialValue: content,
        exts: ['table', 'uml']
      });
    </script>
  </body>
</html>