牛骨文教育服务平台(让学习变的简单)

如何避免与项目中的css冲突

有使用者在使用过程中反应编辑器的css和项目中的css会有冲突,导致编辑器的样式被覆盖而显示异常。这里说一个解决样式冲突的方法,不过需要使用者手动调整一下代码。


需要下载v2.0.18.1或者以后的版本

首先,你需要改动一下你的html文件,在编辑器的外面包一层有id的父容器,如下:

<!--在编辑器的外面包一层有id的父容器-->
<div id="editor-container">

    <!--用 div1 生成编辑器-->
    <div id="div1">
        <p>请输入内容...</p>
    </div>

</div>

然后,在下载的代码中找到dist目录的wangEditor.less文件,打开,在该文件的最上方和最下方加上如下代码:

/* 在 wangEditor.less 文件的最上方加上下一行代码 */
#editor-container {

/* 此处是 wangEditor.less 原有的代码 */
....

/* 在 wangEditor.less 文件的最下方加上下一行代码 */
}

保存,然后将这个less文件重新编译为css,然后引入到页面中就行了。

PS:不了解如何将less编译为css的同学,其实方法很简单。百度搜索『less在线编译』就有会很多在线的工具可一键编译,使用很方便


最后,如果上一步操作还是不能解决冲突,那你就在编辑器editor-container便签外面再加一层带id的父容器,然后将该id再写入less文件中,用两个id做选择器。还不行,再加。

不过一般情况下,只加上述的第一个父容器就可解决问题。