微信小程序实用项目富文本编辑器的实现（小程序富文本包装）

这篇文章给大家带来了一些关于微信小程序的知识，其中主要介绍了关于富文本编辑器的实用示例，包括创建发布页面、实现基本布局、实现编辑区操作栏的功能等。下面就一起来看看吧，希望能帮到你。

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

1.实现该效果的效果如下:

实现的功能点如下:

文本为粗体、斜体和下划线，可以取消、恢复对齐方式，插入和删除图片。2.创建发布页面以实现基本布局。首先创建一篇发布页面文章，通过app.json中的配置生成页面。

“页数”:

首先，我们需要获取富文本编辑器实例EditorContext，并通过页面函数中的wx.createSelectorQuery获取它，我们创建onEditorReady函数来获取该实例:

onEditorReady（）{ const that = this wx . createselectorquery（）。选择（& # 39；#编辑& # 39；).context（function（RES）{ that。EditorCTX = res. context}）。exec（）}然后将此方法绑定到富文本编辑器的bindready属性，并在富文本编辑器初始化完成后触发它，从而获得一个实例。

3.1.文本粗体、斜体、带下划线、左对齐、居中对齐和右对齐

我们如何修改文本的样式？

通过EditorContext实例提供的API修改样式。格式（字符串名称、字符串值）。名称:CSS属性；价值:价值。通过查阅微信小程序的开发文档，我们可以得知我们实现上述功能所需的名称和值的值为:

首先，我们在图标标签上绑定名称和值属性，并填写图标对应的上图的名称和值，没有值的留空。然后将事件格式绑定到父标记，并使用EditorContext.format API通过此事件函数修改样式。页面功能中的格式功能:

format（e）{ let { name，value } = e.target.dataset if（！名称）返回此。EditorCTX。format（name，value）}，那么我们需要动态改变字体图标的样式，比如点击图标后改变颜色。参考编辑器微信小程序开发相关文档后，当您通过上下文方法更改编辑器中的样式时，将触发bindstatuschange属性绑定的方法，并将返回到选择中的设置样式。

然后我们可以在数据中添加格式对象来存储单击后的样式属性。然后，当单击图标按钮时，通过bindstatuschange绑定的方法获取设置的样式并存储在formats中；在模板呈现期间，添加{{formats。align = =‘right‘到？Ql-active:‘‘‘‘‘‘} } }（如果文本在右侧），当您单击此图标时，将在formats中找到此属性，因此添加我们的动态类名ql-active以更改图标颜色。

具体实现

将方法onStatusChange onStatusChange（e）绑定到编辑器标记属性bindstatuschange。{ const formats = e . detail this . setdata（{ formats }）}在图标标签上，添加{{formats。align = =‘right‘？ql-active:‘‘‘‘} }添加ql-活动类。ql-active { color:# 497749；}3.2.撤消、恢复、插入图片和删除

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

撤消撤消

只需调用EditorContext API

undo（）{ this . editor CTX . undo（）}还原重做。

以同样的方式；以类似的方式

redo（）{ this . editor CTX . redo（）}插入图像insertImage。

以同样的方式；以类似的方式

insert image（）{ const that = this wx . choose image（{ count:1，success:function（RES）{ wx . show loading（{ title:& # 39；上传图片& # 39；，}）wx . cloud . upload file（{ cloud path:` news/upload/$ { time . format time（new Date）}/$ { math . floor（math . random（）* 10000000）}。png `，//上传到云文件的路径path:RES . tempfile paths【0】，success:cover =》{ that . editor CTX . insert image（{ src:cover . fileid，data: { id: cover.fileID，role:& # 39；上帝& # 39；}，成功:function（）{ wx . hide loading（）} }）} }）} } }清除。

以同样的方式；以类似的方式

clear（）{ this . editor CTX . clear（{ success:function（RES）{ console . log（“clear success“）} } }【相关学习推荐:小程序学习教程】

以上是微信小程序实战项目富文本编辑器的实现细节。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）
• 如何解决小程序中的重启跳转错误（小程序重启）
• 教你如何部署微信小程序并上线（如何在线部署小程序）

本文由主机参考刊发，转载请注明：微信小程序实用项目富文本编辑器的实现（小程序富文本包装） https://zhujicankao.com/103302.html