🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
wangEditor支持一个页面创建多个编辑器,代码如下。详细代码可参考 https://github.com/wangfupeng1988/wangEditor/blob/master/test/test-muti.html ```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> ``` ----- 注意以上代码中的这个片段 ```javascript // 避免上面编辑器的 dropPanel 被下面的编辑器遮挡,保证下面的编辑器的 z-index 要小于上面的编辑器 editor1.$editorContainer.css('z-index', 20) editor2.$editorContainer.css('z-index', 10) ``` 如果不加上,会出现以下截图中的错误: ![](https://box.kancloud.cn/2016-06-18_5764f2abbbc04.png) ---- **另外,目前不支持一个页面多个编辑器的情况下使用『地图』,浏览器的 console.log 中会出现如下提示:** ![](https://box.kancloud.cn/2016-06-18_5764f2abe4f91.png)