有使用者在使用過程中反應編輯器的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端編輯器
- 查看源碼第一行有空格