<view class='toolbar' bindtap="format">
<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-zitishanchuxian {{formats.strike ? 'ql-active' : ''}}" data-name="strike"></i>
<i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i>
<i class="iconfont icon-indent" data-name="indent" data-value="+1"></i>
<i class="iconfont icon-fengexian" bindtap="insertDivider"></i>
<i class="iconfont icon-charutupian" bindtap="insertImage"></i>
</view>
<editor id="editor" class="ql-container" placeholder="提⽰信息" showImgSize showImgToolbar showImgResize bindinput="getEditorValue" bindready="onEdit </editor>
</view>
</view>
wxss⽂件：
@import "../common/lib/weui.wxss";
@import "./assets/iconfont.wxss";
.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: 1px solid #ccc; */
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;
/* border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc; */
background: #fff;
margin-top: 20px;
font-size: 16px;
line-height: 1.5;
}
.ql-active {
color: #06c;
}
js⽂件：
Page({
data: {
formats: {},
readOnly: false,
placeholder: '开始输⼊...',
editorHeight: 300,
keyboardHeight: 0,
isIOS: false
},
readOnlyChange() {
this.setData({
readOnly: !adOnly
})
},
onLoad() {
const platform = wx.getSystemInfoSync().platform
const isIOS = platform === 'ios'
this.setData({ isIOS })
this.setData({ isIOS })
const that = this
this.updatePosition(0)
let keyboardHeight = 0
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)
})
},
/
** editor 部分 **/
//获取编辑器的内容
getEditorValue(e) {
this.setData({
['t']: e.detail.html
})
},
onEditorReady() {
const that = this
wx.showLoading({
title: '加载内容中...',
})
setTimeout(function () {
let data = that.data;
wx.hideLoading();
that.editorCtx.setContents({
优秀的富文本编辑器html: data.pageData ? t : '',
success: (res) => {
console.log(res)
},
fail: (res) => {
console.log(res)
}
})
}, 1000)
}).exec()
},
insertDivider() {
this.editorCtx.insertDivider({
success: function () {
console.log('insert divider success')
}
})
},
format(e) {
let { name, value } = e.target.dataset
if (!name) return
// console.log('format', name, value)
this.editorCtx.format(name, value)
},
//插⼊图⽚事件监听
insertImage() {
var _this = this;
var that = this;
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'],
itemColor: "#00000",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
that.chooseWxImage_editor('album')
} else if (res.tapIndex == 1) {
that.chooseWxImage_editor('camera')
}
}
}
})
},
// 选择图⽚本地路径
chooseWxImage_editor: function (type) {
var that = this;
var imgsPaths = that.data.imgs;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
console.pFilePaths[0]);
that.upImgs_pFilePaths[0], 0) //调⽤上传⽅法
}
})
},
/**编辑器图⽚上传⾄服务器**/
upImgs_editor: function (imgurl, index) {
var that = this;
var _this = this;
wx.uploadFile({
url: 'jorian.image/fileUpload',//此处的服务器地址请替换成⾃⼰的 filePath: imgurl,
name: 'file',
header: {
'content-type': 'multipart/form-data'
},
formData: null,
success: function (res) {
var resj = JSON.parse(res.data);
console.log(resj) //接⼝返回⽹络
var src = resj.data.url
//插⼊到回答主体中
_this.editorCtx.insertImage({
src: src,
data: {
id: 'abcd',
role: 'god'
},
success: function () {
console.log('insert image success')
}
})
}
})
},
/** editor 部分结束 **/
})
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
豫公网安备41160202000602
发表评论