theme: channing-cyan
前言
在我们使用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万现金大奖」
暂无评论内容