有使用者在使用过程中反应编辑器的css和项目中的css会有冲突,导致编辑器的样式被覆盖而显示异常。这里说一个解决样式冲突的方法,不过需要使用者手动调整一下代码。
---
**需要下载`v2.0.18.1`或者以后的版本**
首先,你需要改动一下你的`html`文件,在编辑器的外面包一层有`id`的父容器,如下:
```html
<!--在编辑器的外面包一层有id的父容器-->
<div id="editor-container">
<!--用 div1 生成编辑器-->
<div id="div1">
<p>请输入内容...</p>
</div>
</div>
```
然后,在下载的代码中找到`dist`目录的`wangEditor.less`文件,打开,在该文件的最上方和最下方加上如下代码:
```css
/* 在 wangEditor.less 文件的最上方加上下一行代码 */
#editor-container {
/* 此处是 wangEditor.less 原有的代码 */
....
/* 在 wangEditor.less 文件的最下方加上下一行代码 */
}
```
保存,然后将这个`less`文件重新编译为`css`,然后引入到页面中就行了。
**PS:不了解如何将`less`编译为`css`的同学,其实方法很简单。百度搜索『less在线编译』就有会很多在线的工具可一键编译,使用很方便**
----
最后,如果上一步操作还是不能解决冲突,那你就在编辑器`editor-container`便签外面再加一层带`id`的父容器,然后将该`id`再写入`less`文件中,用两个`id`做选择器。还不行,再加。
不过一般情况下,只加上述的第一个父容器就可解决问题。
- 关于wangEditor
- 遇到问题如何解决和提问【重要】
- 开始使用
- 下载
- 创建页面
- 生成编辑器(使用ID)
- 生成编辑器(使用element)
- 调整尺寸
- 销毁与恢复
- 一个页面多个编辑器
- 内容处理
- 初始化内容
- 获取内容
- 追加内容
- 清空内容
- 用 editor.$txt 做其他内容处理
- onchange事件
- 禁用/启用
- 参数配置
- 自定义菜单
- 自定义颜色、字体、字号
- 自定义表情
- 切换语言
- 百度地图key
- 菜单栏吸顶
- 配置全屏的z-index
- 关闭浏览器打印log
- 关闭过滤javascript
- 关闭粘贴过滤样式
- 只粘贴纯文本
- 插入代码-配置默认语言
- 自定义编辑器样式
- 自定义颜色
- 自定义菜单UI
- 自定义表格、引用、代码的样式
- 代码高亮样式
- 图片上传
- 使用前必读
- 支持情况
- 配置说明
- log提示辅助排错
- 后台代码示例
- C#
- java - 例1
- java - 例2
- php
- nodejs
- python
- 自定义上传事件
- 集成plupload插件
- 集成七牛云存储
- 跨域上传
- 上传图片出错时的解决步骤
- 使用模块定义
- 使用require.js
- 使用seajs
- 使用webpack
- 插件开发
- 对象结构
- 常用API
- 全局API
- 对象API
- 基础API
- 选区API
- 命令API
- 扩展一个菜单
- 『缩进』菜单
- 『行高』菜单
- 『插入符号』菜单
- 开发一个插件
- 常见问题
- 关于markdown
- 关于上传附件
- 关于背景图片
- 关于显示压缩图片
- 集成到React
- 集成到angular
- 集成到vue.js
- 如何避免与项目中的css冲突
- xss过滤
- 如何插入视频链接
- 关于mobile端编辑器
- 查看源码第一行有空格