From f4358f16af220fd69f881767bf66a5c7cd7e0010 Mon Sep 17 00:00:00 2001
From: RemiZOffAlex <remizoffalex@mail.ru>
Date: Wed, 6 May 2020 15:49:18 +0300
Subject: [PATCH] Update editor

---
 myapp/ns_page/templates/user/page_add.html  |  4 +-
 myapp/ns_page/templates/user/page_edit.html | 10 ++--
 myapp/templates/inc/editor.js               | 51 +++++++++++++++++----
 3 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/myapp/ns_page/templates/user/page_add.html b/myapp/ns_page/templates/user/page_add.html
index 25f6d7f..141e1d2 100644
--- a/myapp/ns_page/templates/user/page_add.html
+++ b/myapp/ns_page/templates/user/page_add.html
@@ -53,7 +53,7 @@ var app = new Vue({
         send: function () {
             /* Сохранить */
             let vm = this;
-{{ editor.getValue('body', 'vm.page.body', type='tinymce') }}
+{{ editor.getValue('"body"', 'vm.page.body', type='tinymce') }}
             axios.post(
                 '/api',
                 {
@@ -75,7 +75,7 @@ var app = new Vue({
         }
     },
     mounted: function () {
-{{ editor.tinymce('body') }}
+{{ editor.tinymce('"body"') }}
     }
 })
 </script>
diff --git a/myapp/ns_page/templates/user/page_edit.html b/myapp/ns_page/templates/user/page_edit.html
index cbbc35f..af645ad 100644
--- a/myapp/ns_page/templates/user/page_edit.html
+++ b/myapp/ns_page/templates/user/page_edit.html
@@ -36,7 +36,8 @@
 {% endblock %}
 
 {% block script %}
-<script type="text/javascript" src="/static/tinymce/tinymce.min.js"></script>
+{% import 'inc/editor.js' as editor %}
+{{ editor.plugin('tinymce') }}
 
 <script type="text/javascript">
 var app = new Vue({
@@ -48,10 +49,7 @@ var app = new Vue({
         send: function () {
             /* Сохранить */
             let vm = this;
-            var value = CKEDITOR.instances["body"].getData();
-            if (value != vm.page.body) {
-                vm.page.body = value;
-            }
+{{ editor.getValue('"body"', 'vm.page.body', type='tinymce') }}
             axios.post(
                 '/api',
                 {
@@ -74,7 +72,7 @@ var app = new Vue({
         }
     },
     mounted: function () {
-{{ editor.tinymce('body') }}
+{{ editor.tinymce('"body"') }}
     }
 })
 </script>
diff --git a/myapp/templates/inc/editor.js b/myapp/templates/inc/editor.js
index 182c094..2684a25 100644
--- a/myapp/templates/inc/editor.js
+++ b/myapp/templates/inc/editor.js
@@ -1,3 +1,29 @@
+{#
+Подгрузить скрипт
+
+{% import 'inc/editor.js' as editor %}
+{{ editor.plugin('tinymce') }}
+
+Получить данные
+
+{{ editor.getValue('"text"', 'vm.note.text', type='tinymce') }}
+
+{{ editor.getValue('"field" + field.id', 'field.cell.value', type='tinymce') }}
+
+Получить данные
+
+{{ editor.setValue('"text"', 'vm.note.text', type='tinymce') }}
+
+{{ editor.setValue('"field" + field.id', 'field.cell.value', type='tinymce') }}
+
+Инициализировать редактор
+
+{{ editor.tinymce('"text"') }}
+
+{{ editor.tinymce('"field" + field.id') }}
+
+#}
+
 {% macro plugin(type="tinymce") -%}
 {% if type=="tinymce" %}
 <script type="text/javascript" src="/static/tinymce/tinymce.min.js"></script>
@@ -7,29 +33,38 @@
 {%- endmacro %}
 
 {% macro ckeditor(name) -%}
-CKEDITOR.replace( '{{ name }}', {
+CKEDITOR.replace( {{ name }}, {
     customConfig: '/static/js/ckeditor-conf.js'
 } );
 {%- endmacro %}
 
 {% macro tinymce(name) -%}
 tinymce.init({
-    selector: 'textarea#{{ name }}',
+    selector: '#' + {{ name }},
     height: 400,
     language: 'ru',
-    plugins: "code link image table",
-    toolbar: "table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol"
+    plugins: 'code importcss searchreplace autolink save directionality visualblocks visualchars fullscreen image link media table charmap hr pagebreak nonbreaking anchor toc advlist lists wordcount imagetools textpattern noneditable help charmap quickbars',
+    toolbar: 'code | undo redo | bold italic underline strikethrough removeformat | formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | fullscreen | link image anchor charmap',
+
+    formats: {
+        img: { selector: 'img', classes: 'img-thumbnail', styles: {} },
+        table: { selector: 'table', classes: 'table', styles: {} },
+    },
+    style_formats: [
+        { title: 'Картинка', format: 'img' },
+        { title: 'Таблица', format: 'table' },
+    ]
 });
 {%- endmacro %}
 
 {% macro getValue(name, param, type="tinymce") -%}
 {% if type=="tinymce" %}
-let value = tinymce.get("{{ name }}").getContent();
+let value = tinymce.get({{ name }}).getContent();
 if (value != {{ param }}) {
     {{ param }} = value;
 }
 {% elif type=="ckeditor" %}
-var value = CKEDITOR.instances["{{ name }}"].getData();
+var value = CKEDITOR.instances[{{ name }}].getData();
 if (value != {{ param }}) {
     {{ param }} = value;
 }
@@ -38,8 +73,8 @@ if (value != {{ param }}) {
 
 {% macro setValue(name, param, type="tinymce") -%}
 {% if type=="tinymce" %}
-tinymce.get("{{ name }}").setContent({{ param }});
+tinymce.get({{ name }}).setContent({{ param }});
 {% elif type=="ckeditor" %}
-CKEDITOR.instances["{{ name }}"].setData({{ param }});
+CKEDITOR.instances[{{ name }}].setData({{ param }});
 {% endif %}
 {%- endmacro %}