Question

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

以及自定义菜单的代码（用于将自定义参数插入编辑器）：

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();
            })
        }
    })
]);

在禁用代码视图时（在编辑器中粘贴我的自定义one和two参数），它可以正常运行，但是当我启用codeview并单击我的菜单项时，它不会插入任何东西。

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

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

如何在启用codeview时插入自定义参数？

UPD：我们的想法是在工具栏中设置一个按钮，在没有HTML的情况下切换简单文本模式并提供菜单（在编辑器中插入自定义单词）。

Answer 1

您可以通过几种解决方法来完成它，因为summernote没有提供默认的方式来刷新＆＃34;最终textarea以编程方式。

1）快速停用/启用codeview

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/

启用codeview时无法调用editor.insertText

1 个答案: