javascript - 启用代码 View 时无法调用 editor.insertText

Question

我在 summernote 工具栏中启用了 codeview。

以及自定义菜单的代码(用于将自定义参数插入编辑器):

let event = ui.buttonGroup([
    ui.button({
        contents: '<span>Custom parameters</span> <span class="note-icon-caret"></span>',
        tooltip: 'Custom parameters',
        className: 'btn-codeview', // <== this is just to not disable the menu when codeview is enabled
        data: {
            toggle: 'dropdown'
        }
    }),
    ui.dropdown({
        items: ['one', 'two'],
        callback: (items) => {
            $(items).find('li a').on('click', (e) => {
                context.invoke('editor.insertText', ` ${e.target.innerText} `);
                e.preventDefault();
            })
        }
    })
]);

当代码 View 被禁用时(在编辑器中粘贴我的自定义 one 和 two 参数)，它工作正常，但是当我启用 codeview 和单击我的菜单项，它不会插入任何内容。

调用以下代码片段，但没有任何反应:

context.invoke('editor.insertText', ` ${e.target.innerText} `); 

启用代码 View 时如何插入自定义参数？

<小时/>

UPD:这个想法是在工具栏中有一个按钮，可以在没有 HTML 的情况下切换简单文本模式，并提供可用菜单(在编辑器中插入自定义单词)。

Answer 1

您可以采取一些解决方法来完成此任务，因为 summernote 不提供以编程方式“刷新”最终 textarea 的默认方法。

1)快速禁用/启用代码 View

var codeviewOn = false; // global var

$(items).find('li a').on('click', (e) => {
    // Check if the editor for code is activated
    codeviewOn = $('#summernote').summernote('codeview.isActivated');
    // ... deactivate it for awhile
    if (codeviewOn)
      $('#summernote').summernote('codeview.deactivate');

    // insert the text
    context.invoke('editor.insertText', e.target.innerText + " ");

    // ... and activate it again
    if (codeviewOn)
      $('#summernote').summernote('codeview.activate');

    e.preventDefault();
});

2)直接更新最终的textarea

$(items).find('li a').on('click', (e) => {
    var codeviewOn = $('#summernote').summernote('codeview.isActivated');

    // always insert the text, so this will update the hidden .note-editable div
    context.invoke('editor.insertText', e.target.innerText + " ");

    // and update the codable textarea value directly with the editable html
    if (codeviewOn)
        $('.note-codable')[0].value = $('.note-editable').html(); // The [0] is getting the first texarea, so be careful if you have more than one.

    e.preventDefault();
})

查看最后一个选项的 JSFiddle:https://jsfiddle.net/3b93w1L3/