【相关学习推荐:小程序学习教程】
【资料图】
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实例提供的API:EditorContext.format(string name, string value)
,进行样式修改。name
:CSS属性;value
:值。通过查阅微信小程序开发文档可知,实现上述功能,我们需要的 name
和 value
的值为:
标签上绑定name
和 value
属性,填上图标所对应上图的 name
和 value
,无 value
的不填即可。然后在父标签上绑定事件 format,通过该事件函数,使用 EditorContext.format
API进行样式修改。
登录后复制
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中文网其它相关文章!