在uni-app中开发富文本输入功能，并使其兼容微信小程序，需要注意一些特定的限制和解决方案。由于微信小程序本身对HTML的支持有限，直接在小程序中实现像Web那样完整的富文本编辑功能（如使用CKEditor、Quill等）是不可能的。但你可以通过一些方法来实现基本的富文本输入或近似功能。
富文本编辑器，可以对图片、文字格式进行编辑和混排。
在web开发时，可以使用contenteditable来实现内容编辑。但这是一个dom API，在非H5平台无法使用。于是微信小程序和uni-app的App-vue提供了editor组件来实现这个功能，并且在uni-app的H5平台也提供了兼容。从技术本质来讲，这个组件仍然运行在视图层webview中，利用的也是浏览器的contenteditable功能。
编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。
通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在应用内使用时通过 delta 进行插入。
组件扩展
<template>
<view class="diygw-col-24">
<view :style="{height:height}" class='flex flex-direction-column wrapper'>
<view class='toolbar' @tap="format">
<view v-if="tools.indexOf('undo')>-1" class="iconfont icon-undo" @tap="undo"></view>
<view v-if="tools.indexOf('redo')>-1" class="iconfont icon-redo" @tap="redo"></view>
<view v-if="tools.indexOf('bold')>-1" :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
<view v-if="tools.indexOf('italic')>-1" :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
<view v-if="tools.indexOf('underline')>-1" :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
<view v-if="tools.indexOf('strike')>-1" :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
<view v-if="tools.indexOf('align-left')>-1" :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align" data-value="left"></view>
<view v-if="tools.indexOf('align-center')>-1" :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
<view v-if="tools.indexOf('align-right')>-1" :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
<view v-if="tools.indexOf('align-justify')>-1" :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
<view v-if="tools.indexOf('lineHeight')>-1" :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight" data-value="2"></view>
<view v-if="tools.indexOf('letterSpacing')>-1" :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing" data-value="2em"></view>
<view v-if="tools.indexOf('marginTop')>-1" :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop" data-value="20px"></view>
<view v-if="tools.indexOf('previewarginBottom')>-1" :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px"></view>
<view v-if="tools.indexOf('removeFormat')>-1" class="iconfont icon-clearedformat" @tap="removeFormat"></view>
<view v-if="tools.indexOf('fontFamily')>-1" :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="仿宋, 仿宋_GB2312"></view>
<!-- <picker v-if="tools.indexOf('fontSize')>-1" :range="fontSizelist" @change="formatsChange" @tap.stop="formatsChange" data-name="size" class="iconfont icon-fontsize" :class="formats.size? ' ql-active' : ''"></picker> -->
<picker v-if="tools.indexOf('fontSize')>-1" range-key="name" :range="fontSizelist" @change="formatsChange" @tap.stop="formatsChange" data-name="fontSize" class="iconfont icon-fontsize" :class="formats.fontSize? ' ql-active' : ''"></picker>
<!-- <view v-if="tools.indexOf('fontSize')>-1" :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize" data-value="24px"></view> -->
<view v-if="tools.indexOf('color')>-1" :style="(formats.color != '#FFFFFF'&&formats.color != '#fff'&&formats.color != '#ffffff')? 'color:' + formats.color : ''" class="iconfont icon-text_color" data-name="color" @tap.stop="openColor"></view>
<view v-if="tools.indexOf('backgroundColor')>-1" :style="(formats.backgroundColor != '#FFFFFF'&&formats.backgroundColor != '#fff'&&formats.backgroundColor != '#ffffff') ? 'color:' + formats.backgroundColor : ''" class="iconfont icon-fontbgcolor" data-name="backgroundColor" @tap.stop="openColor"></view>
<view v-if="tools.indexOf('insertDate')>-1" class="iconfont icon-date" @tap="insertDate"></view>
<view v-if="tools.indexOf('list')>-1" class="iconfont icon--checklist" data-name="list" data-value="check"></view>
<view v-if="tools.indexOf('ordered')>-1" :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
<view v-if="tools.indexOf('bullet')>-1" :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
<view v-if="tools.indexOf('indent-reduce')>-1" class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
<view v-if="tools.indexOf('indent-add')>-1" class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
<view v-if="tools.indexOf('insert-divider')>-1" class="iconfont icon-fengexian" @tap="insertDivider"></view>
<view v-if="tools.indexOf('insert-image')>-1" class="iconfont icon-charutupian" @tap="selectImage"></view>
<picker v-if="tools.indexOf('header')>-1" :range="headerlist" @change="formatsChange" @tap.stop="formatsChange" data-name="header" :class="'iconfont icon-format-header-'+(headerindex==0?1:headerindex)+(formats.header? ' ql-active' : '')"></picker>
<!-- <view v-if="tools.indexOf('header')>-1" :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="3"></view> -->
<view v-if="tools.indexOf('script-sub')>-1" :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
<view v-if="tools.indexOf('script-super')>-1" :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
<view v-if="tools.indexOf('direction')>-1" :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
<view v-if="tools.indexOf('clear')>-1" class="iconfont icon-shanchu" @tap="clear"></view>
</view>
<view class="flex-sub editor-wrapper">
<editor id="editor" class="ql-container" :placeholder="placeholder" showImgSize showImgToolbar showImgResize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady" @input="editorChange">
</editor>
</view>
</view>
<block v-if="modal.show">
<view class="mask" />
<view class="modal">
<view class="modal_title">{{modal.title}}</view>
<input type="text" class="modal_input" v-model="modal.value" />
<view class="modal_foot">
<view class="modal_button" @tap="modalCancel">取消</view>
<view class="modal_button" style="color:#576b95;border-left:1px solid rgba(0,0,0,.1)" @tap="modalConfirm">确定</view>
</view>
</view>
</block>
<diy-color-picker v-model="showColorPicker" :hexcolor="hexcolor" @confirm="getColor"></diy-color-picker>
</view>
</template>
<script>
import Emitter from "../../libs/util/emitter.js";
export default {
mixins: [Emitter],
emits: ["update:modelValue", "change"],
props: {
value: {
type: String
},
modelValue:{
type: String
},
placeholder: {
type: String,
default: '开始输入...'
},
height:{
type:String,
default: '100vh'
},
tools: {
type: Array,
default: function() {
return [
'bold',
'italic',
'underline',
'strike',
'align-left',
'align-center',
'align-right',
'align-justify',
'lineHeight',
'letterSpacing',
'marginTop',
'previewarginBottom',
'removeFormat',
'fontFamily',
'fontSize',
'color',
'backgroundColor',
'insertDate',
'list',
'ordered',
'bullet',
'redo',
'undo',
'indent-reduce',
'indent-add',
'insert-divider',
'insert-image',
'header',
'script-sub',
'script-super',
'clear',
'direction'
];
}
},
//上传图片
action:{
type:String,
default: '/sys/storage/upload'
}/*,
uploadFile: {
type: Function
}*/
},
data() {
return {
modal: {
show: false,
title: '',
value: ''
},
showColorPicker:false,
html: '',
fontSizelist: [{
code: "",
name: "默认"
}, {
code: "x-small",
name: "超小"
}, {
code: "small",
name: "小"
}, {
code: "medium",
name: "中等"
}, {
code: "large",
name: "大"
}, {
code: "x-large",
name: "超大"
}, {
code: "xx-large",
name: "超级大"
}],
headerlist: ['默认', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'],
headerindex: 0,
colorPickerName: '',
hexcolor: "#0000ff",
readOnly: false,
formats: {},
update: 0,
uForm:{
inputAlign: "",
clearable: ""
}
}
},
watch: {
value: function(newval) {
this.html = newval
},
modelValue: function(newval) {
this.html = newval
},
html: function(newvar) {
if (this.editorCtx) {
if (this.update == 0) {
this.editorCtx.setContents({
html: this.html
});
} else {
this.update = 0
}
}
}
},
created() {
this.html = this.value;
},
mounted() {
let parent = this.$u.$parent.call(this, 'u-form');
if (parent) {
Object.keys(this.uForm).map(key => {
this.uForm[key] = parent[key];
});
}
},
methods: {
openColor(e) {
let dataset = e.target.dataset
this.colorPickerName = dataset.name;
this.hexcolor = dataset.value;
this.showColorPicker = true
// this.$refs.colorPicker.open();
},
getColor(e) {
let msg = '';
switch (this.colorPickerName) {
case 'backgroundColor':
if (e.hex.toUpperCase() == '#FFFFFF') {
e.hex = '';
}
msg = '背景色';
break;
case 'color':
msg = '颜色';
break;
}
this.setformat(this.colorPickerName, e.hex, msg + e.hex);
},
modalConfirm() {
let src = this.modal.value || '';
if (src) {
this.insertImage(src, null, null)
}
this.modal.show = false;
},
modalCancel() {
this.modal.show = false;
},
formatsChange(e) {
if (e.type == 'click') { //不让上层触发点击事件
return false;
}
let value = e.detail.value;
let name = e.target.dataset.name
if (name == 'header') {
this.headerindex = value;
if (value == 0) {
value = null;
}
} else if (name == 'fontSize') {
value = this.fontSizelist[value].code;
} else if (name == 'size') {
value = value > 0 ? value : 1;
}
let msg = name + '设置成功';
console.log(value);
this.setformat(name, value, msg)
return false;
},
editorChange(e) {
this.update = 1
this.$emit('input', e.detail.html);
this.$emit("update:modelValue", e.detail.html);
// vue 原生的方法 return 出去
this.$emit("change", e.detail.html);
// 将当前的值发送到 u-form-item 进行校验
this.dispatch("u-form-item", "onFieldBlur", e.detail.html);
},
readOnlyChange() {
this.readOnly = !this.readOnly
},
onEditorReady() {
const query = uni.createSelectorQuery().in(this);
query.select('#editor').context((res) => {
this.editorCtx = res.context
if (this.html) {
this.editorCtx.setContents({
html: this.html
});
}
}).exec()
},
undo() {
this.editorCtx.undo()
},
redo() {
this.editorCtx.redo()
},
format(e) {
let {
name,
value
} = e.target.dataset
if (!name) return
// console.log('format', name, value)
this.editorCtx.format(name, value)
},
setformat(name, value, msg) {
this.editorCtx.format(name, value);
// this.toast(msg);
},
toast(msg) {
uni.showToast({
duration: 600,
icon: 'none',
title: msg
});
},
onStatusChange(e) {
const formats = e.detail
this.formats = formats
},
insertDivider() {
this.editorCtx.insertDivider({
success: function() {
console.log('insert divider success')
}
})
},
clear() {
uni.showModal({
content: "确定清空编辑器内容?",
complete: (rs) => {
if (rs.confirm) {
this.editorCtx.clear({
success: function(res) {
console.log("clear success")
}
})
}
}
})
},
removeFormat() {
this.editorCtx.removeFormat()
},
insertDate() {
const date = new Date()
let month = date.getMonth() + 1
if(month<10){
month = "0" +month
}
let day = date.getDate()
if(day<10){
day = "0" + day
}
const formatDate = `${date.getFullYear()}-${month}-${day}`
this.editorCtx.insertText({
text: formatDate
})
},
selectImage() {
let thiz = this
// 本地选取 自已处理上传方法，包括选择文件
uni.chooseImage({
count: 9,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有javascript:;
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
for (let i = 0; i < tempFilePaths.length; i++) {
let header = {}
if(getApp().globalData.currentPage && getApp().globalData.currentPage.$session){
header.Authorization = getApp().globalData.currentPage.$session.getToken()||''
}
uni.uploadFile({
url: getApp().globalData.currentPage && getApp().globalData.currentPage.$http?getApp().globalData.currentPage.$http.setUrl(thiz.action,{}):thiz.action,
filePath: tempFilePaths[i],
name: 'file',
header:header,
success(res) {
let data = getApp().globalData.currentPage.$tools.fromJson(res.data);
let url = ''
if(data.url){
url = getApp().globalData.currentPage.$tools.renderImage(data.url);
}
if(data.data &&getApp().globalData.currentPage.$tools.isObject(data.data) && data.data.url){
url = getApp().globalData.currentPage.$tools.renderImage(data.data.url);
}
if(url){
thiz.insertImage(url,null,null);
}
}
});
}
},
});
// uni.showActionSheet({
// itemList: ['本地选取', '远程链接'],
// success: res => {
// if (res.tapIndex === 0) {
// } else {
// thiz.modal = {
// show: true,
// title: '图片链接',
// value: ''
// }
// }
// }
// })
},
insertImage(src, data, alt) {
debugger
let inserdata = {
src: src
}
if (data) {
inserdata.data = data
}
if (alt) {
inserdata.alt = alt
}
this.editorCtx.insertImage({
...inserdata,
success: function() {
console.log('insert image success')
}
})
}
}
}
</script>
<style>
@import "./editor-icon.css";
.container {
width: 100%;
}
.wrapper {
width: 100%;
}
.editor-wrapper {
width: 100%;
background: #fff;
}
.iconfont {
display: inline-block;
padding: 8px 8px;
cursor: pointer;
font-size: 25px;
}
.toolbar {
box-sizing: border-box;
border-bottom: 0;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.ql-container {
box-sizing: border-box;
padding: 10px;
width: 100%;
min-height: 30vh;
height: 100%;
font-size: 16px;
line-height: 1.5;
}
.ql-active {
color: #06c;
}
/* 模态框 */
.modal {
position: fixed;
z-index: 999999;
top: 50%;
left: 16px;
right: 16px;
background-color: #fff;
border-radius: 12px;
transform: translateY(-50%);
}
.modal_title {
padding: 32px 24px 16px;
font-size: 17px;
font-weight: 700;
text-align: center;
}
.modal_input {
display: block;
padding: 5px;
line-height: 2.5em;
height: 2.5em;
margin: 0 24px 32px 24px;
font-size: 14px;
border: 1px solid #dfe2e5;
}
.modal_foot {
display: flex;
line-height: 56px;
font-weight: 700;
border-top: 1px solid rgba(0, 0, 0, .1);
}
.modal_button {
flex: 1;
text-align: center;
}
/* 遮罩版 */
.mask {
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
opacity: 0.5;
}
</style>
组件调用
<template>
<view class="container container329152">
<u-form-item :borderBottom="false" class="diygw-col-24" labelPosition="top" prop="editor">
<diy-editor height="500px" v-model="editor"></diy-editor>
</u-form-item>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: {},
editor: ''
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
methods: {
async init() {},
// 新增方法 自定义方法
async testFunction(param) {
let thiz = this;
console.log(this.checkbox);
}
}
};
</script>
<style lang="scss" scoped>
.container329152 {
}
</style>
