有幾位使用者提到在編輯其中增加背景圖片的功能,經過思考和參考其他成熟產品,覺得背景圖片并不適合在編輯器中直接集成。
編輯器本身要保證編輯出來的內容的純粹行,能在編輯器外面控制的東西,盡量在外面控制,例如上傳附件(上面的章節提到過這個問題)。從設計原則和設計模式上,也提倡這種單一職責和開放封閉,這樣才能保證系統的可擴展性。
-----
實現背景圖片,你完全可以參考QQ郵箱的『信紙』功能。如下圖:

編輯器內容使用編輯器單獨控制,而信紙在右側單獨控制。當保存內容時,富文本內容單獨保存,信紙的圖片地址也單獨保存。顯示內容時,用一個容器包含富文本,然后在容器上單獨加上保存的信紙圖片(作為背景圖片)即可。
這是大體的過程。
----
還剩下一個問題,就是在編輯內容時,選擇了信紙,如何立即讓信紙作為背景圖片成現在編輯區域?這個其實很簡單:
```js
// 選擇了信紙之后,執行以下語句
editor.$txt.css('background-img', 'url(./bgimg/a.png)');
```
至于其他的`background`樣式,自己在以上語句中自由控制即可。
但是注意:以上語句為`editor.$txt`設置了背景圖片,是不會作為編輯器內容被獲取的,信紙還得單獨保存。
- 關于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端編輯器
- 查看源碼第一行有空格