WeChat Mini Program Practical Project Rich Text Editor Implementation

This article brings you relevant knowledge aboutWeChat 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]

1. Achieve the effect

The effect achieved As shown below:

The implemented function points are as follows:

• Bold, italic, underline text, alignment
• Undo , restore, insert pictures, delete functions.

2. Create a publishing page and implement the basic layout

First create a publishing pagearticleand generate it through configuration inapp.jsonpage.

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

Inarticle.wxml, write the structure:

     文章类型：{{objectArray[index].name}}                             发布    

Inarticle.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 theiconfont.wxssfont icon in the header ofarticle.wxss. iconfont.wxss file acquisition address

@import "./assets/iconfont.wxss";

3. Realize the function of the operation bar in the editing area

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 instanceEditorContext, get it throughwx.createSelectorQuery, we are on the pagePagefunction, create theonEditorReadyfunction 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 thebindreadyof the rich text editor On the attribute, it is triggered after the initialization of the rich text editor is completed, thereby obtaining the instance.

3.1. Implement text bolding, italics, text underline, left alignment, center alignment, right alignment

How do we modify the style of the text?

• Modify the style through theAPIprovided by theEditorContextinstance: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 ofnameandvaluewe need are:

So how do we modify the text style by clicking the button?

• First we bind thenameandvalueattributes to the icon5a8028ccc7a7e27417bff9f05adf5932label and fill in the icon Corresponding tonameandvaluein the above picture, if there is novalue, just leave it blank.
• Then bind the eventformaton the parent tag, and use the event function to modify the style usingEditorContext.formatAPI.

Pageformatin 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?

• At this time we need to dynamically change the style of the font icon, such as changing the color after clicking the icon.

After consulting the documentation related toeditorWeChat applet development, thebindstatuschangeattribute binding method will be displayed when you passContextThis 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 theformatsobject indatato store the style attributes after clicking. Then when the icon button is clicked, the set style is obtained and stored informatsthrough thebindstatuschangebinding method; when the template is rendered, in5a8028ccc7a7e27417bff9f05adf5932On theclassattribute, add{{formats.align === 'right' ? 'ql-active' : ''}}(such as text to the right), when If you click on this icon, then there is this attribute informats, then add our dynamic class nameql-activeto change the icon color.

具体实现

• 对editor标签属性bindstatuschange绑定方法onStatusChange

onStatusChange(e) { const formats = e.detail this.setData({ formats }) }

• 在图标5a8028ccc7a7e27417bff9f05adf5932标签上，添加{{formats.align === 'right' ? 'ql-active' : ''}}

• 在article.wxss添加ql-active类

.ql-active { color: #497749; }

3.2. 实现撤销、恢复、插入图片、删除操作

首先在5a8028ccc7a7e27417bff9f05adf5932标签上绑定相应的事件：

撤销 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!