SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы

Список вопросов Печать

Как в mithril.js подключить редактор текста TinyMCE?


Метки: mithril.js javascript tinymce 

Ответы

RemiZOffAlex  Создано: 2022-11-13 07:08:29.741210  Обновлено: 2023-12-21 08:16:20.747482
function tinymce_config_init() {
    return {
        selector: '',
        height: 400,
        language: 'ru',
        plugins: 'anchor autolink charmap code directionality fullscreen image importcss link lists media pagebreak preview save searchreplace table visualblocks visualchars',
        toolbar: 'code | undo redo | styles blocks | bold italic underline strikethrough removeformat | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | fullscreen | link image anchor charmap',

        font_family_formats: 'Liberation Sans=Liberation Sans; Mono=Liberation Mono;',
        formats: {
            img: { selector: 'img', classes: 'img-thumbnail', styles: {} },
            paragraph: { selector: 'p,h1,h2,h3,h4,h5,h6', classes: '', styles: {} },
            table: { selector: 'table', classes: 'table', styles: {} },
            note: { classes: 'alert alert-primary', styles: {} },
            danger: { classes: 'alert alert-danger', styles: {} },
            bold: [
                { inline: 'strong', remove: 'all' },
                { inline: 'span', remove: 'all' },
                { inline: 'b', remove: 'all' }
            ],
        },
        style_formats: [
            { title: 'Картинка', selector: 'img', format: 'img' },
            // { title: 'Абзац', format: 'paragraph' }, // С этим не работает список стилей
            { title: 'Таблица', selector: 'table', format: 'table' },
            { title: 'Примечание', format: 'note' },
            { title: 'Внимание', format: 'danger' },
        ],
        content_css: '/static/css/tinymce-code.css',
        relative_urls: false,
        convert_urls: false,
        // Table
        table_default_attributes: {},
        table_default_styles: {},
        table_class_list: [
            {title: 'default', value: 'table'},
            {title: 'None', value: ''},
        ],
        setup: function(ed) {
            ed.on('change', function(e) {
                console.log('the event object ', e);
                console.log('the editor object ', ed);
                console.log('the content ', ed.getContent());
            });
        },
    };
}
function PageAdd() {
    let data = {
        page: {
            content: ''
        },
  };
    function editor_events(ed) {
        ed.on('change', function(e) {
            data.page.content = ed.getContent();
        });
    };
  return {
        oncreate(vnode) {
          console.log('PageEdit.oncreate');
           tinymce_config = tinymce_config_init();
          tinymce_config.selector = '#page_content';
          tinymce_config.setup = editor_events;
          tinymce.init(tinymce_config).then(
              function(editors) {
                  data.editor = editors[0];
              }
          );
           tinymce_init();
        },
        onbeforeremove: function(vnode) {
            console.log('PageEdit.onbeforeremove');
            data.editor.remove();
            data.editor = null;
        },
       view: function(vnode) {
            let result = [];
            result.push([
                m('div', {class: 'form-group mb-2'}, [
                    m('label', {class: 'form-label'}, 'Текст'),
                    m('textarea', {class: 'form-control', cols: '40', rows: '8', id: 'page_content', oninput: function (e) {data.page.content = e.target.value}, value: data.page.content})
                ]),
            ]);
            return result
        }
    }
}

Возможно будут интересны и другие вопросы