Editor.js integration #122 #117

- next round of integration
2025-08-18 02:41:27 +02:00 · 2019-06-03 01:06:09 +03:00
parent 48ca8a377e
commit 3ad9e675f8
2 changed files with 173 additions and 175 deletions
--- a/site/plugins/admin/views/partials/base.html
+++ b/site/plugins/admin/views/partials/base.html
@@ -240,183 +240,10 @@
            {% endfor %}
        {% endfor %}

-        <!-- Load Tools -->
-          <!--
-           You can upload Tools to your project's directory and use as in example below.
-           Also you can load each Tool from CDN or use NPM/Yarn packages.
-           Read more in Tool's README file. For example:
-           https://github.com/editor-js/header#installation
-           -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script><!-- List -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!-- Warning -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
-          <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

-        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
-
-        <script>
-
-        {% if is_current_path('admin.entries.edit') %}
-
-        /**
-         * Module to compose output JSON preview
-         */
-        const cPreview = (function (module) {
-          /**
-           * Shows JSON in pretty preview
-           * @param {object} output - what to show
-           * @param {Element} holder - where to show
-           */
-          module.show = function(output, holder) {
-            /** Make JSON pretty */
-            output = JSON.stringify( output, null, 4 );
-            /** Encode HTML entities */
-            output = encodeHTMLEntities( output );
-            /** Stylize! */
-            output = stylize( output );
-            holder.innerHTML = output;
-          };
-
-          /**
-           * Converts '>', '<', '&' symbols to entities
-           */
-          function encodeHTMLEntities(string) {
-            return string.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-          }
-
-          /**
-           * Some styling magic
-           */
-          function stylize(string) {
-            /** Stylize JSON keys */
-            string = string.replace( /"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
-            /** Stylize tool names */
-            string = string.replace( /"(paragraph|quote|list|header|link|code|image|delimiter|raw|checklist|table|embed|warning)"/g, '"<span class=sc_toolname>$1</span>"');
-            /** Stylize HTML tags */
-            string = string.replace( /(&lt;[\/a-z]+(&gt;)?)/gi, '<span class=sc_tag>$1</span>' );
-            /** Stylize strings */
-            string = string.replace( /"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"' );
-            /** Boolean/Null */
-            string = string.replace( /\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>' );
-            return string;
-          }
-
-          return module;
-        })({});
-
-        /**
-          * Saving button
-          */
-         const saveButton = document.getElementById('saveButton');
-
-         /**
-          * To initialize the Editor, create a new instance with configuration object
-          * @see docs/installation.md for mode details
-          */
-         var editor = new EditorJS({
-           /**
-            * Wrapper of Editor
-            */
-           holder: 'editorjs',
-           /**
-            * Tools list
-            */
-           tools: {
-             /**
-              * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
-              */
-             header: {
-               class: Header,
-               inlineToolbar: ['link'],
-               config: {
-                 placeholder: 'Header'
-               },
-               shortcut: 'CMD+SHIFT+H'
-             },
-             /**
-              * Or pass class directly without any configuration
-              */
-             image: {
-               class: SimpleImage,
-               inlineToolbar: ['link'],
-             },
-             list: {
-               class: List,
-               inlineToolbar: true,
-               shortcut: 'CMD+SHIFT+L'
-             },
-             checklist: {
-               class: Checklist,
-               inlineToolbar: true,
-             },
-             quote: {
-               class: Quote,
-               inlineToolbar: true,
-               config: {
-                 quotePlaceholder: 'Enter a quote',
-                 captionPlaceholder: 'Quote\'s author',
-               },
-               shortcut: 'CMD+SHIFT+O'
-             },
-             warning: Warning,
-             marker: {
-               class:  Marker,
-               shortcut: 'CMD+SHIFT+M'
-             },
-             code: {
-               class:  CodeTool,
-               shortcut: 'CMD+SHIFT+C'
-             },
-             delimiter: Delimiter,
-             inlineCode: {
-               class: InlineCode,
-               shortcut: 'CMD+SHIFT+C'
-             },
-             embed: Embed,
-             table: {
-               class: Table,
-               inlineToolbar: true,
-               shortcut: 'CMD+ALT+T'
-             },
-           },
-           /**
-            * This Tool will be used as default
-            */
-           // initialBlock: 'paragraph',
-           /**
-            * Initial Editor data
-            */
-           data: {},
-
-           onReady: function(){
-             saveButton.click();
-           },
-
-           onChange: function() {
-             console.log('something changed');
-           }
-         });
-         /**
-          * Saving example
-          */
-         saveButton.addEventListener('click', function () {
-           editor.save().then((savedData) => {
-             cPreview.show(savedData, document.getElementById("output"));
-           });
-         });
-
-         {% endif %}
+    <script type="text/javascript">

            new ClipboardJS('.js-clipboard-btn');
            bsCustomFileInput.init();
--- a/site/plugins/admin/views/templates/content/entries/editor.html
+++ b/site/plugins/admin/views/templates/content/entries/editor.html
@@ -0,0 +1,171 @@
+<div id="{{ form_element }}" class="editor"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script><!-- List -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!-- Warning -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
+<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+
+<script>
+
+{% if is_current_path('admin.entries.edit') %}
+
+/**
+ * Module to compose output JSON preview
+ */
+const cPreview = (function (module) {
+  /**
+   * Shows JSON in pretty preview
+   * @param {object} output - what to show
+   * @param {Element} holder - where to show
+   */
+  module.show = function(output, holder) {
+    /** Make JSON pretty */
+    output = JSON.stringify( output, null, 4 );
+    /** Encode HTML entities */
+    output = encodeHTMLEntities( output );
+    /** Stylize! */
+    output = stylize( output );
+    holder.innerHTML = output;
+  };
+
+  /**
+   * Converts '>', '<', '&' symbols to entities
+   */
+  function encodeHTMLEntities(string) {
+    return string.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  /**
+   * Some styling magic
+   */
+  function stylize(string) {
+    /** Stylize JSON keys */
+    string = string.replace( /"(\w+)"\s?:/g, '"<span class=sc_key>$1</span>" :');
+    /** Stylize tool names */
+    string = string.replace( /"(paragraph|quote|list|header|link|code|image|delimiter|raw|checklist|table|embed|warning)"/g, '"<span class=sc_toolname>$1</span>"');
+    /** Stylize HTML tags */
+    string = string.replace( /(&lt;[\/a-z]+(&gt;)?)/gi, '<span class=sc_tag>$1</span>' );
+    /** Stylize strings */
+    string = string.replace( /"([^"]+)"/gi, '"<span class=sc_attr>$1</span>"' );
+    /** Boolean/Null */
+    string = string.replace( /\b(true|false|null)\b/gi, '<span class=sc_bool>$1</span>' );
+    return string;
+  }
+
+  return module;
+})({});
+
+/**
+  * Saving button
+  */
+ const saveButton = document.getElementById('saveButton');
+
+ /**
+  * To initialize the Editor, create a new instance with configuration object
+  * @see docs/installation.md for mode details
+  */
+ var {{ form_element }} = new EditorJS({
+   /**
+    * Wrapper of Editor
+    */
+   holder: '{{ form_element }}',
+   /**
+    * Tools list
+    */
+   tools: {
+     /**
+      * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
+      */
+     header: {
+       class: Header,
+       inlineToolbar: ['link'],
+       config: {
+         placeholder: 'Header'
+       },
+       shortcut: 'CMD+SHIFT+H'
+     },
+     /**
+      * Or pass class directly without any configuration
+      */
+     image: {
+       class: SimpleImage,
+       inlineToolbar: ['link'],
+     },
+     list: {
+       class: List,
+       inlineToolbar: true,
+       shortcut: 'CMD+SHIFT+L'
+     },
+     checklist: {
+       class: Checklist,
+       inlineToolbar: true,
+     },
+     quote: {
+       class: Quote,
+       inlineToolbar: true,
+       config: {
+         quotePlaceholder: 'Enter a quote',
+         captionPlaceholder: 'Quote\'s author',
+       },
+       shortcut: 'CMD+SHIFT+O'
+     },
+     warning: Warning,
+     marker: {
+       class:  Marker,
+       shortcut: 'CMD+SHIFT+M'
+     },
+     code: {
+       class:  CodeTool,
+       shortcut: 'CMD+SHIFT+C'
+     },
+     delimiter: Delimiter,
+     inlineCode: {
+       class: InlineCode,
+       shortcut: 'CMD+SHIFT+C'
+     },
+     embed: Embed,
+     table: {
+       class: Table,
+       inlineToolbar: true,
+       shortcut: 'CMD+ALT+T'
+     },
+   },
+   /**
+    * This Tool will be used as default
+    */
+   // initialBlock: 'paragraph',
+   /**
+    * Initial Editor data
+    */
+   data: {},
+
+   onReady: function(){
+     saveButton.click();
+   },
+
+   onChange: function() {
+     console.log('something changed');
+   }
+ });
+ /**
+  * Saving example
+  */
+ saveButton.addEventListener('click', function () {
+   editor.save().then((savedData) => {
+     cPreview.show(savedData, document.getElementById("output"));
+   });
+ });
+
+ {% endif %}
+
+ </script>