wangEditor支持一个页面创建多个编辑器,代码如下。详细代码可参考 https://github.com/wangfupeng1988/wangEditor/blob/master/test/test-muti.html
<div id="div1">
<h3>标题标题1</h3>
<p>请输入内容111</p>
<p><a href="#">链接链接1</a></p>
</div>
<p>------- 分割线 -------</p>
<div id="div2">
<h3>标题标题2</h3>
<p>请输入内容222</p>
<p><a href="#">链接链接2</a></p>
</div>
<!--此处自行调整jquery.js和wangEditor.js的目录-->
<script type="text/javascript" src="../dist/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../dist/js/wangEditor.js"></script>
<script type="text/javascript">
$(function () {
var editor1 = new wangEditor("div1");
var editor2 = new wangEditor("div2");
editor1.create();
editor2.create();
// 避免上面编辑器的 dropPanel 被下面的编辑器遮挡,保证下面的编辑器的 z-index 要小于上面的编辑器
editor1.$editorContainer.css("z-index", 20)
editor2.$editorContainer.css("z-index", 10)
});
</script>
注意以上代码中的这个片段
// 避免上面编辑器的 dropPanel 被下面的编辑器遮挡,保证下面的编辑器的 z-index 要小于上面的编辑器
editor1.$editorContainer.css("z-index", 20)
editor2.$editorContainer.css("z-index", 10)
如果不加上,会出现以下截图中的错误:
另外,目前不支持一个页面多个编辑器的情况下使用『地图』,浏览器的 console.log 中会出现如下提示: