myapp-full/myapp/templates/inc/editor.js

{#
Подгрузить скрипт

{% 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>
{% elif type=="ckeditor" %}
<script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>
{% endif %}
{%- endmacro %}

{% macro ckeditor(name) -%}
CKEDITOR.replace( {{ name }}, {
    customConfig: '/static/js/ckeditor-conf.js'
} );
{%- endmacro %}

{% macro tinymce(name) -%}
tinymce.init({
    selector: '#' + {{ name }},
    height: 400,
    language: 'ru',
    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();
if (value != {{ param }}) {
    {{ param }} = value;
}
{% elif type=="ckeditor" %}
var value = CKEDITOR.instances[{{ name }}].getData();
if (value != {{ param }}) {
    {{ param }} = value;
}
{% endif %}
{%- endmacro %}

{% macro setValue(name, param, type="tinymce") -%}
{% if type=="tinymce" %}
tinymce.get({{ name }}).setContent({{ param }});
{% elif type=="ckeditor" %}
CKEDITOR.instances[{{ name }}].setData({{ param }});
{% endif %}
{%- endmacro %}