本篇內(nèi)容介紹了“微信小程序富文本編輯器怎么實(shí)現(xiàn)”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
為伊美等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及伊美網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、伊美網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
實(shí)現(xiàn)的功能點(diǎn)如下:
文本加粗、斜體、下劃線,對(duì)齊方式
撤銷(xiāo)、恢復(fù)、插入圖片、刪除功能。
首先創(chuàng)建發(fā)布頁(yè)面 article,在 app.json 中通過(guò)配置生成頁(yè)面即可。
"pages": [ "pages/article/article" ]
在 article.wxml 中,書(shū)寫(xiě)結(jié)構(gòu):
文章類型:{{objectArray[index].name}} 發(fā)布
在 article.wxss,書(shū)寫(xiě)基本的樣式:
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í)我們會(huì)發(fā)現(xiàn)中間的操作欄圖標(biāo)不顯示,我們需要在 article.wxss 中頭部引入 iconfont.wxss 字體圖標(biāo)。 iconfont.wxss 文件獲取地址
@import "./assets/iconfont.wxss";
首先,我們需要獲取富文本編輯器實(shí)例 EditorContext,通過(guò) wx.createSelectorQuery 獲取,我們?cè)陧?yè)面 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>
通過(guò) EditorContext 實(shí)例提供的API:EditorContext.format(string name, string value)
,進(jìn)行樣式修改。
name
:CSS屬性;value
:值。
通過(guò)查閱微信小程序開(kāi)發(fā)文檔可知,實(shí)現(xiàn)上述功能,我們需要的 name
和 value
的值為:
那么我們?nèi)绾瓮ㄟ^(guò)點(diǎn)擊按鈕,來(lái)修改文本樣式呢?
首先我們?cè)趫D標(biāo) <i>
標(biāo)簽上綁定name
和 value
屬性,填上圖標(biāo)所對(duì)應(yīng)上圖的 name
和 value
,無(wú) value
的不填即可。
然后在父標(biāo)簽上綁定事件 format,通過(guò)該事件函數(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) },
問(wèn)題:當(dāng)我們點(diǎn)擊圖標(biāo)時(shí),改變了文本樣式,但是圖標(biāo)的樣式?jīng)]有改變,無(wú)法提示我們文本現(xiàn)在的樣式狀態(tài),那該怎么解決呢?
這時(shí)候我們就需要?jiǎng)討B(tài)改變字體圖標(biāo)的樣式了,比如點(diǎn)擊圖標(biāo)后,改變顏色。
通過(guò)查閱 editor 微信小程序開(kāi)發(fā)相關(guān)文檔后,bindstatuschange 屬性綁定的方法,會(huì)在當(dāng)你通過(guò) Context 方法改變編輯器內(nèi)樣式時(shí)觸發(fā),會(huì)返回選區(qū)已設(shè)置的樣式。
那么我們可以在 data 中,添加 formats 對(duì)象,存儲(chǔ)點(diǎn)擊后的樣式屬性。然后在點(diǎn)擊圖標(biāo)按鈕時(shí),通過(guò) bindstatuschange 綁定的方法,得到已設(shè)置的樣式存儲(chǔ)到 formats 中;在模板渲染時(shí),在<i>
的 class 屬性上,添加 {{formats.align === 'right' ? 'ql-active' : ''}}
(如文本向右),當(dāng)你點(diǎn)擊了這個(gè)圖標(biāo),那么 formats 中就有這個(gè)屬性了,那么就添加我們的動(dòng)態(tài)類名 ql-active 改變圖標(biāo)顏色。
具體實(shí)現(xiàn)
對(duì) 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)的事件:
撤銷(xiāo) 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)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
名稱欄目:微信小程序富文本編輯器怎么實(shí)現(xiàn)
URL分享:http://bm7419.com/article44/iioihe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、微信公眾號(hào)、域名注冊(cè)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)