前言
在我们使用 uniapp 开发的时候有时会用到富文本编辑器，而 uniapp 官方内置的组件就有富文本编辑器
而示例代码出来的效果有时候样式或者功能和我们所需求的不一致，我们可以通过自定义富文本编辑器来实现自己想要的效果
引入 iconfont
首先在iconfont添加功能图标，这里我创建一个项目简单添加 6 个图标分别是标题，加粗，斜体，下划线，分割线和图片的图标
然后下载到本地，只需保留文件名后缀为 css，ttf，woff，woff2 的文件，然后在 uniaap 项目里新建一个 common 文件夹用来存放 iconfont 图标，将文件夹放进 common 文件夹里
在 iconfont.css 文件里修改其他三个文件的引用路径
src: url('@/common/iconfont/iconfont.woff2?t=1669261494046') format('woff2'), url('@/common/iconfont/iconfont.woff?t=1669261494046') format('woff'), url('@/common/iconfont/iconfont.ttf?t=1669261494046') format('truetype');
复制代码
最后在 app.vue 文件里 import 导入这个 css 文件
<style lang="scss"> @import url("./common/iconfont/iconfont.css");</style>
复制代码
图标就成功引入了，在页面里使用 font class 方式使用图标，然后就可以看到图标成功显示到页面上了
<view class="content"> <text class="iconfont icon-fengexian"></text></view>
复制代码
自定义富文本编辑器
将 6 个图标全部引入并且添加富文本组件和一个按钮，大概页面就是这样子的
<view> <view class="tools"> <view class="item"><text class="iconfont icon-zitibiaoti"></text></view> <view class="item"><text class="iconfont icon-zitijiacu"></text></view> <view class="item"><text class="iconfont icon-zitixieti"></text></view> <view class="item"><text class="iconfont icon-zitixiahuaxian"></text></view> <view class="item"><text class="iconfont icon-fengexian"></text></view> <view class="item"><text class="iconfont icon-charutupian"></text></view> </view> <view class="content"> <editor class="myEditor" placeholder="写点什么儿~"></editor> </view> <view class="btn"> <u-button type="primary">确定</u-button> </view></view>
复制代码
然后就正式开始对富文本组件进行操作了，将需要的属性都加上，如对图片进行操作的属性，组件初始化的方法
<editor class="myEditor" placeholder="写点什么儿~" show-img-size //点击图片时显示图片大小控件 show-img-toolbar //点击图片时显示工具栏控件 show-img-resize //点击图片时显示修改尺寸控件 @ready="onEditorReady" //初始化 ></editor>
复制代码
在页面进来的时候就要对富文本组件进行一个初始化，获取上下文，将官网获取上下文示例的代码复制粘贴一下，发现控制台报错了，无法获取上下文对象
onEditorReady(){ uni.createSelectorQuery().select('.myEditor').context((res) => { this.editorCtx = res.context }).exec()}
复制代码
通过官方文档发现获取节点对象需要添加一个.in(this)这样就不会报错
获取节点对象后添加需要获取的节点内容，通过 fields()获取，往里面添加 context 返回节点对应的 context 对象，在回调函数里接收返回的数据
onEditorReady(){ uni.createSelectorQuery().in(this).select('.myEditor').fields({ context:true },res=>{ console.log(res); this.editorCtx = res.context }).exec()}
复制代码
获取到了上下文就可以对富文本进行编辑，例如当点击分割线的按钮就往富文本里添加一条分割线，直接调用上下文对象的 insertDivider()方法往里添加分割线就行了
addDivider(){ this.editorCtx.insertDivider()}
复制代码
而富文本修改样式如修改标题样式则通过 format()方法去修改样式，传入要修改的属性名和值就行了，我们为标题设置对应的操作
addTitle(){ this.titleShow=!this.titleShow this.editorCtx.format('header',this.titleShow?'H2':false)}
复制代码
其他的修改样式的按钮也添加对应的操作即可，为了更好的区分，当修改的状态为 true 是字体图标变色，使用 v-bind 的方法为图标动态绑定样式
最后就是上传图片了，上传图片需要配合 uni.chooseImage()方法一起使用，调用 uni.chooseImage()方法从本地相册选择图片成功后使用上下文对象的 insertImage()方法传入图片地址
addImage(){ uni.chooseImage({ success:res=>{ uni.showLoading({ title:'loading...' }) for(let i=0;i<res.tempFilePaths.length;i++){ this.editorCtx.insertImage({ src:res.tempFilePaths[i] }) } uni.hideLoading() } })}
复制代码
一个简单的自定义富文本编辑器就完成了，要想更多功能可以自己添加设置
评论