近期做的一个项目中，需要能够让用户在移动端进行富文本编辑。

但翻遍全网也没找到一个合适的组件，要么太重、要么又重又老。

但实际上用户在手机上进行富文本编辑时，对功能的要求本身就不高，再加上本身产品对发布的内容也很克制，所以最终确定只提供插入图片、视频两个功能、更大字号、斜体、下划线、加粗这几种样式和左中右三种排版。

画完原型图，大概就是这个样子。

细化功能之后，发现实际上uni-app自带的editor组件就可以改造一下，
下边来看看editor组件的官方说明：

富文本编辑器，可以对图片、文字格式进行编辑和混排。
在web开发时，可以使用contenteditable来实现内容编辑。但这是一个dom API，在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了editor组件来实现这个功能，并且在uni-app的H5平台也提供了兼容。从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的contenteditable功能。
编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。
通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在应用内使用时通过 delta 进行插入。

以上可以看出，这个组件可以实现解析html的部分标签，详细列表如下图：

根据我们自己的需要，这里只取h3、b、ins、em这几个标签来实现更大字号、加粗、下划线和斜体。

另外，还支持以下这些内联样式：

好了，我们开始改造：

首先，先在template内部新建这个组件，@ready表示组件加载完后的方法，

template:
<editor
	id="editor"
	class="ql-container"
	:show-img-size="true" // 点击图片后可显示删除按钮
	:show-img-toolbar="true" // 点击图片后可显示工具栏
	:show-img-resize="true" // 点击图片后可显示缩放功能
	@ready="onEditorReady"
	@statuschange="statusChange" // 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
	placeholder="提示文字" // 默认斜体
></editor>

methods: 
// @ready
onEditorReady(e) {
	uni.createSelectorQuery()
		.in(this)
		.select('.ql-container')
		.fields(
			{
				size: true,
				context: true
			},
			res => {
				this.editorCtx = res.context;
				this.editorCtx.setContents({
					html: this.html
				});
			}
		)
		.exec();
},

初始化完成之后，我们需要设置一些功能，先从插入图片开始。

methods：
// 选择图片
selectImages() {
	let image;
	let that=this;
	uni.chooseImage({
		count: 1, // 限制1次只能选择1张
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album'], //从相册选择
		success: function(res) {
			image = res.tempFilePaths[0];
			// 上传完成后插入到内容中
			that.editorCtx.insertImage({
				src: image, // 此处实际需要先上传到服务器，获得真实地址后再插入到编辑器中，否则需要发布到后台时自行过滤、替换
				alt: '图片',
				success: function(e) {}
			});
		}
	});
},

下边是插入图片、点击后的效果，
默认最大宽度、四角可以拖动缩放，中间有删除按钮；

插入视频这个功能暂时还没梳理清楚，
由于editor不支持直接插入视频，建议是如下逻辑：
1.限制只能上传1条视频，上传后截取第一帧为封面图；
2.插入封面图占位，并给一个自定义的标识方便后续替换；
3.富文本渲染时替换占位图、插入视频。

继续说其他功能，以加粗为例：

methods:
// 粗体
setBold() {
	this.editorCtx.format('bold');
},

再来看看字号设置：

methods:
// 设置选中内容为H3号标题
setHeader() {
	that.editorCtx.format('header','H3');
},

排版;

methods:
// 三个排版
setLeft() {
	this.textFormat.align = 'left';
	this.editorCtx.format('align', this.textFormat.align == 'left' ? 'left' : false);
},
setCenter() {
	this.textFormat.align = 'center';
	this.editorCtx.format('align', this.textFormat.align == 'center' ? 'center' : false);
},
setRight() {
	this.textFormat.align = 'right';
	this.editorCtx.format('align', this.textFormat.align == 'right' ? 'right' : false);
},

以上就完成了代码部分，自己设计一个工具栏、引入这些方法即可。