您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“微信小程序富文本編輯器怎么實(shí)現(xiàn)”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
實(shí)現(xiàn)的功能點(diǎn)如下:
文本加粗、斜體、下劃線,對齊方式
撤銷、恢復(fù)、插入圖片、刪除功能。
首先創(chuàng)建發(fā)布頁面 article,在 app.json 中通過配置生成頁面即可。
"pages": [ "pages/article/article" ]
在 article.wxml 中,書寫結(jié)構(gòu):
文章類型:{{objectArray[index].name}} 發(fā)布
在 article.wxss,書寫基本的樣式:
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; }
這時(shí)我們會發(fā)現(xiàn)中間的操作欄圖標(biāo)不顯示,我們需要在 article.wxss 中頭部引入 iconfont.wxss 字體圖標(biāo)。 iconfont.wxss 文件獲取地址
@import "./assets/iconfont.wxss";
首先,我們需要獲取富文本編輯器實(shí)例 EditorContext,通過 wx.createSelectorQuery 獲取,我們在頁面 Page 函數(shù)中,創(chuàng)建 onEditorReady 函數(shù),用于獲取該實(shí)例:
onEditorReady() { const that = this wx.createSelectorQuery().select('#editor').context(function (res) { that.editorCtx = res.context }).exec() }
然后將該方法綁定到富文本編輯器的 bindready 屬性上,隨著富文本編輯器初始化完成后觸發(fā),從而獲取實(shí)例。
我們?nèi)绾涡薷奈谋镜臉邮侥兀?/p>
通過 EditorContext 實(shí)例提供的API:EditorContext.format(string name, string value)
,進(jìn)行樣式修改。
name
:CSS屬性;value
:值。
通過查閱微信小程序開發(fā)文檔可知,實(shí)現(xiàn)上述功能,我們需要的 name
和 value
的值為:
那么我們?nèi)绾瓮ㄟ^點(diǎn)擊按鈕,來修改文本樣式呢?
首先我們在圖標(biāo) <i>
標(biāo)簽上綁定name
和 value
屬性,填上圖標(biāo)所對應(yīng)上圖的 name
和 value
,無 value
的不填即可。
然后在父標(biāo)簽上綁定事件 format,通過該事件函數(shù),使用 EditorContext.format
API 進(jìn)行樣式修改。
Page 函數(shù)中的 format 函數(shù):
format(e) { let { name, value } = e.target.dataset if (!name) return this.editorCtx.format(name, value) },
問題:當(dāng)我們點(diǎn)擊圖標(biāo)時(shí),改變了文本樣式,但是圖標(biāo)的樣式?jīng)]有改變,無法提示我們文本現(xiàn)在的樣式狀態(tài),那該怎么解決呢?
這時(shí)候我們就需要動態(tài)改變字體圖標(biāo)的樣式了,比如點(diǎn)擊圖標(biāo)后,改變顏色。
通過查閱 editor 微信小程序開發(fā)相關(guān)文檔后,bindstatuschange 屬性綁定的方法,會在當(dāng)你通過 Context 方法改變編輯器內(nèi)樣式時(shí)觸發(fā),會返回選區(qū)已設(shè)置的樣式。
那么我們可以在 data 中,添加 formats 對象,存儲點(diǎn)擊后的樣式屬性。然后在點(diǎn)擊圖標(biāo)按鈕時(shí),通過 bindstatuschange 綁定的方法,得到已設(shè)置的樣式存儲到 formats 中;在模板渲染時(shí),在<i>
的 class 屬性上,添加 {{formats.align === 'right' ? 'ql-active' : ''}}
(如文本向右),當(dāng)你點(diǎn)擊了這個(gè)圖標(biāo),那么 formats 中就有這個(gè)屬性了,那么就添加我們的動態(tài)類名 ql-active 改變圖標(biāo)顏色。
具體實(shí)現(xiàn)
對 editor 標(biāo)簽屬性 bindstatuschange 綁定方法 onStatusChange
onStatusChange(e) {
const formats = e.detail
this.setData({
formats
})
}
在圖標(biāo) <i>
標(biāo)簽上,添加{{formats.align === 'right' ? 'ql-active' : ''}}
在 article.wxss 添加 ql-active 類
.ql-active { color: #497749; }
首先在 <i>
標(biāo)簽上綁定相應(yīng)的事件:
撤銷 undo
調(diào)用 EditorContext API 即可
undo() { this.editorCtx.undo() }
恢復(fù) 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") } }) }
“微信小程序富文本編輯器怎么實(shí)現(xiàn)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(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)容。