demo/demo-uml-viewOnly.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DEMO</title>
    <script src="../lib/markdown-it/dist/markdown-it.js"></script>
    <script src="../lib/toMark/dist/toMark.js"></script>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="../lib/tui-color-picker/dist/tui-color-picker.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>
    <script src="../lib/plantuml-encoder/dist/plantuml-encoder.min.js"></script>
    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
    <link rel="stylesheet" href="../dist/tui-editor-contents.css">
    <link rel="stylesheet" href="../lib/tui-color-picker/dist/tui-color-picker.css">
    <style type="text/css">
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
        #editSection {
            padding: 15px;
            padding-top: 35px;
        }
    </style>
</head>
<body>
<div id="editSection"></div>
<script src="../dist/tui-editor-ViewOnly.js"></script>
<script src="../dist/tui-editor-extUML.js"></script>
<script>
    var content = [
        'uml start',
        '```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');
    $('#editSection').tuiEditorViewOnly({
        initialValue: content,
        exts: ['scrollFollow', {
            name: 'uml', // enable plant uml plugin
            rendererURL: 'http://www.plantuml.com/plantuml/png/'
        }]
    });
</script>
</body>
</html>