微信小程序中如何实现富文本编辑器
导读:本文共6402.5字符,通常情况下阅读需要21分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:1. 实现实现的功能点如下:文本加粗、斜体、下划线,对齐方式撤销、恢复、插入图片、删除功能。2. 创建发布页面,实现基本布局首先创建发布页面article,在app.json中通过配置生成页面即可。"pages":["pages/article/article"]在article.wxml中,书写结构:<view><!--文章类型--... ...
目录
(为您整理了一些要点),点击可以直达。1. 实现
实现的功能点如下:
文本加粗、斜体、下划线,对齐方式
撤销、恢复、插入图片、删除功能。
2. 创建发布页面,实现基本布局
首先创建发布页面article,在app.json中通过配置生成页面即可。
"pages":[
"pages/article/article"
]
在article.wxml中,书写结构:
<view>
<!--文章类型-->
<view>
<pickerbindchange="bindPickerChange"model:value="{{index}}"range="{{array}}">
<viewclass="picker">
文章类型:{{objectArray[index].name}}
</view>
</picker>
</view>
<!--文章标题-->
<view>
<inputname="title"class="title"placeholder="请输入文章标题"maxlength="18"model:value="{{title}}"></input>
</view>
<!--编辑区-->
<viewclass="container">
<viewclass="page-body">
<viewclass='wrapper'>
<!--操作栏-->
<viewclass='toolbar'bindtap="format">
<iclass="iconfonticon-zitijiacu"></i>
<iclass="iconfonticon-zitixieti"></i>
<iclass="iconfonticon-zitixiahuaxian"></i>
<iclass="iconfonticon-zuoduiqi"></i>
<iclass="iconfonticon-juzhongduiqi"></i>
<iclass="iconfonticon-youduiqi"></i>
<iclass="iconfonticon-undo"></i>
<iclass="iconfonticon-redo"></i>
<iclass="iconfonticon-charutupian"></i>
<iclass="iconfonticon-shanchu"></i></view>
<!--文章内容区,富文本编辑器-->
<editorid="editor"class="ql-container"placeholder="{{placeholder}}"showImgSizeshowImgToolbarshowImgResize>
</editor>
<!--发布按钮-->
<viewclass="button"bindtap="formSubmit">发布</view>
</view>
</view>
</view>
</view>
在article.wxss,书写基本的样式:
page{
width:740rpx;
margin:0auto;
background-color:#f9f9f9;}
.title{
border:1rpxsolid#f2f2f2;
margin:10rpx;
height:70rpx;
line-height:70rpx;
border-radius:10rpx;
}.picker{
padding:10rpx;
}.wrapper{
padding:5px;
}.iconfont{
display:inline-block;
padding:8px8px;
width:24px;
height:24px;
cursor:pointer;
font-size:20px;
}.toolbar{
box-sizing:border-box;
border-bottom:0;
font-family:'HelveticaNeue','Helvetica','Arial',sans-serif;
}.ql-container{
box-sizing:border-box;
padding:12px15px;
width:100%;
min-height:30vh;
height:auto;
background:#fff;
margin-top:20px;
font-size:16px;
line-height:1.5;
border:1rpxsolid#f2f2f2;
border-radius:15rpx;
}.button{
width:360rpx;
height:80rpx;
line-height:80rpx;
text-align:center;
margin:auto;
margin-top:50rpx;
border-radius:8rpx;
font-size:32rpx;
color:white;
background-color:#497749!important;
}
这时我们会发现中间的操作栏图标不显示,我们需要在article.wxss中头部引入iconfont.wxss字体图标。 iconfont.wxss 文件获取地址
@import"./assets/iconfont.wxss";
3. 实现编辑区操作栏的功能
首先,我们需要获取富文本编辑器实例EditorContext,通过wx.createSelectorQuery获取,我们在页面Page函数中,创建onEditorReady函数,用于获取该实例:
onEditorReady(){
constthat=this
wx.createSelectorQuery().select('#editor').context(function(res){
that.editorCtx=res.context
}).exec()
}
然后将该方法绑定到富文本编辑器的bindready属性上,随着富文本编辑器初始化完成后触发,从而获取实例。
<editorid="editor"
class="ql-container"
placeholder="{{placeholder}}"
showImgSize
showImgToolbar
showImgResize
bindstatuschange="onStatusChange"
read-only="{{readOnly}}"
bindready="onEditorReady">
3.1. 实现文本加粗、斜体、文本下划线、左对齐、居中对齐、右对齐
我们如何修改文本的样式呢?
通过EditorContext实例提供的API:
EditorContext.format(string name, string value)
,进行样式修改。name
:CSS属性;value
:值。
通过查阅微信小程序开发文档可知,实现上述功能,我们需要的name
和value
的值为:
那么我们如何通过点击按钮,来修改文本样式呢?
首先我们在图标
<i>
标签上绑定name
和value
属性,填上图标所对应上图的name
和value
,无value
的不填即可。然后在父标签上绑定事件format,通过该事件函数,使用
EditorContext.format
API进行样式修改。
<viewclass='toolbar'bindtap="format">
<iclass="iconfonticon-zitijiacudata-name="bold"></i>
<iclass="iconfonticon-zitixietidata-name="italic"></i>
<iclass="iconfonticon-zitixiahuaxiandata-name="underline"></i>
<iclass="iconfonticon-zuoduiqidata-name="align"data-value="left"></i>
<iclass="iconfonticon-juzhongduiqidata-name="align"data-value="center"></i>
<iclass="iconfonticon-youduiqidata-name="align"data-value="right"></i>
</view>
Page函数中的format函数:
format(e){
let{
name,
value
}=e.target.dataset
if(!name)return
this.editorCtx.format(name,value)
},
问题:当我们点击图标时,改变了文本样式,但是图标的样式没有改变,无法提示我们文本现在的样式状态,那该怎么解决呢?
这时候我们就需要动态改变字体图标的样式了,比如点击图标后,改变颜色。
通过查阅editor微信小程序开发相关文档后,bindstatuschange属性绑定的方法,会在当你通过Context方法改变编辑器内样式时触发,会返回选区已设置的样式。
那么我们可以在data中,添加formats对象,存储点击后的样式属性。然后在点击图标按钮时,通过bindstatuschange绑定的方法,得到已设置的样式存储到formats中;在模板渲染时,在<i>
的class属性上,添加{{formats.align === 'right' ? 'ql-active' : ''}}
(如文本向右),当你点击了这个图标,那么formats中就有这个属性了,那么就添加我们的动态类名ql-active改变图标颜色。
具体实现
对editor标签属性bindstatuschange绑定方法onStatusChange
<editorid="editor"
class="ql-container"
placeholder="{{placeholder}}"
showImgSizeshowImgToolbarshowImgResize
bindstatuschange="onStatusChange"
read-only="{{readOnly}}"
bindready="onEditorReady">
onStatusChange(e){
constformats=e.detail
this.setData({
formats
})
}
在图标
<i>
标签上,添加{{formats.align === 'right' ? 'ql-active' : ''}}
<iclass="iconfonticon-zitijiacu{{formats.bold?'ql-active':''}}"data-name="bold"></i>
<iclass="iconfonticon-zitixieti{{formats.italic?'ql-active':''}}"data-name="italic"></i>
<iclass="iconfonticon-zitixiahuaxian{{formats.underline?'ql-active':''}}"data-name="underline"></i>
<iclass="iconfonticon-zuoduiqi{{formats.align==='left'?'ql-active':''}}"data-name="align"data-value="left"></i>
<iclass="iconfonticon-juzhongduiqi{{formats.align==='center'?'ql-active':''}}"data-name="align"data-value="center"></i>
<iclass="iconfonticon-youduiqi{{formats.align==='right'?'ql-active':''}}"data-name="align"data-value="right"></i>
在article.wxss添加ql-active类
.ql-active{
color:#497749;
}
3.2. 实现撤销、恢复、插入图片、删除操作
首先在<i>
标签上绑定相应的事件:
<iclass="iconfonticon-undo"bindtap="undo"></i>
<iclass="iconfonticon-redo"bindtap="redo"></i>
<iclass="iconfonticon-charutupian"bindtap="insertImage"></i>
<iclass="iconfonticon-shanchu"bindtap="clear"></i>
撤销 undo
调用EditorContext API即可
undo(){
this.editorCtx.undo()
}
恢复 redo
同理
redo(){
this.editorCtx.redo()
}
插入图片 insertImage
同理
insertImage(){
constthat=this
wx.chooseImage({
count:1,
success:function(res){
wx.showLoading({
title:'正在上传图片',
})
wx.cloud.uploadFile({
cloudPath:news/upload/${time.formatTime(newDate)}/${Math.floor(Math.random()*100000000)}.png
,//上传至云端的路径
filePath:res.tempFilePaths[0],
success:cover=>{
that.editorCtx.insertImage({
src:cover.fileID,
data:{
id:cover.fileID,
role:'god'
},
success:function(){
wx.hideLoading()
}
})
}
})
}
})
}
清空 clear
同理
clear(){
this.editorCtx.clear({
success:function(res){
console.log("clearsuccess")
}
})
}
微信小程序中如何实现富文本编辑器的详细内容,希望对您有所帮助,信息来源于网络。