您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“微信小程序中富文本編輯器如何實(shí)現(xiàn)”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“微信小程序中富文本編輯器如何實(shí)現(xiàn)”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
示例代碼大概是這個(gè)樣子:
通過官方的示例,我這邊大概了解了一下微信小程序editor的使用,我這里封裝了一個(gè)自定義組件:
效果如下圖所示:
myEditor.js
// api 請求類 const API = require("../../request/api.js").report; // 公共函數(shù)庫 const utils = require("../../utils/util.js"); // 加密字符 const constant = require("../../utils/constant.js"); // 雙語字典 const languageUtils = require("../../language/languageUtils"); // 獲取應(yīng)用實(shí)例 const app = getApp(); Component({ /** * 組件的屬性列表 */ properties: { project_id: { type: Number, value: "", }, //編輯器默認(rèn)提示語 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: 20211220 */ onEditorReady() { let self = this; this.triggerEvent("onEditorReady"); // 獲取編輯器實(shí)例 self .createSelectorQuery() .select("#editor") .context((res) => { self.editorCtx = res.context; self.setContents(self.properties.richTextContents); //設(shè)置富文本內(nèi)容 }) .exec(); }, /** * @name: 點(diǎn)擊工具欄格式化編輯文本 * @author: camellia * @date: 20211220 */ format(e) { let self = this; let { name, value } = e.target.dataset; // 富文本編輯器格式化內(nèi)容方法 self.editorCtx.format(name, value); }, /** * @name: 工具欄選項(xiàng)選中,圖標(biāo)出現(xiàn)選中樣式 * @author: camellia * @date: 20211220 */ onStatusChange(e) { let self = this; self.setData({ formats: e.detail, }); }, /** * @name: 設(shè)置富文本內(nèi)容 * @author: camellia * @date: 2021-12-23 * @param: rechtext string 富文本內(nèi)容 */ setContents(rechtext) { this.editorCtx.setContents({ html: rechtext, success: (res) => { // 富文本內(nèi)容設(shè)置成功 // console.log("[setContents success]", res); }, }); }, /** * @name: 富文本編輯器輸入時(shí),獲取值 * @author: camellia * @date: 20211220 */ getEditorContent() { let self = this; // 富文本編輯器獲取內(nèi)容方法 self.editorCtx.getContents({ success: (res) => { let array = []; array["html"] = res.html; array["index"] = self.properties.index; // 通過自定義事件把內(nèi)容傳到父組件 self.triggerEvent("getEditorValue", array); }, }); }, }, });
myEditor.json
{ "component": true, "usingComponents": {} }
myEditor.wxss
@import "./icon/icon.wxss"; .ql-container{ padding: 12rpx; border: 1rpx solid #707070; } /* 工具欄 */ .toolbar { z-index: 999; box-sizing: border-box; padding: 0 20rpx; height: 100rpx; width: 100%; display: flex; align-items: center; justify-content: space-between; border: 2rpx solid #ECECEC; border-left: none; border-right: none; background-color: #FFFFFF; } /* 工具欄點(diǎn)擊時(shí)出現(xiàn)選中樣式 */ .ql-active { color: #22C704; }
myEditor.wxml
<view class="toolbar" catchtouchend="format"> <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i> <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i> <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i> <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--checklist" data-name="list" data-value="check"></i> <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i> <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i> </view> <editor id="editor" class="ql-container" bindinput="getEditorContent" bindready="onEditorReady" bindstatuschange="onStatusChange"> </editor>
讀到這里,這篇“微信小程序中富文本編輯器如何實(shí)現(xiàn)”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。