Home > Article > WeChat Applet > WeChat Mini Program Practical Project Rich Text Editor Implementation
This article brings you relevant knowledge about WeChat Mini Program, which mainly introduces practical examples of rich text editor, including creating a publishing page, implementing basic layout, and implementing editing. Let’s take a look at the functions of the area operation bar and other contents. I hope it will be helpful to everyone.
[Related learning recommendations: 小program learning tutorial]
The effect achieved As shown below:
The implemented function points are as follows:
First create a publishing page article and generate it through configuration in app.json page.
"pages": [ "pages/article/article" ]
In article.wxml, write the structure:
<view> <!-- 文章类型 --> <view> <picker bindchange="bindPickerChange" model:value="{{index}}" range="{{array}}"> <view class="picker"> 文章类型:{{objectArray[index].name}} </view> </picker> </view> <!-- 文章标题 --> <view> <input name="title" class="title" placeholder="请输入文章标题" maxlength="18" model:value="{{title}}"></input> </view> <!-- 编辑区 --> <view class="container"> <view class="page-body"> <view class='wrapper'> <!-- 操作栏 --> <view class='toolbar' bindtap="format"> <i class="iconfont icon-zitijiacu"></i> <i class="iconfont icon-zitixieti"></i> <i class="iconfont icon-zitixiahuaxian"></i> <i class="iconfont icon-zuoduiqi"></i> <i class="iconfont icon-juzhongduiqi"></i> <i class="iconfont icon-youduiqi"></i> <i class="iconfont icon-undo"></i> <i class="iconfont icon-redo"></i> <i class="iconfont icon-charutupian"></i> <i class="iconfont icon-shanchu"></i> </view> <!-- 文章内容区,富文本编辑器 --> <editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize> </editor> <!-- 发布按钮 --> <view class="button" bindtap="formSubmit">发布</view> </view> </view> </view> </view>
In article.wxss, write the basic style:
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; }
At this time we will find that the middle operation bar icon is not displayed. We need to introduce the iconfont.wxss font icon in the header of article.wxss. iconfont.wxss file acquisition address
@import "./assets/iconfont.wxss";
This article only implements the function of the operation bar and realizes rich text editing. For other article types, please implement it yourself. , it’s not difficult!
First, we need to get the rich text editor instance EditorContext, get it through wx.createSelectorQuery, we are on the page Page function, create the onEditorReady function to obtain the instance:
onEditorReady() { const that = this wx.createSelectorQuery().select('#editor').context(function (res) { that.editorCtx = res.context }).exec() }
Then bind this method to the bindready of the rich text editor On the attribute, it is triggered after the initialization of the rich text editor is completed, thereby obtaining the instance.
<editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" read-only="{{readOnly}}" bindready="onEditorReady">
How do we modify the style of the text?
EditorContext.format(string name, string value)
. name
: CSS attribute; value
: value. By consulting the WeChat applet development documentation, we can see that to achieve the above functions, the values of name
and value
we need are:
So how do we modify the text style by clicking the button?
name
and value
attributes to the icon 5a8028ccc7a7e27417bff9f05adf5932
label and fill in the icon Corresponding to name
and value
in the above picture, if there is no value
, just leave it blank. EditorContext.format
API. <view class='toolbar' bindtap="format"> <i class="iconfont icon-zitijiacu data-name="bold"></i> <i class="iconfont icon-zitixieti data-name="italic"></i> <i class="iconfont icon-zitixiahuaxian data-name="underline"></i> <i class="iconfont icon-zuoduiqi data-name="align" data-value="left"></i> <i class="iconfont icon-juzhongduiqi data-name="align" data-value="center"></i> <i class="iconfont icon-youduiqi data-name="align" data-value="right"></i> </view>
Page format in function Function:
format(e) { let { name, value } = e.target.dataset if (!name) return this.editorCtx.format(name, value) },
Problem: When we click on the icon, the text is changed style, but the style of the icon has not changed, and we cannot be prompted for the current style status of the text. So how to solve it?
After consulting the documentation related to editor WeChat applet development, the bindstatuschange attribute binding method will be displayed when you pass Context This method is triggered when changing the style in the editor, and will return the style that has been set in the selection.
Then we can add the formats object in data to store the style attributes after clicking. Then when the icon button is clicked, the set style is obtained and stored in formats through the bindstatuschange binding method; when the template is rendered, in 5a8028ccc7a7e27417bff9f05adf5932
On the class attribute, add {{formats.align === 'right' ? 'ql-active' : ''}}
(such as text to the right), when If you click on this icon, then there is this attribute in formats, then add our dynamic class name ql-active to change the icon color.
具体实现
<editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" read-only="{{readOnly}}" bindready="onEditorReady">
onStatusChange(e) { const formats = e.detail this.setData({ formats }) }
5a8028ccc7a7e27417bff9f05adf5932
标签上,添加{{formats.align === 'right' ? 'ql-active' : ''}}
<i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i> <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i> <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i> <i class="iconfont icon-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left"></i> <i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i> <i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align" data-value="right"></i>
.ql-active { color: #497749; }
首先在 5a8028ccc7a7e27417bff9f05adf5932
标签上绑定相应的事件:
<i class="iconfont icon-undo" bindtap="undo"></i> <i class="iconfont icon-redo" bindtap="redo"></i> <i class="iconfont icon-charutupian" bindtap="insertImage"></i> <i class="iconfont icon-shanchu" bindtap="clear"></i>
撤销 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") } }) }
【相关学习推荐:小程序学习教程】
The above is the detailed content of WeChat Mini Program Practical Project Rich Text Editor Implementation. For more information, please follow other related articles on the PHP Chinese website!