这个编辑器app端、H5端、小程序端都可以用，这里以小程序为例。
先上效果图，文本编辑、样式调整、图片上传等各项功能皆可满足。
一、整体介绍
使用富文本编辑并且可以渲染内容这个功能，主要涉及到两个页面。
①触发编辑的页面(按钮+接收富文本内容)②编辑器页面(效果图页面)
二、完整代码
页面①：
写一个按钮点击事件跳转到编辑器页面（这部分代码很简单就不展示了）
接收富文本内容的代码如下，
// 接收富文本
uni.$on('getContents', data => {
console.log("接收到的内容：", data); // 输出接收到的内容
});可以在页面初始化的时候接收富文本内容，我是放在生命周期created()阶段进行接收的。接收到的data可以自定义变量进行赋值，想在哪里展示都可以。
页面②：
比较重要的是，在失去焦点的时候，触发的方法。也是在这里获取富文本内容
// 获取富文本编辑器的内容
uni.$emit('getContents', res)为了方便回显，可以将富文本内容缓存一下。然后再次进入编辑器页面的时候，获取一下缓存就可以回显了，但是要及时清除上一次的缓存（需要的时候要在页面①清除）
// 存储富文本内容 方便下次显示
wx.setStorageSync('getContents', res);
//获取缓存的内容
var lastContent = wx.getStorageSync('getContents');
//移除富文本缓存内容
wx.removeStorageSync('getContents')重点！！！下面是编辑器的完整代码：
<template>
<view class="container">
<view class="page-body">
<view class='wrapper'>
<view class='toolbar' @tap="format">
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
</view>
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
</view>
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
data-name="underline"></view>
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
data-name="strike"></view>
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
data-name="align" data-value="left"></view>
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
data-name="align" data-value="center"></view>
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
data-name="align" data-value="right"></view>
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
data-name="align" data-value="justify"></view>
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
data-name="lineHeight" data-value="2"></view>
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
data-name="letterSpacing" data-value="2em"></view>
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
data-name="marginTop" data-value="20px"></view>
<view :class="formats.previewarginBottom ? 'ql-active' : ''"
class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px"></view>
<!-- <view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
data-name="fontFamily" data-value="Pacifico"></view> -->
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
data-name="fontSize" data-value="24px"></view>
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
data-name="color" data-value="#0000ff"></view>
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
data-name="list" data-value="ordered"></view>
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
data-name="list" data-value="bullet"></view>
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
data-name="header" :data-value="1"></view>
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
data-name="script" data-value="sub"></view>
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
data-name="script" data-value="super"></view>
<!-- <view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
data-name="direction" data-value="rtl"></view> -->
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
<!-- <view class="iconfont icon-clearedformat" @tap="removeFormat"></view> -->
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
<view class="iconfont icon-date" @tap="insertDate"></view>
<view class="iconfont icon-shanchu" @tap="clear"></view>
<view class="iconfont icon-undo" @tap="undo"></view>
<view class="iconfont icon-redo" @tap="redo"></view>
</view>
<editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize
@statuschange="onStatusChange" :read-only="false" @ready="onEditorReady" @input="getContents">
</editor>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
formats: {},
timer: null,
editorDetail: "",
}
},
mounted() {
this.onEditorReady();
console.log('-------------this',this)
// 将数据渲染到富文本内
this.timer = setInterval(() => {
if (this.editorDetail) {
clearInterval(this.timer)
//延时0.5秒 方便接收缓存的上次内容
setTimeout(res => {
this.editorCtx.setContents({
html: this.editorDetail,
success(res) {
console.log('--------',res);
}
})
},500)
}
}, 100)
},
created() {
//获取缓存的内容
var lastContent = wx.getStorageSync('getContents');
if (lastContent && lastContent.html) {
this.editorDetail = lastContent.html
}
},
methods: {
// 失去焦点时触发，获取富文本的内容
getContents() {
let _this = this
this.editorCtx.getContents({
success(res) {
// let content = res;
// 获取富文本编辑器的内容
uni.$emit('getContents', res)
// 存储富文本内容 方便下次显示
wx.setStorageSync('getContents', res);
}
})
},
//编辑框初始化时触发
onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context;
}).exec()
},
//撤销
undo() {
this.editorCtx.undo()
},
//恢复
redo() {
this.editorCtx.redo()
},
format(e) {
let {
name,
value
} = e.target.dataset
if (!name) return
this.editorCtx.format(name, value)
},
//通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
onStatusChange(e) {
this.formats = e.detail
console.log(e);
},
//插入分隔符
insertDivider() {
this.editorCtx.insertDivider({
success: function() {
console.log('insert divider success')
}
})
},
//清空全部内容
clear() {
this.editorCtx.clear({
success: function(res) {
console.log("clear success")
}
})
},
//清除样式
removeFormat() {
this.editorCtx.removeFormat()
},
//插入当前日期
insertDate() {
const date = new Date()
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
this.editorCtx.insertText({
text: formatDate
})
},
//插入图片
insertImage() {
uni.chooseImage({
count: 1,
success: (res) => {
let file = res.tempFiles[0]
var img = {
fgn: file.path.substring(file.path.lastIndexOf('/')+1)
}
uni.uploadFile({
url: "url", //你的图片上传接口
filePath: file.path, // 随便填，不为空即可
name: 'img', // 随便填，不为空即可
// header: header, // 可以加access_token等
formData: img, // 接口参数，json格式，底层自动转为FormData的格式数据
success: (res)=>{
this.editorCtx.insertImage({
src: JSON.parse(res.data).data.src,
alt: '图像',
success: function() {
console.log('insert image success')
}
})
}
})
}
})
}
},
}
</script>
<style>
@import '@/style/editor-icon.css';
.wrapper {
padding: 5px;
}
.iconfont {
display: inline-block;
padding: 15px;
width: 24px;
height: 24px;
cursor: pointer;
font-size: 20px;
}
.toolbar {
box-sizing: border-box;
border-bottom: 0;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
background-color: #ffffff;
position: -webkit-sticky;
position: sticky;
top: var(--window-top);
z-index: 99;
height: 95px;
}
.ql-container {
box-sizing: border-box;
padding: 12px 15px;
width: 100%;
min-height: 30vh;
height: auto;
background: #fff;
margin-top: 10px;
font-size: 16px;
line-height: 1.5;
}
.ql-active {
color: #06c;
}
</style>