第微信小程序中富文本編輯器的實現小程序也是有富文本編輯器這個控件的，別說，之前我還真沒注意。

官方文檔

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

示例代碼大概是這個樣子：

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

效果如下圖所示：

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

myEditor.js

//api請求類

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

//公共函數庫

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

//加密字符

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

//雙語字典

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

//獲取應用實例

constapp=getApp();

Component({

*組件的屬性列表

properties:{

project_id:{

type:Number,

value:"",

//編輯器默認提示語

placeholder:{

type:String,

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

//修改時顯示內容

richTextContents:{

type:String,

value:"",

//編輯的富文本的索引

index:{

type:Number,

value:0,

*組件的初始數據

data:{

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

*組件的方法列表

methods:{

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

*@author:camellia

*@date:20251220

onEditorReady(){

letself=this;

this.triggerEvent("onEditorReady");

//獲取編輯器實例

self

.createSelectorQuery()

.select("#editor")

.context((res)={

self.editorCtx=res.context;

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

.exec();

*@name:點擊工具欄格式化編輯文本

*@author:camellia

*@date:20251220

format(e){

letself=this;

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

//富文本編輯器格式化內容方法

self.editorCtx.format(name,value);

*@name:工具欄選項選中，圖標出現選中樣式

*@author:camellia

*@date:20251220

onStatusChange(e){

letself=this;

self.setData({

formats:e.detail,

*@name:設置富文本內容

*@author:camellia

*@date:2025-12-23

*@param:rechtextstring富文本內容

setContents(rechtext)

this.editorCtx.setContents({

html:rechtext,

success:(res)={

//富文本內容設置成功

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

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

*@author:camellia

*@date:20251220

getEditorContent()

letself=this;

//富文本編輯器獲取內容方法

self.editorCtx.getContents({

success:(res)={

letarray=[];

array["html"]=res.html;

array["index"]=perties.index;

//通過自定義事件把內容傳到父組件

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;

/*工具欄點擊時出現選中樣式*/

.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