微信小程序中富文本編輯器的實(shí)現(xiàn)

第微信小程序中富文本編輯器的實(shí)現(xiàn)小程序也是有富文本編輯器這個(gè)控件的，別說(shuō)，之前我還真沒注意。

官方文檔

官方文檔中給出的東西倒是不多，具體的代碼示例在下圖紅框中標(biāo)注的位置：

示例代碼大概是這個(gè)樣子：

通過(guò)官方的示例，我這邊大概了解了一下微信小程序editor的使用，我這里封裝了一個(gè)自定義組件：

效果如下圖所示：

功能展示大概就是這個(gè)樣子，我這里放一下我組件的全部代碼：

myEditor.js

//api請(qǐng)求類

constAPI=require("../../request/api.js").report;

//公共函數(shù)庫(kù)

constutils=require("../../utils/util.js");

//加密字符

constconstant=require("../../utils/constant.js");

//雙語(yǔ)字典

constlanguageUtils=require("../../language/languageUtils");

//獲取應(yīng)用實(shí)例

constapp=getApp();

Component({

*組件的屬性列表

properties:{

project_id:{

type:Number,

value:"",

//編輯器默認(rèn)提示語(yǔ)

placeholder:{

type:String,

value:"開始編輯吧...",

//修改時(shí)顯示內(nèi)容

richTextContents:{

type:String,

value:"",

//編輯的富文本的索引

index:{

type:Number,

value:0,

*組件的初始數(shù)據(jù)

data:{

//用戶手機(jī)鍵盤得高度，大于0表示打開了鍵盤

*組件的方法列表

methods:{

*@name:編輯器初始化完成時(shí)觸發(fā)

*@author:camellia

*@date:20251220

onEditorReady(){

letself=this;

this.triggerEvent("onEditorReady");

//獲取編輯器實(shí)例

self

.createSelectorQuery()

.select("#editor")

.context((res)={

self.editorCtx=res.context;

self.setContents(perties.richTextContents);//設(shè)置富文本內(nèi)容

.exec();

*@name:點(diǎn)擊工具欄格式化編輯文本

*@author:camellia

*@date:20251220

format(e){

letself=this;

let{name,value}=e.target.dataset;

//富文本編輯器格式化內(nèi)容方法

self.editorCtx.format(name,value);

*@name:工具欄選項(xiàng)選中，圖標(biāo)出現(xiàn)選中樣式

*@author:camellia

*@date:20251220

onStatusChange(e){

letself=this;

self.setData({

formats:e.detail,

*@name:設(shè)置富文本內(nèi)容

*@author:camellia

*@date:2025-12-23

*@param:rechtextstring富文本內(nèi)容

setContents(rechtext)

this.editorCtx.setContents({

html:rechtext,

success:(res)={

//富文本內(nèi)容設(shè)置成功

//console.log("[setContentssuccess]",res);

*@name:富文本編輯器輸入時(shí)，獲取值

*@author:camellia

*@date:20251220

getEditorContent()

letself=this;

//富文本編輯器獲取內(nèi)容方法

self.editorCtx.getContents({

success:(res)={

letarray=[];

array["html"]=res.html;

array["index"]=perties.index;

//通過(guò)自定義事件把內(nèi)容傳到父組件

self.triggerEvent("getEditorValue",array);

myEditor.json

{

"component":true,

"usingComponents":{}

myEditor.wxss

@import"./icon/icon.wxss";

.ql-container{

padding:12rpx;

border:1rpxsolid#707070;

/*工具欄*/

.toolbar{

z-index:999;

box-sizing:border-box;

padding:020rpx;

height:100rpx;

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

border:2rpxsolid#ECECEC;

border-left:none;

border-right:none;

background-color:#FFFFFF;

/*工具欄點(diǎn)擊時(shí)出現(xiàn)選中樣式*/

.ql-active{

color:#22C704;

myEditor.wxml

viewcatchtouchend="format"

icatchtouchend="insertImage"/i

iclass="iconfonticon-format-header-2{{formats.header===2'ql-active':''}}"data-name="header"data-value="{{2}}"/i

iclass="iconfonticon-format-header-3{{formats.header===3'ql-active':''}}"data-name="header"data-value="{{3}}"/i

iclass="iconfonticon-zitijiacu{{formats.bold'ql-active':''}}"data-name="bold"/i

iclass="iconfonticon-zitixieti{{formats.italic'ql-active':''}}"data-name="italic"/i

iclass="iconfonticon-zitixiahuaxian{{formats.underline'ql-active':''}}"data-name="underline"/i

idata-name="list"data-value="check"/i

iclass="iconfonticon-youxupailie{{formats.list==='ordered''ql-active':''}}"data-name="list"data-value="ordered"/i

iclass="iconfonticon-wuxupailie{{formats.list==='bullet''ql-active':''}}"data-name="list"data-value="bullet"/i

/view