代驾app系统开发如何推动出行服务的智能化与便捷化
578
2023-11-09
微信小程序实战项目之富文本编辑器实现
−目录前言1. 实现效果2. 创建发布页面，实现基本布局3. 实现编辑区操作栏的功能3.1. 实现文本加粗、斜体、文本下划线、左对齐、居中对齐、右对齐3.2. 实现撤销、恢复、插入图片、删除操作4. 参考总结
前言
这是我参加掘金启航计划的第三篇文章，这次总结的是实现一个简单的富文本编辑器，相信阅读文章后，观众老爷们，能够实现富文本编辑器，在微信小程序中发布自己的文章，希望观众老爷们多多支持！
1. 实现效果
实现的效果如下图：
实现的功能点如下：
文本加粗、斜体、下划线，对齐方式撤销、恢复、插入图片、删除功能。2. 创建发布页面，实现基本布局
首先创建发布页面 article，在 app.json中通过配置生成页面即可。
?
1
2
3
"pages": [
"pages/article/article"
]
在 article.wxml 中，书写结构：
在 article.wxss，书写基本的样式：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
page{
width: 740rpx;
margin: 0 auto;
background-color: #f9f9f9;
}
.title {
border: 1rpx solid #f2f2f2;
margin: 10rpx;
height: 70rpx;
line-height: 70rpx;
border-radius: 10rpx;
}
.picker{
padding: 10rpx;
}
.wrapper {
padding: 5px;
}
.iconfont {
display: inline-block;
padding: 8px 8px;
width: 24px;
height: 24px;
cursor: pointer;
font-size: 20px;
}
.toolbar {
box-sizing: border-box;
border-bottom: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.ql-container {
box-sizing: border-box;
padding: 12px 15px;
width: 100%;
min-height: 30vh;
height: auto;
background: #fff;
margin-top: 20px;
font-size: 16px;
line-height: 1.5;
border: 1rpx solid #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 文件获取地址
?
1
@import "./assets/iconfont.wxss";
3. 实现编辑区操作栏的功能
本文只实现操作栏的功能，实现富文本编辑，其他文章类型的选择，请自行实现，不难哦！
首先，我们需要获取富文本编辑器实例 EditorContext，通过 wx.createSelectorQuery 获取，我们在页面 Page 函数中，创建 onEditorReady函数，用于获取该实例：
?
1
2
3
4
5
6
onEditorReady() {
const that = this
wx.createSelectorQuery().select(#editor).context(function (res) {
that.editorCtx = res.context
}).exec()
}
然后将该方法绑定到富文本编辑器的 bindready属性上，随着富文本编辑器初始化完成后触发，从而获取实例。
?
1
2
3
4
5
6
7
8
9
<editor id="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 进行样式修改。?
1
2
3
4
5
6
7
8
<view class=toolbar bindtap="format">
<i class="iconfont icon-zitijiacu data-name="bold"></i>
<i class="iconfont icon-zitixieti data-name="italic"></i>
<i class="iconfont icon-zitixiahuaxian data-name="underline"></i>
<i class="iconfont icon-zuoduiqi data-name="align" data-value="left"></i>
<i class="iconfont icon-juzhongduiqi data-name="align" data-value="center"></i>
<i class="iconfont icon-youduiqi data-name="align" data-value="right"></i>
</view>
Page 函数中的 format 函数：
?
1
2
3
4
5
6
7
8
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?
1
2
3
4
5
6
7
<editor id="editor"
class="ql-container"
placeholder="{{placeholder}}"
showImgSize showImgToolbar showImgResize
bindstatuschange="onStatusChange"
read-only="{{readOnly}}"
bindready="onEditorReady">
?
1
2
3
4
5
6
onStatusChange(e) {
const formats = e.detail
this.setData({
formats
})
}
?
1
2
3
4
5
6
<i class="iconfont icon-zitijiacu {{formats.bold ? ql-active : }}" data-name="bold"></i>
<i class="iconfont icon-zitixieti {{formats.italic ? ql-active : }}" data-name="italic"></i>
<i class="iconfont icon-zitixiahuaxian {{formats.underline ? ql-active : }}" data-name="underline"></i>
<i class="iconfont icon-zuoduiqi {{formats.align === left ? ql-active : }}" data-name="align" data-value="left"></i>
<i class="iconfont icon-juzhongduiqi {{formats.align === center ? ql-active : }}" data-name="align" data-value="center"></i>
<i class="iconfont icon-youduiqi {{formats.align === right ? ql-active : }}" data-name="align" data-value="right"></i>
?
1
2
3
.ql-active {
color: #497749;
}
3.2. 实现撤销、恢复、插入图片、删除操作
首先在 <i> 标签上绑定相应的事件：
?
1
2
3
4
<i class="iconfont icon-undo" bindtap="undo"></i>
<i class="iconfont icon-redo" bindtap="redo"></i>
<i class="iconfont icon-charutupian" bindtap="insertImage"></i>
<i class="iconfont icon-shanchu" bindtap="clear"></i>
撤销 undo
调用 EditorContext API即可
?
1
2
3
undo() {
this.editorCtx.undo()
}
恢复 redo
同理
?
1
2
3
redo() {
this.editorCtx.redo()
}
插入图片 insertImage
同理
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
insertImage() {
const that = this
wx.chooseImage({
count: 1,
success: function (res) {
wx.showLoading({
title: 正在上传图片,
})
wx.cloud.uploadFile({
cloudPath: `news/upload/${time.formatTime(new Date)}/${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
同理
?
1
2
3
4
5
6
7
clear() {
this.editorCtx.clear({
success: function (res) {
console.log("clear success")
}
})
}
4. 参考
editor | 微信开放文档 (qq.com)
总结
您可能感兴趣的文章:微信小程序整合使用富文本编辑器的方法详解微信小程序中富文本编辑器的实现
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~