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

GS 1181 2024-06-18

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

1. 实现效果

实现的效果如下图:

图片.png

实现的功能点如下:

  • 文本加粗、斜体、下划线,对齐方式

  • 撤销、恢复、插入图片、删除功能。

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

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

article.wxml 中,书写结构:

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

这时我们会发现中间的操作栏图标不显示,我们需要在 article.wxss 中头部引入 iconfont.wxss 字体图标。 iconfont.wxss 文件获取地址

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

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

图片.png

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

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

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

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

  • 通过 EditorContext 实例提供的API:EditorContext.format(string name, string value),进行样式修改。

  • name:CSS属性;value:值。

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

那么我们如何通过点击按钮,来修改文本样式呢?
  • 首先我们在图标 标签上绑定name 和 value 属性,填上图标所对应上图的 name 和 value,无 value 的不填即可。

  • 然后在父标签上绑定事件 format,通过该事件函数,使用 EditorContext.format API 进行样式修改。

Page 函数中的 format 函数:

问题:当我们点击图标时,改变了文本样式,但是图标的样式没有改变,无法提示我们文本现在的样式状态,那该怎么解决呢?

  • 这时候我们就需要动态改变字体图标的样式了,比如点击图标后,改变颜色。

通过查阅 editor 微信小程序开发相关文档后,bindstatuschange 属性绑定的方法,会在当你通过 Context 方法改变编辑器内样式时触发,会返回选区已设置的样式。

那么我们可以在 data 中,添加 formats 对象,存储点击后的样式属性。然后在点击图标按钮时,通过 bindstatuschange 绑定的方法,得到已设置的样式存储到 formats 中;在模板渲染时,在class 属性上,添加 {{formats.align === 'right' ? 'ql-active' : ''}}(如文本向右),当你点击了这个图标,那么 formats 中就有这个属性了,那么就添加我们的动态类名 ql-active 改变图标颜色。

具体实现

  • editor 标签属性 bindstatuschange 绑定方法 onStatusChange

  • 在图标 标签上,添加{{formats.align === 'right' ? 'ql-active' : ''}}

  • article.wxss 添加 ql-active

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

图片.png

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

撤销 undo

调用 EditorContext API 即可

恢复 redo

同理

插入图片 insertImage

同理

清空 clear

同理

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

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序里 textarea 与 input 的相关问题汇总
下一篇:微信小程序开发工具的详细介绍与功能解析
相关文章

 发表评论

暂时没有评论,来抢沙发吧~