微信小程序实践项目富文本编辑器实现（uniapp小程序富文本编辑器）

本文提供了微信小程序的相关知识。 主要介绍富文本编辑器的实用示例，例如创建公共页面、实现基本布局、实现编辑区操作栏的功能等。 我们来看看下面的内容吧。 我希望这对你有帮助。

【相关学习建议：小程序学习教程】

1.实现效果

实现的效果是：没错。

实现的功能如下。

粗体文本、斜体、下划线、取消对齐、恢复、插入图像、删除功能。 2、创建发布页面并实现基本布局

首先创建发布页面文章，通过app.json中的配置生成页面。

"pages": [ "pages/article/article" ]

article.wxml 中的描述结构：

文章内容区，富文本编辑器 - ->

Article.wxss 基础写作：

页面{宽度：740rpx;边距：0自动;背景-颜色：#f9f9f9;}.标题{边框：1rpx实线#f2f2f2;边距：70rpx;行-高度：70rpx ; 边框-半径: 10rpx;}.picker{ 垫ding: 10rpx;}.wrapper { padding: 5px;}.iconfont { display: inline-block; padding: 8px 8px; 宽度: 24px; 光标: font-size: 20px ; }.toolbar { box-sizing: border[k 3]box; border-bottom: 0; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans serif。 }.ql-容器{box-大小：边框-框；宽度：100%；最小-高度：30vh；背景：#fff； ] 顶部：20px；字体 - 大小：16px；行高： 1.5; 边框：1rpx 实心#f2f2f2；边框-半径：15rpx；}.按钮{宽度：360rpx；行-高度：80rpx；文本-对齐：自动；边距-顶部：50rpx；边界-半径： 8rpx; 字体-大小：32rpx；颜色：白色；背景-颜色：#497749！重要；}

目前，可以看到中间的操作栏图标没有显示。 需要在item.wxss的头部引入iconfont.wxss字体图标。 iconfont.wxss文件获取地址

@import "./assets/iconfont.wxss";3. 实现编辑区操作栏功能

本文仅实现操作栏功能，实现富文本编辑，但您可以自行选择其他文章类型。 这并不难。

首先需要通过wx.createSelectorQuery获取富文本编辑器实例EditorContext。 在 Page 函数中，创建用于获取实例的 onEditorReady 函数：

onEditorReady() { const that = this wx.createSelectorQuery().select('#editor').context(function (res) { that .editorCtx = res.context }).exec() }

接下来，将该方法绑定到富文本编辑器。 富文本后触发bindready属性。 编辑器被初始化以获取实例。

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

如何实现是否要更改文本样式？

EditorContext实例提供的API：EditorContext.format(string name, string value)，样式名称：CSS属性值：更改值。 如果你查看小程序开发文档，你会发现实现上述功能所需的name和value值为：

如何在单击按钮时更改文本样式？首先，将名称和值属性绑定到图标 标签，并使用上图中的名称和值属性输入相应的值。 无值。留空可通过此事件函数修改父标记并使用 EditorContext.format API 更改样式：

format(e) { .} = e.target.dataset if (!name) return this.editorCtx.format(name, value) } 如果需要动态改变字体图标的样式，比如点击图标后改变颜色。

参考编辑器微信小程序开发相关文档后，通过Context方法改变编辑器中的样式时，会触发bindstatuschange属性绑定方法，并返回在选区上设置的样式。

接下来，将格式对象添加到数据中，以在单击后保存样式属性。 然后，当您单击图标按钮时，配置的样式将通过bindstatuschange绑定方法以某种格式保存。 渲染模板时将 {{formats.align == 'right' ? 添加到 的类属性中。 'ql-active' : ''}} （如右侧文字），当您单击此图标时，格式具有此属性并添加动态类名 ql-active。 更改图标颜色。

具体实现

将编辑器标签属性bindstatuschange绑定到绑定方法onStatusChange onStatusChange(e) { constformats = e.detail this.setData({formats}) 在 }icon 标签中，添加 {{formats.align === 'right' ? 'ql- active' : ''}} 添加 ql-active Class.ql-active { color: #497749;}3.2. 实现撤消、恢复、插入图像和删除操作。 "text-align:center">

首先将对应的事件绑定到标签上。

                                                        。 p>只需调用 EditorContext API

undo() { this.editorCtx.undo() }

恢复重做

类似

redo() { this.editorCtx. ) }

插入图片insertImage

同理

insertImage() { const that = this wx.chooseImage({ count: 1, success: function (res) { wx.showLoading({ title: ' 正在上传 udPath: `news/upload/${time.formatTime(new Date)}/${Math.floor(Math.random()) * 100000000)}.png`, // 上传到云端的路径 filePath: res.tempFilePaths[ 0], success: cover => { that.editorCtx.insertImage({ that.editorCtx.data: { id: cover.fileID, 角色: 'God' }, success: 函数tion () { wx.hideLoading()clear

类似

clear() { this.editorCtx.clear({ success: function (res) { console.log("清除成功") } })

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

微信小程序下载

微信 是一款移动通信软件，支持通过蜂窝网络发送语音消息、视频、照片和文本。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

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

• 微信小程序开发工具概述（微信小程序开发）
• 微信小程序文本区域概述及输入问题（微信小程序Rich-Text）
• 微信小程序开发的宿主环境详解（微信小程序开发环境搭建流程）
• 微信小程序架构基本原理详解（微信小程序B/S或C/S架构）
• 来说说微信小程序中的事件绑定（微信小程序中的一个按钮可以绑定多个事件吗？）

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