uniapp自定义富文本编辑器

·  阅读 569
uniapp自定义富文本编辑器

前言

在我们使用uniapp开发的时候有时会用到富文本编辑器,而uniapp官方内置的组件就有富文本编辑器

image.png

而示例代码出来的效果有时候样式或者功能和我们所需求的不一致,我们可以通过自定义富文本编辑器来实现自己想要的效果

引入iconfont

首先在iconfont添加功能图标,这里我创建一个项目简单添加6个图标分别是标题,加粗,斜体,下划线,分割线和图片的图标

image.png

然后下载到本地,只需保留文件名后缀为cssttfwoffwoff2的文件,然后在uniaap项目里新建一个common文件夹用来存放iconfont图标,将文件夹放进common文件夹里

image.png

在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>
复制代码

image.png

自定义富文本编辑器

将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>
复制代码

image.png

然后就正式开始对富文本组件进行操作了,将需要的属性都加上,如对图片进行操作的属性,组件初始化的方法

<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()
}
复制代码

image.png

通过官方文档发现获取节点对象需要添加一个.in(this)这样就不会报错

image.png

获取节点对象后添加需要获取的节点内容,通过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()
}
复制代码

2.gif

而富文本修改样式如修改标题样式则通过format()方法去修改样式,传入要修改的属性名和值就行了,我们为标题设置对应的操作

addTitle(){
    this.titleShow=!this.titleShow 
    this.editorCtx.format('header',this.titleShow?'H2':false)
}
复制代码

0.gif

其他的修改样式的按钮也添加对应的操作即可,为了更好的区分,当修改的状态为true是字体图标变色,使用v-bind的方法为图标动态绑定样式

image.png

image.png

2.gif

最后就是上传图片了,上传图片需要配合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()
        }
    })
}
复制代码

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

2.gif

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

收藏成功!
已添加到「」, 点击更改