一、效果图展示
模拟器及pc 端效果图 手机端就不贴了
二、把官方示例copy到自己的项目传送门
三、改一改上传图片功能
js
insertImage() {
const that = this
wx.chooseImage({
// count:1 一次选择图片的个数
success: function (response) {
// 多张图片上传
response.tempFilePaths.map(item => {
wx.uploadFile({
url: '上传图片api',
name: 'file',
formData: {
systemId: '49603D09F8B64F068F77B7FC965410E0' // 需要的值
},
filePath: item,
success: res => {
// 把图片插入到富文本
that.editorCtx.insertImage({
src: JSON.parse(res.data).data.url,
data: {
id: 'abcd',
role: 'god'
},
width: '80%',
success: function () {
console.log('insert image success')
}
})
},
fail: err1 => {
console.log(err1, '是比啊了');
}
})
})
},
fail: err => {
console.log(err, '你失败了');
}
})
}
四、兼容pc端 示例中的代码只适合手机端 所以模拟器上没法使用
原理:示例中只区分了ios 和安卓 并且keyboardHeight 时不显示工具栏 这里pc被当成了安卓 所以不显示
解决: 1、区分pc和手机端 2、pc端的工具栏一般放在顶部
js
// 区分手机端和pc端
const platform = wx.getSystemInfoSync().platform
this.setData({
isPC: platform == 'windows' || platform == 'mac' || platform == 'devtools' ? true : false
})
html
// 自己研读isPC的功能
<view class="container" style="height:{{editorHeight}}px;top: {{isPC?'50px':''}};">
<editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady" bindinput='editorIps' read-only="{{readOnly}}">
</editor>
</view>
<!-- 手机端的工具栏 -->
<view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px" wx:if="{{!isPC}}">
<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>
<!-- pc端的工具栏 去掉了hidden属性 及让工具栏位于顶部 -->
<view class="toolbar" catchtouchend="format" style="top:0" wx:if="{{isPC}}">
<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 bindinput事件为关键事件 用于获取实时数据
html
<editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindinput='editorIps' read-only="{{readOnly}}">
</editor>
js
editorIps(e) {
this.setData({
editorDetail: e.detail.html,
})