微信小程序 富文本编辑器组件 editor
<view class="container"><view class="titlebox"><input class="titleinp" placeholder="标题:" bindinput="titleinp" /></view><view class="articlebd"><editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady"bindinput="editorinput"style="height:{{editorHeight}}px"></editor></view></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>
js:
// pages/write/write.jsimport {marketLoupanList,marketAddArticle,upload} from "../../utils/requst/api.js";Page({/*** 页面的初始数据*/data: {islpsel: false,selact: null,lpsellist: [],titleinpH: '',lid: '',token: '',ltitle: '',title: '',editortxt: '',formats: {},readOnly: false,placeholder: '开始输入...',editorHeight: 300,keyboardHeight: 0,isIOS: false},readOnlyChange() {this.setData({readOnly: !this.data.readOnly})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {const platform = wx.getSystemInfoSync().platformconst isIOS = platform === 'ios'this.setData({token: getApp().globalData.token,isIOS})this.updatePosition(0)let keyboardHeight = 0wx.onKeyboardHeightChange(res => {if (res.height === keyboardHeight) returnconst duration = res.height > 0 ? res.duration * 1000 : 0keyboardHeight = res.heightsetTimeout(() => {wx.pageScrollTo({scrollTop: 0,success() {this.updatePosition(keyboardHeight)this.editorCtx.scrollIntoView()}})}, duration)})this.getmarketLoupanList();},titleinp: function (e) {// console.log(e);this.setData({title: e.detail.value})},selboxinp: function (e) {let selact = e.currentTarget.dataset.index;let lid = e.currentTarget.dataset.lid;let ltitle = e.currentTarget.dataset.ltitle;let areaid = e.currentTarget.dataset.areaid;this.setData({selact,lid,ltitle,areaid,})// console.log(this.data);},seltijiao: function () {if (this.data.selact != null) {this.setData({islpsel: true})} else {wx.showToast({title: '请先选择楼盘，再写新闻',icon: "none",duration: 2000})}},lpselxx: function () {if (this.data.selact != null) {this.setData({islpsel: true})} else {wx.showToast({title: '请先选择楼盘，再写新闻',icon: "none",duration: 2000})}},editorinput: function (e) {console.log(e.detail.html);this.setData({editortxt: e.detail.html})},getmarketLoupanList: function () {let params = {token: this.data.token}marketLoupanList(params).then((res) => {// console.log(res);this.setData({lpsellist: res.data.data})})},getmarketAddArticle: function () {let params = {token: this.data.token,content: this.data.editortxt,l_id: this.data.lid,title: this.data.title,category_area_id: this.data.areaid,l_title: this.data.ltitle}console.log(params);if (this.data.title == '') {wx.showToast({title: '标题不能为空！',icon: "none",duration: 2000})} else if (this.data.editortxt == '') {wx.showToast({title: '文章内容不能为空！',icon: "none",duration: 2000})} else {wx.showModal({title: "您将只有一次机会，发送成功后将不允许更改",success(res) {if (res.confirm) {marketAddArticle(params).then((res) => {console.log(res);if (res.data.message == 'ok') {wx.showToast({title: '发表成功！',icon: "none",duration: 2000})setTimeout(() => {wx.navigateBack({delta: 1})}, 2000)}})} else if (res.cancel) {// console.log('用户点击取消')}}})}},sellpicon: function () {this.setData({islpsel: false})},updatePosition(keyboardHeight) {const toolbarHeight = 50const {windowHeight,platform} = wx.getSystemInfoSync();const query = wx.createSelectorQuery()query.select('.titleinp').boundingClientRect()query.selectViewport().scrollOffset()query.exec((res) => {this.setData({titleinpH: res[0].height})// console.log(res[0].height);let editorHeight = keyboardHeight > 0 ? (windowHeight - this.data.titleinpH - keyboardHeight - toolbarHeight - 80) : windowHeight - this.data.titleinpH - 80this.setData({editorHeight,keyboardHeight})})},calNavigationBarAndStatusBar() {const systemInfo = wx.getSystemInfoSync()const {statusBarHeight,platform} = systemInfoconst isIOS = platform === 'ios'const navigationBarHeight = isIOS ? 44 : 48return statusBarHeight + navigationBarHeight},onEditorReady() {wx.createSelectorQuery().select('#editor').context((res) => {this.editorCtx = res.context}).exec()},blur() {this.editorCtx.blur()},format(e) {let {name,value} = e.target.datasetif (!name) return// console.log('format', name, value)this.editorCtx.format(name, value)},onStatusChange(e) {const formats = e.detailthis.setData({formats})console.log(e);},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() {wx.chooseImage({count: 1,success: (res) => {console.log(res);// this.setData({// picsrc: res.tempFilePaths[0]// })wx.uploadFile({url: "/wechat/market/upload",filePath: res.tempFilePaths[0],file: res.tempFilePaths[0],name: 'file',formData: {app: 3,},success: (res) => {// console.log(res);let updata = JSON.parse(res.data);console.log(updata);if (updata.message == 'ok!') {this.editorCtx.insertImage({src: updata.data.url,// data: {// src: updata.data.image_path,// role: 'god'// },// width: '80%',success: () => {console.log('insert image success')}})console.log(this.editorCtx);}}})// this.editorCtx.insertImage({// src: res.tempFilePaths[0],// data: {//id: 'abcd',//role: 'god'// },// width: '80%',// success: () => {//console.log('insert image success')// }// })//upload// console.log(this.editorCtx);}})},})
css:(less)
@red: #ff2b0a;.container{position: relative;width: 100%;height: 100vh;.titlebox{width: 100%;height: 94rpx;border-bottom:1px solid #eee;.titleinp{margin:0 50rpx; height: 100%;font-size: 36rpx;line-height: 94rpx;color: #000;font-weight: bold;}}.articlebd{width: 100%;.ql-container {box-sizing: border-box;width: 100%;height: 100%;font-size: 16px;line-height: 40px;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;}}.sellpicon{position: absolute;bottom:180rpx;right: 40rpx;width: 98rpx;height: 98rpx;overflow: hidden;z-index: 8;.sleimg{width: 100%;height: 100%;} }.tijiaoinp{position: relative;// width: 100%;margin:0 30rpx;height: 86rpx;box-sizing: border-box;background: @red;font-size: 36rpx;line-height: 86rpx;text-align: center;color: #fff;border-radius: 10rpx;margin-top: 20rpx;}}
其他相关文章：
小程序官方文档：https://developers./miniprogram/dev/component/editor.html
使用微信小程序 富文本编辑器组件 editor：/qq_29789057/article/details/90108048
