有几位使用者提到在编辑其中增加背景图片的功能,经过思考和参考其他成熟产品,觉得背景图片并不适合在编辑器中直接集成。
编辑器本身要保证编辑出来的内容的纯粹行,能在编辑器外面控制的东西,尽量在外面控制,例如上传附件(上面的章节提到过这个问题)。从设计原则和设计模式上,也提倡这种单一职责和开放封闭,这样才能保证系统的可扩展性。
-----
实现背景图片,你完全可以参考QQ邮箱的『信纸』功能。如下图:
![](https://box.kancloud.cn/2016-02-28_56d26e28e647e.png)
编辑器内容使用编辑器单独控制,而信纸在右侧单独控制。当保存内容时,富文本内容单独保存,信纸的图片地址也单独保存。显示内容时,用一个容器包含富文本,然后在容器上单独加上保存的信纸图片(作为背景图片)即可。
这是大体的过程。
----
还剩下一个问题,就是在编辑内容时,选择了信纸,如何立即让信纸作为背景图片成现在编辑区域?这个其实很简单:
```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端编辑器
- 查看源码第一行有空格