以下將展示微信小程序之表單組件editor源碼官方組件能力，組件樣式僅供參考，開發(fā)者可根據(jù)自身需求定義組件樣式，具體屬性參數(shù)詳見小程序開發(fā)文檔。
功能描述：
富文本編輯器，可以對圖片、文字進行編輯。
編輯器導出內(nèi)容支持帶標簽的 html和純文本的 text，編輯器內(nèi)部采用 delta 格式進行存儲。
通過setContents接口設置內(nèi)容時，解析插入的 html 可能會由于一些非法標簽導致解析錯誤，建議開發(fā)者在小程序內(nèi)使用時通過 delta 進行插入。
富文本組件內(nèi)部引入了一些基本的樣式使得內(nèi)容可以正確的展示，開發(fā)時可以進行覆蓋。需要注意的是，在其它組件或環(huán)境中使用富文本組件導出的 html 時，需要額外引入 這段樣式，并維護<ql-container><ql-editor></ql-editor></ql-container>的結構。
圖片控件僅初始化時設置有效。
相關 api：EditorContext
屬性說明：
編輯器內(nèi)支持部分 HTML 標簽和內(nèi)聯(lián)樣式，不支持class和id
支持的標簽
不滿足的標簽會被忽略，<div>會被轉行為<p>儲存。
支持的內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式僅能設置在行內(nèi)元素或塊級元素上，不能同時設置。例如 font-size 歸類為行內(nèi)元素屬性，在 p 標簽上設置是無效的。
Bug& Tip
1.tip:使用catchtouchend 綁定事件則不會使編輯器失去焦點(2.8.3)
2.tip:插入的 html 中事件綁定會被移除
3.tip:formats 中的color 屬性會統(tǒng)一以 hex 格式返回
4.tip:粘貼時僅純文本內(nèi)容會被拷貝進編輯器
5.tip:插入 html 到編輯器內(nèi)時，編輯器會刪除一些不必要的標簽，以保證內(nèi)容的統(tǒng)一。例如<p><span>xxx</span></p>會改寫為
xxx
6.tip:編輯器聚焦時頁面會被上推，系統(tǒng)行為以保證編輯區(qū)可見
示例代碼：
JAVASCRIPT：
Page({
? data: {
? ? formats: {},
? ? readOnly: false,
? ? placeholder: '開始輸入...',
? ? editorHeight: 300,
? ? keyboardHeight: 0,
? ? isIOS: false
? },
? readOnlyChange() {
? ? this.setData({
? ? ? readOnly: !this.data.readOnly
? ? })
? },
? onLoad() {
? ? const platform = wx.getSystemInfoSync().platform
? ? const isIOS = platform === 'ios'
? ? this.setData({ isIOS})
? ? const that = this
? ? this.updatePosition(0)
? ? let keyboardHeight = 0
? ? wx.onKeyboardHeightChange(res => {
? ? ? if (res.height === keyboardHeight) return
? ? ? const duration = res.height > 0 ? res.duration * 1000 : 0
? ? ? keyboardHeight = res.height
? ? ? setTimeout(() => {
? ? ? ? wx.pageScrollTo({
? ? ? ? ? scrollTop: 0,
? ? ? ? ? success() {
? ? ? ? ? ? that.updatePosition(keyboardHeight)
? ? ? ? ? ? that.editorCtx.scrollIntoView()
? ? ? ? ? }
? ? ? ? })
? ? ? }, duration)
? ? })
? },
? updatePosition(keyboardHeight) {
? ? const toolbarHeight = 50
? ? const { windowHeight, platform } = wx.getSystemInfoSync()
? ? let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
? ? this.setData({ editorHeight, keyboardHeight })
? },
? calNavigationBarAndStatusBar() {
? ? const systemInfo = wx.getSystemInfoSync()
? ? const { statusBarHeight, platform } = systemInfo
? ? const isIOS = platform === 'ios'
? ? const navigationBarHeight = isIOS ? 44 : 48
? ? return statusBarHeight + navigationBarHeight
? },
? onEditorReady() {
? ? const that = this
? ? wx.createSelectorQuery().select('#editor').context(function (res) {
? ? ? that.editorCtx = res.context
? ? }).exec()
? },
? blur() {
? ? this.editorCtx.blur()
? },
? format(e) {
? ? let { name, value } = e.target.dataset
? ? if (!name) return
? ? // console.log('format', name, value)
? ? this.editorCtx.format(name, value)
? },
? onStatusChange(e) {
? ? const formats = e.detail
? ? this.setData({ formats })
? },
? insertDivider() {
? ? this.editorCtx.insertDivider({
? ? ? success: function () {
? ? ? ? console.log('insert divider success')
? ? ? }
? ? })
? },
? clear() {
? ? this.editorCtx.clear({
? ? ? success: function (res) {
? ? ? ? console.log("clear success")
? ? ? }
? ? })
? },
? removeFormat() {
? ? this.editorCtx.removeFormat()
? },
? insertDate() {
? ? const date = new Date()
? ? const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
? ? this.editorCtx.insertText({
? ? ? text: formatDate
? ? })
? },
? insertImage() {
? ? const that = this
? ? wx.chooseImage({
? ? ? count: 1,
? ? ? success: function (res) {
? ? ? ? that.editorCtx.insertImage({
? ? ? ? ? src: res.tempFilePaths[0],
? ? ? ? ? data: {
? ? ? ? ? ? id: 'abcd',
? ? ? ? ? ? role: 'god'
? ? ? ? ? },
? ? ? ? ? width: '80%',
? ? ? ? ? success: function () {
? ? ? ? ? ? console.log('insert image success')
? ? ? ? ? }
? ? ? ? })
? ? ? }
? ? })
? }
})
WXML：
<view class="container" style="height:{{editorHeight}}px;">
? <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady">
? </editor>
</view>
<view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px">
? <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>
?
WXSS：
.container {
? position: absolute;
? top: 0;
? left: 0;
? width: 100%;
}
.ql-container {
? 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;
}
.ql-active {
? color: #22C704;
}
.iconfont {
? display: inline-block;
? width: 30px;
? height: 30px;
? cursor: pointer;
? font-size: 20px;
}
.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;
}
版權聲明：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，如涉及版權問題，請聯(lián)系我們第一時間處理。
原文鏈接地址：https://developers.weixin.qq.com/miniprogram/dev/component/editor.html
