一个页面多个编辑器

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 中会出现如下提示:

文章导航