Javascript 跨多个编辑器共享卷线工具栏
有了这个很棒的Javascript富文本编辑器,我试图让两个或更多的编辑器共享同一个工具栏 我认为(从中)目前还不可能做到这一点,因此我试图通过在编辑器上添加工具栏模块(通过API)来“模拟”这一点,该编辑器已被单击为后者:Javascript 跨多个编辑器共享卷线工具栏,javascript,toolbar,rich-text-editor,quill,Javascript,Toolbar,Rich Text Editor,Quill,有了这个很棒的Javascript富文本编辑器,我试图让两个或更多的编辑器共享同一个工具栏 我认为(从中)目前还不可能做到这一点,因此我试图通过在编辑器上添加工具栏模块(通过API)来“模拟”这一点,该编辑器已被单击为后者: // this uses jQuery $editorTag.click(function(e){ var tag = e.target; var editor = getEditorByTag(tag); if( editor )
// this uses jQuery
$editorTag.click(function(e){
var tag = e.target;
var editor = getEditorByTag(tag);
if( editor )
editor.addModule('toolbar',{container:'#toolbar'});
});
这似乎可行,但我怀疑Quill不喜欢在同一对象上反复多次添加同一模块,因为它最终会吐出:
(节点)警告:检测到可能的EventEmitter内存泄漏。11
听众补充道。使用emitter.setMaxListeners()增加限制。
quill.js(第4727行)
那么,有没有办法删除先前添加的模块?比如:
// installs editor
var editor = new Quill('#editor');
// adds toolbar module
editor.addModule('toolbar',{container:'#toolbar'});
// removes just added toolbar module
editor.removeModule('toolbar');
前几天我遇到了同样的问题,并且找到了一个适合我们用例的解决方案。这基本上就是我所做的: 我正在使用自定义工具栏创建一个Quill实例 在顶端。编辑器元素被放置在一个临时的、隐藏的, 容器。当用户双击三个文本中的任意一个时 容器(Editables),编辑器元素将被移植到表单中 将临时容器添加到可编辑容器内的新位置。如果 用户点击escape键,可编辑项将被停用,移动 编辑器元素返回到临时容器 您可以在此处进行测试: GitHub回购:
您可以随意使用代码。一个保存毛笔历史记录的解决方案是扩展工具栏并注册它的模块
class ToolbarAlt extends Toolbar {
resetToolbar () {
this.container.childNodes.forEach(el => {
const clone = el.cloneNode(true);
el.parentNode.replaceChild(clone, el);
});
this.container.childNodes.forEach((input) => {
this.attach(input);
}, this);
}
}
Quill.register('modules/toolbar', ToolbarAlt, true);
然后在一个编辑器中聚焦时,使用quill.getModule(“Toolbar”)调用工具栏Ok,在同一个工具栏上多次调用addModule()会完全搞乱事件:由于安装了多个事件,应用了多个事件,因此,Quill开始循环,交替地将工具栏格式命令永远应用于选定内容。完全需要一种方法来解除武装的工具栏在愿意!“你找到解决这个问题的办法了吗?”丹还是没有。我现在申请的是一个解决方法:我一次使用一个编辑器,在创建新编辑器时,我使用未记录的Quill对象上的“destroy”方法销毁旧编辑器,以便分离所有内容。哦,我还使用jQuery重新创建了工具栏HTML,但出于其他原因(关于样式和函数附件)。无论如何,仍然没有解除武装的方法。我只是希望Quill开发人员不要放弃,因为这个项目太棒了。你能详细说明一下吗?因为我不知道在quill.getModule(“工具栏”)之后要做什么。