Javascript 所见即所得多输入(jQuery插件)
我有一个需要两个富文本编辑器的页面,所以我选择了所见即所得(WYSIWYG)。除了一个令人讨厌的小细节,它们工作得很好。当我单击粗体、斜体或缩进按钮时,它适用于两个RTE,并聚焦于第二个输入。我不太明白如何将工具栏彼此分开 HTML:Javascript 所见即所得多输入(jQuery插件),javascript,jquery,html,twitter-bootstrap,bootstrap-wysiwyg,Javascript,Jquery,Html,Twitter Bootstrap,Bootstrap Wysiwyg,我有一个需要两个富文本编辑器的页面,所以我选择了所见即所得(WYSIWYG)。除了一个令人讨厌的小细节,它们工作得很好。当我单击粗体、斜体或缩进按钮时,它适用于两个RTE,并聚焦于第二个输入。我不太明白如何将工具栏彼此分开 HTML: 没有尝试过,但您是否尝试过将所见即所得初始化分离 $(function() { $("#definition").wysiwyg(); $("#consent").wysiwyg(); }) 本打算只是发表评论,但时间太长了 如果它与我的WYSI
没有尝试过,但您是否尝试过将所见即所得初始化分离
$(function() {
$("#definition").wysiwyg();
$("#consent").wysiwyg();
})
本打算只是发表评论,但时间太长了
如果它与我的WYSIWYG编辑器类似,那是因为系统设置为使用一个容器。即使您添加了两个项目,也会对这两个项目执行相同的操作。解决这个问题的唯一方法是创建两个单独的页面并将它们放在同一个页面上(通过无缝iFrame,可能是AJAX)
请注意,我不知道这个特定的编辑器是如何工作的,但它看起来与后端的工作原理非常相似(即,这些数据属性与我一样包含相关的
execCommand()
参数)。经过一段时间的研究,答案非常简单。阅读源代码,您将看到它有一个工具栏选择器:
toolbarSelector: '[data-role=editor-toolbar]',
因此,您必须使用一个唯一的数据角色来覆盖它,如下所示:
$("#consent").wysiwyg({ toolbarSelector: '[data-role=editor2-toolbar]'} );
确保更改数据角色
以匹配新的选择器
toolbarSelector: '[data-role=editor-toolbar]',
$("#consent").wysiwyg({ toolbarSelector: '[data-role=editor2-toolbar]'} );