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

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

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

1. 实现效果

实现的效果如下图：

实现的功能点如下：

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

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

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

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

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

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; }登录后复制

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