uniapp自定义富文本编辑器

前言

在我们使用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()
        }
    })
}

一个简单的自定义富文本编辑器就完成了，要想更多功能可以自己添加设置

本文正在参加「金石计划 . 瓜分6万现金大奖」