启用 codeview 时无法调用 editor.insertText

Posted 2023-03-22

【中文标题】启用 codeview 时无法调用 editor.insertText

【英文标题】：Can't invoke editor.insertText when codeview is enabled

【发布时间】：2017-05-10 20:37:22

【问题描述】：

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

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

下面的sn-p被调用了，但是什么也没发生：

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

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

---

UPD：这个想法是在工具栏中有一个按钮，可以切换没有 html 的简单文本模式，并有可用的菜单（在编辑器中插入自定义单词）。

【问题讨论】：

This might help you refer this link's answer

【参考方案1】：

您可以采取一些变通方法来完成它，因为summernote 不提供以编程方式“刷新”最终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/

【讨论】：

谢谢！但是这两种方法都添加了 P 标签，丢失了光标并且不在原始光标位置之后插入（