Editorjs sample

4 years ago · d7ab4ce85a
1 changed files with 70 additions and 0 deletions
--- a/backend/src/Squidex/wwwroot/scripts/editor-editorjs.html
+++ b/backend/src/Squidex/wwwroot/scripts/editor-editorjs.html
@ -0,0 +1,70 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
    <script src="editor-sdk.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
    <style>
        .editor {
            border: 1px solid #eee;
            border-radius: 4px;
            min-height: 50px;
        }
    </style>
 </head>
 <body>
    <div class="editor">
        <div id="editorjs"></div>
    </div>
    <script>
        // When the field is instantiated it notifies the UI that it has been loaded.
        // 
        // Furthermore it sends the current size to the parent.
        var field = new SquidexFormField();
        var editor = new EditorJS({
            holder: 'editorjs',
            tools: {
                header: {
                    class: Header,
                    inlineToolbar : true
                }
            },
            minHeight: 50,
            data: {},
            onReady: function () {
                field.onValueChanged(function (value) {
                    if (value) {
                        editor.render(value);
                    }
                });
                field.onDisabled(function (disabled) {
                    editor.readOnly.toggle(disabled);
                });
            },
            onChange: function () {
                editor.save().then(function (data) {
                    // Notify the UI that the value has been changed. Will be used to trigger validation.
                    field.valueChanged(data);
                    console.log(JSON.stringify(data, null, 2));
                });
            }
        });
    </script>
 </body>
 </html>