Summernote - 多个编辑器实例上的自定义按钮

Posted

技术标签:

【中文标题】Summernote - 多个编辑器实例上的自定义按钮【英文标题】:Summernote - Custom Button on multiple Editor Instances 【发布时间】:2021-12-05 08:46:37 【问题描述】:

我在 Summernote 中有一个自定义按钮,它按预期工作。 问题是,它同时适用于所有实例化的编辑器。

为了更好地重建问题: 我有一个按钮,当我单击它时,会初始化一个新的编辑器。 我正在制作 2 个编辑器。 我单击其中 1 个并通过我的自定义按钮向其中添加文本 -> 作品。

我单击第二个实例并通过我的自定义按钮向其中添加文本: 文本被添加到两个编辑器中。

var HelloButton = function (context) 
        var ui = $.summernote.ui;

        // create button
        var button = ui.button(
            contents: '<i class="fa fa-child"/> Hello',
            tooltip: 'hello',
            click: function () 
                   context.invoke('editor.insertText', myCat);
                );
            
        );

        return button.render();   // return button as jquery object
    

任何帮助表示赞赏,谢谢!

【问题讨论】:

【参考方案1】:

你是如何实例化你的夏季笔记编辑器的?您是通过类 ID 还是名称 html 属性创建它们?使每个输入不同应该可以解决您的问题。

<div class ="form-group">
<label for="inputA"> Input A </label>
<textarea class="textarea-inputA" id="inputA" name="inputA" />
<span validationfor="inputA">
</div>



<div class ="form-group">
<label for="inputB"> Input B </label>
<textarea class="textarea-inputA" id="inputB" name="inputB" />
<span validationfor="inputB">
</div>

然后在每个选择上调用 summernote() 您之前激活控件的方式。

【讨论】:

谢谢!这可能是我的问题,目前所有 .text-classes 都将成为 Summernote 编辑器。我会尝试您的解决方案并通知您。 谢谢,我为所有summernote-fields添加了一个ID,这解决了我的问题!编辑:不知何故,upvote 不起作用,或者需要一段时间,我不知道。

以上是关于Summernote - 多个编辑器实例上的自定义按钮的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Summernote 自定义按钮功能

使用自定义样式将外部元素拖放到summernote编辑器

将上传的图片插入summernote编辑器

实践简洁大方的summernote 富文本编辑器插件的用发——实例篇

一页中的多个 Summernote 所见即所得编辑器具有相同的占位符

Summernote 工具栏自定义问题