>首页> IT >

微信小程序实战项目之富文本编辑器实现

时间:2022-10-08 17:53:43       来源:转载
本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于富文本编辑器的实战示例,包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容,下面一起来看一下,希望对大家有帮助。

【相关学习推荐:小程序学习教程】


【资料图】

1. 实现效果

实现的效果如下图:

实现的功能点如下:

文本加粗、斜体、下划线,对齐方式撤销、恢复、插入图片、删除功能。

2. 创建发布页面,实现基本布局

首先创建发布页面 article,在 app.json中通过配置生成页面即可。

"pages": [        "pages/article/article"    ]
登录后复制

article.wxml中,书写结构:

文章类型:{{objectArray[index].name}}      发布
登录后复制

article.wxss,书写基本的样式:

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 文件获取地址

@import "./assets/iconfont.wxss";
登录后复制

3. 实现编辑区操作栏的功能

本文只实现操作栏的功能,实现富文本编辑,其他文章类型的选择,请自行实现,不难哦!

首先,我们需要获取富文本编辑器实例 EditorContext,通过 wx.createSelectorQuery获取,我们在页面 Page函数中,创建 onEditorReady函数,用于获取该实例:

onEditorReady() {        const that = this        wx.createSelectorQuery().select("#editor").context(function (res) {            that.editorCtx = res.context        }).exec()    }
登录后复制

然后将该方法绑定到富文本编辑器的 bindready属性上,随着富文本编辑器初始化完成后触发,从而获取实例。

登录后复制

3.1. 实现文本加粗、斜体、文本下划线、左对齐、居中对齐、右对齐

我们如何修改文本的样式呢?

通过 EditorContext实例提供的APIEditorContext.format(string name, string value),进行样式修改。name:CSS属性;value:值。

通过查阅微信小程序开发文档可知,实现上述功能,我们需要的 namevalue的值为:

首先我们在图标 标签上绑定namevalue属性,填上图标所对应上图的 namevalue,无 value的不填即可。然后在父标签上绑定事件 format,通过该事件函数,使用 EditorContext.formatAPI进行样式修改。
登录后复制

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中;在模板渲染时,在class属性上,添加 {{formats.align === "right" ? "ql-active" : ""}}(如文本向右),当你点击了这个图标,那么 formats中就有这个属性了,那么就添加我们的动态类名 ql-active改变图标颜色。

具体实现

editor标签属性 bindstatuschange绑定方法 onStatusChange
登录后复制
onStatusChange(e) {        const formats = e.detail        this.setData({            formats        })    }
登录后复制
在图标 标签上,添加{{formats.align === "right" ? "ql-active" : ""}}
登录后复制
article.wxss添加 ql-active
.ql-active {  color: #497749;}
登录后复制

3.2. 实现撤销、恢复、插入图片、删除操作

首先在 标签上绑定相应的事件:

登录后复制

撤销 undo

调用 EditorContext API即可

undo() {        this.editorCtx.undo()    }
登录后复制

恢复 redo

同理

redo() {        this.editorCtx.redo()    }
登录后复制

插入图片 insertImage

同理

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

同理

clear() {        this.editorCtx.clear({            success: function (res) {                console.log("clear success")            }        })    }
登录后复制

【相关学习推荐:小程序学习教程】

以上就是微信小程序实战项目之富文本编辑器实现的详细内容,更多请关注php中文网其它相关文章!

关键词: 插入图片 我们需要 程序开发