洞察探索open banking如何通过小程序容器技术助力金融企业实现数据安全和数字化转型
588
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小时内删除侵权内容。
相关文章
发表评论
最近发表
- 洞察探索open banking如何通过小程序容器技术助力金融企业实现数据安全和数字化转型
- 洞察如何提升企业数字化转型的灵活性，支持跨终端的小程序开发策略
- 如何通过一键生成 App 加速企业数字化转型？
- 洞察探索如何通过一套代码实现跨平台小程序开发与高效管理，助力企业数字化转型
- 在推动企业数字化转型的过程中，灰度发布能确保应用的平稳过渡，降低风险，同时提升整体开发效率。如何在不同金融和物联网环境下实施这一策略，将直接影响项目的成功率和用户体验。
- 洞察如何利用云端编译提升跨平台小程序开发效率和安全性
- 洞察如何利用FinClip的小程序容器技术高效进行基础组建，满足金融行业对安全、合规和灵活性的需求？
- 洞察同层渲染如何提升跨平台小程序开发的效率与灵活性
- 在跨平台小程序开发中，如何确保桌面应用安全？揭示安全机制与合规管理的关键步伐，帮助企业有效应对数字化转型中的安全挑战。
- 洞察了解前端三大主流框架如何影响企业跨平台小程序开发的效率与灵活性
推荐文章
热评文章
暂时没有评论，来抢沙发吧~