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

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

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


Метки: codemirror mithril.js javascript 

Ответы

RemiZOffAlex  Создано: 2023-01-09 04:39:55.769449  Обновлено: 2023-06-20 23:11:26.838028
function PageSource() {
    let data = {
        page: null,
        editor: null,
    };
    function page_get(id) {
        m.request({
            url: '/api',
            method: "POST",
            body: {
                "jsonrpc": "2.0",
                "method": 'page',
                "params": {
                    "id": id,
                    "fields": ["id", "title", "typeOf", "content"]
                },
                "id": 1
            }
        }).then(
            function(result) {
                if ('result' in result) {
                    data.page = result['result'];
                }
            }
        );
    };
    function page_update() {
      m.request({
            url: '/api',
            method: "POST",
            body: {
                "jsonrpc": "2.0",
                "method": 'page.update',
                "params": {
                    "id": data.page.id,
                    "title": data.page.title,
                    "typeOf": data.page.typeOf,
                    "content": data.page.content
                },
                "id": 1
            }
        }).then(
            function(result) {
                if ('result' in result) {
                    m.route.set(`/page/${result['result'].id}`);
                }
            }
        );
    };
    function editor_init() {
        let vCode = document.getElementById('page_content');
        const {EditorState} = CM["@codemirror/state"];
        const {basicSetup, EditorView} = CM["codemirror"];

        data.editor = {};
        data.editor.state = EditorState.create({
            doc: data.page.content,
            extensions: [
                basicSetup,
                EditorView.updateListener.of(function(e) {
                    data.page.content = e.state.doc.toString();
                })
            ]
        });
        data.editor.view = new EditorView({
            state: data.editor.state,
            parent: vCode
        });
    };
    function editor_remove() {
        data.editor = null;
    };
    return {
        oncreate(vnode) {
            console.log('PageSource.oncreate');
            if (data.page!=null) {
                console.log(data.page);
                editor_init();
            }
        },
        onbeforeremove: function(vnode) {
            console.log('PageSource.onbeforeremove');
            editor_remove();
        },
        oninit: function(vnode) {
            console.log('PageSource.oninit');
            page_get(vnode.attrs.id);
        },
        onupdate(vnode) {
            console.log('PageSource.onupdate');
            console.log(vnode);
            if (data.page!=null) {
                if (data.editor==null) {
                    console.log(data.page);
                    editor_init();
                }
            }
        },
        view: function(vnode) {
            let result = [];
            if (data.page!=null) {
                result.push([
                    m('div', {class: 'row'},
                        m('div', {class: 'col h1 py-1'}, [
                          m(m.route.Link, {class: "btn btn-outline-secondary btn-lg me-2", href: `/page/${data.page.id}`, title: "Список пользователей"}, m('i', {class: 'fa fa-chevron-left'})),
                          'Редактирование статьи'
                      ])
                    ),
m('hr'),
                    m('div', {class: 'row'},
                        m('div', {class: 'col py-2'}, [
                            m('button', {class: 'btn btn-outline-success float-end', type: 'button', onclick: page_update}, [m('i', {class: 'fa fa-save'}), ' Сохранить']),
                        ])
                    ),
                    m('div', {class: 'form-group mb-2'}, [
                        m('label', {class: 'form-label'}, 'Текст'),
                        m('div', {id: 'page_content'})
                    ]),
                    m('div', {class: 'row'},
                        m('div', {class: 'col py-2'}, [
                            m('button', {class: 'btn btn-outline-success float-end', type: 'button', onclick: page_update}, [m('i', {class: 'fa fa-save'}), ' Сохранить']),
                        ])
                    ),
                ]);
            };
            return result
        }
    }
};

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