????????在開(kāi)發(fā)小程序的時(shí)候，需要用到發(fā)布文章這個(gè)功能，于是就需要使用富文本編輯器。而微信小程序則正好有editor這個(gè)組件，不過(guò)editor組件的功能，還需要我們自己去調(diào)用富文本編輯器的api去自定義。富文本在wxml中可使用<rich-text nodes="{{ value }}"></<rich-text>標(biāo)簽展示。想直接用的可以跳到二、（4）。如果你也向我一樣從0開(kāi)始搭建，那真的是鈦褲辣！
一、準(zhǔn)備工作
先看看效果圖，然后我們?cè)龠M(jìn)一步進(jìn)行搭建。
?????????我們先看官方文檔，搭建上面的這種編輯器需要用到bindready(初始化實(shí)例編輯器)、bindfocus(光標(biāo)聚焦)、bindblur(光標(biāo)失焦)、bindinput(輸入內(nèi)容時(shí)觸發(fā))、bindstatuschange(工具欄狀態(tài)發(fā)生變化時(shí)觸發(fā)）這幾個(gè)屬性。
點(diǎn)擊相關(guān) api：EditorContext可以看到這樣一些方法，在調(diào)用這些方法之前需要?jiǎng)?chuàng)建一個(gè)實(shí)例，只有通過(guò)這個(gè)實(shí)例才能夠調(diào)用以下的這些方法。創(chuàng)建實(shí)例需要用到?wx.createSelectorQuery?，相關(guān)創(chuàng)建的代碼放到下文。創(chuàng)建完實(shí)例后，我們將會(huì)用到以下幾個(gè)方法：
1、EditorContext.format(string name, string value)（修改樣式，name和value需要在wxml進(jìn)行綁定）
2、EditorContext.insertDivider()（插入分割線(xiàn)，需要綁定事件）
3、EditorContext.insertImage(Object object)（插入圖片，需要綁定事件）
4、EditorContext.blur()（鍵盤(pán)失焦時(shí)收起鍵盤(pán)）
EditorContexthttps://developers.weixin.qq.com/miniprogram/dev/api/media/editor/EditorContext.html
?
?二、開(kāi)始創(chuàng)建
1、wxml如下代碼
????????在editor中綁定bindready(初始化實(shí)例編輯器)、bindfocus(光標(biāo)聚焦)、bindblur(光標(biāo)失焦)、bindinput(輸入內(nèi)容時(shí)觸發(fā))、bindstatuschange(工具欄狀態(tài)發(fā)生變化時(shí)觸發(fā)）這幾個(gè)屬性。在toolBar中綁定catchtouchend(點(diǎn)擊工具欄時(shí)獲取狀態(tài))。我們現(xiàn)在只需要管這幾個(gè)事件、其他的class和style樣式可以忽略。
<!--pages/oneEditor/oneEditor.wxml-->
<view>
<editor id="editor" bindready="onEditorReady" bindinput="onInput" bindblur="onBlur" bindstatuschange="onStatusChange">
</editor>
</view>
<view class="toolBar" catchtouchend="format">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</view>2、JS代碼如下，我們按照函數(shù)調(diào)用的順序進(jìn)行講解
（1）在初始化編輯器時(shí)需要用到<editor>中的id="editor"? bindready="onEditorReady"，這里用到的上面講的wx.createSelectorQuery()。oneEditor就是我們生成的實(shí)例，隨便你取啥名，到時(shí)候調(diào)用方法的時(shí)候使用，例如this.oneEditor.format()。
onEditorReady(){
var that=this
// 初始化一個(gè)實(shí)例
wx.createSelectorQuery().select('#editor').context(res=>{
that.oneEditor=res.context
console.log(res.context)
}).exec()
},（2） 初始化完成后（因?yàn)閏lass和style還沒(méi)有添加，所以你們顯示的效果圖和我的不一樣），可以用到<editor>中的οninput="onInput"了，輸入1111111可以看到輸出的html。
onInput(e){
console.log(e.detail.delta.ops)
console.log("html",e.detail.html)
},
（3）<editor>中的?bindblur="onBlur" ，這里就用到上面的實(shí)例了，調(diào)用這個(gè)方法可以在失焦的時(shí)候收起鍵盤(pán)。
onBlur(e){
console.log(e)
this.oneEditor.blur()
},?（4）<editor>中的bindstatuschange="onStatusChange"就需要我們?cè)诓渴鹜阠lass后講解了，因?yàn)檫@里涉及到工具欄狀態(tài)的變化，而我們工具欄還沒(méi)有部署。下面開(kāi)始部署工具欄的樣式，回到組件那個(gè)頁(yè)面，因?yàn)槲覀冃枰玫焦俜降臉邮胶蛨D標(biāo)，所以得去官網(wǎng)找樣式代碼。
?
（5）?這個(gè)代碼片段其實(shí)就是一個(gè)編輯器了，但是我們從0開(kāi)始搭建真的是鈦褲辣！（體驗(yàn)的就是一個(gè)過(guò)程的樂(lè)趣）。然后我們把common移到我們自己的項(xiàng)目中去，需要和你的編輯器同層級(jí)（方便應(yīng)用），把a(bǔ)ssets移到你的編輯器里面，就行了。
?
?然后我們的class就可以全部加上啦（再加上上面的wxml怕你們忘了）wxml代碼如下：
<!--pages/oneEditor/oneEditor.wxml-->
<view class="editor_container" style="height:{{editorHeight}}rpx">
<editor id="editor" class="editor" placeholder="{{placeholder}}" bindready="onEditorReady" bindinput="onInput" bindblur="onBlur" bindstatuschange="onStatusChange">
</editor>
</view>
<view class="toolBar" catchtouchend="format" style="bottom:{{keyboardHeight}}px">
<i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
<i class="iconfont icon-fengexian" catchtouchend="addDivider"></i>
<i class="iconfont icon-format-header-1 {{formats.header===1?'active':''}}" data-name="header" data-value="1"></i>
<i class="iconfont icon-format-header-2 {{formats.header===2?'active':''}}" data-name="header" data-value="2"></i>
<i class="iconfont icon-format-header-3 {{formats.header===3?'active':''}}" data-name="header" data-value="3"></i>
<i class="iconfont icon-format-header-4 {{formats.header===4?'active':''}}" data-name="header" data-value="4"></i>
<i class="iconfont icon-zitixiahuaxian {{formats.underline?'active':''}}" data-name="underline"></i>
<i class="iconfont icon-zitijiacu {{formats.bold?'active':''}}" data-name="bold"></i>
<i class="iconfont icon-zitixieti {{formats.italic=='em'?'active':''}}" data-name="italic"></i>
<i class="iconfont icon-zuoduiqi {{formats.align=='left'?'active':''}}" data-name="align" data-value="left"></i>
<i class="iconfont icon-juzhongduiqi {{formats.align=='center'?'active':''}}" data-name="align"
data-value="center"></i>
<i class="iconfont icon-youduiqi {{formats.align=='right'?'active':''}}" data-name="align" data-value="right"></i>
<i class="iconfont icon-zuoyouduiqi {{formats.align=='justify'?'active':''}}" data-name="align"
data-value="justify"></i>
<i class="iconfont icon-zitishanchuxian {{formats.strike=='del'?'active':''}}" data-name="strike"></i>
<i class="iconfont icon-clearedformat" catchtouchend="clearFormat"></i>
</view>（6）wxss代碼入下，引入官方的樣式和圖標(biāo)，具體的圖標(biāo)樣式還需要自己在asserts中的iconfont去尋找引用格式為class="iconfont icon+具體樣式",樣式有了。那么上面的{{formats}}、data-name、datavalue是咋回事捏。下面開(kāi)始講。
/* pages/oneEditor/oneEditor.wxss */
@import "../common/lib/weui.wxss";
@import "./assets/iconfont.wxss";
.tool{
margin-left: 10rpx;
}
.iconfont {
display: inline-block;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 20px;
}
.editor_container {
/* position: absolute; */
top: 0;
left: 0;
width: 100%;
}
.editor {
box-sizing: border-box;
width: 100%;
height: 100%;
font-size: 16px;
line-height: 1.5;
overflow: auto;
padding: 10px 10px 20px 10px;
border: 1px solid #ECECEC;
}
.active{
color: #409EFF;
}
.toolBar{
box-sizing: border-box;
padding: 0 10px;
height: 50px;
width: 100%;
position: fixed;
left: 0;
right: 100%;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #ECECEC;
border-left: none;
border-right: none;
}（7）怕看岔了，于是把上面wxml再粘貼下來(lái)了，這里講bindstatuschange="onStatusChange"和catchtouchend="format"這倆是一塊的。
<!--pages/oneEditor/oneEditor.wxml-->
<view class="editor_container" style="height:{{editorHeight}}rpx">
<editor id="editor" class="editor" placeholder="{{placeholder}}" bindready="onEditorReady" bindinput="onInput" bindblur="onBlur" bindstatuschange="onStatusChange">
</editor>
</view>
<view class="toolBar" catchtouchend="format" style="bottom:{{keyboardHeight}}px">
<i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
<i class="iconfont icon-fengexian" catchtouchend="addDivider"></i>
<i class="iconfont icon-format-header-1 {{formats.header===1?'active':''}}" data-name="header" data-value="1"></i>
<i class="iconfont icon-format-header-2 {{formats.header===2?'active':''}}" data-name="header" data-value="2"></i>
<i class="iconfont icon-format-header-3 {{formats.header===3?'active':''}}" data-name="header" data-value="3"></i>
<i class="iconfont icon-format-header-4 {{formats.header===4?'active':''}}" data-name="header" data-value="4"></i>
<i class="iconfont icon-zitixiahuaxian {{formats.underline?'active':''}}" data-name="underline"></i>
<i class="iconfont icon-zitijiacu {{formats.bold?'active':''}}" data-name="bold"></i>
<i class="iconfont icon-zitixieti {{formats.italic=='em'?'active':''}}" data-name="italic"></i>
<i class="iconfont icon-zuoduiqi {{formats.align=='left'?'active':''}}" data-name="align" data-value="left"></i>
<i class="iconfont icon-juzhongduiqi {{formats.align=='center'?'active':''}}" data-name="align"
data-value="center"></i>
<i class="iconfont icon-youduiqi {{formats.align=='right'?'active':''}}" data-name="align" data-value="right"></i>
<i class="iconfont icon-zuoyouduiqi {{formats.align=='justify'?'active':''}}" data-name="align"
data-value="justify"></i>
<i class="iconfont icon-zitishanchuxian {{formats.strike=='del'?'active':''}}" data-name="strike"></i>
<i class="iconfont icon-clearedformat" catchtouchend="clearFormat"></i>
</view>（8）onStatusChange，先在<i>中綁定data-name，name的名字參考官方文檔，我點(diǎn)擊了斜體（看52行），然后這個(gè)函數(shù)就把工具欄的開(kāi)啟狀態(tài)記錄下來(lái)了，于是我們只需根據(jù)formats的值來(lái)判斷是否開(kāi)啟了工具欄的某個(gè)功能，改變class中的觸發(fā)樣式，比如我把a(bǔ)ctive設(shè)置成了藍(lán)色。
（9）?format是用來(lái)保存當(dāng)前樣式的，比如我點(diǎn)擊H1，會(huì)記錄一個(gè)name：header標(biāo)識(shí)這個(gè)是標(biāo)題，而value：1標(biāo)識(shí)這是一個(gè)一級(jí)標(biāo)題，其他的類(lèi)似。
?3、通過(guò)實(shí)例調(diào)用api
只需要在wxml綁定函數(shù)，并在函數(shù)里面調(diào)用api就可以了，例如插入下劃線(xiàn)，我在wxml用catchtouchend="addDivider"綁定了一個(gè)事件：
addDivider(){
this.oneEditor.insertDivider(res=>{
console.log(res)
})
},
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-488088.html
?還有一些調(diào)整鍵盤(pán)高度和上傳圖片這里就不講了吧，直接上代碼。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-488088.html
onLoad: function (options) {
//獲取鍵盤(pán)高度
wx.onKeyboardHeightChange((res) => {
console.log("KeyboardHeight",res.height)
this.oneEditor.scrollIntoView()
this.setData({
keyboradHight:res.height
})
})
},insertImage(){
var that=this
wx.chooseMedia({
count:1,
mediaType:['image'],
sourceType:['album', 'camera'],
success(res){
console.log(res)
let url=res.tempFiles[0].tempFilePath
that.oneEditor.insertImage({
src:url,
extClass:"image",
alt:"圖片加載錯(cuò)誤",
width:"100%",
height:"300rpx"
})
}
})
},到了這里，關(guān)于微信小程序editor富文本編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
