微信小程序富文本编辑器组件 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.js
import {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: "http://wx.xihuanfang.com/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.weixin.qq.com/miniprogram/dev/component/editor.html

使用微信小程序富文本编辑器组件 editor：https://blog.csdn.net/qq_29789057/article/details/90108048

微信小程序富文本编辑器组件 editor相关推荐

使用微信小程序富文本编辑器组件 editor
先看下官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 富文本组件文档文档上的代码比较少建议在开 ...
uniapp微信小程序富文本编辑器组件
前言最近需要实现一个微信小程序的富文本编辑器,由于使用的是uniapp框架开发的小程序,因此就改造了一下微信小程序官方案例,并封装成了一个组件. uniapp-editor gitee仓库实现效果 ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
关于微信小程序富文本编辑器回显数据初始化editor的时候，页面滑动到最底部了
** 一个页面高度超出一屏时,底部使用了富文本编辑器组件editor之后,如果在进入页面时对editor进行了赋值,页面会滚动到底部控制页面不滚动到底部?** 这个问题的关键是进入页面给富文本赋值造 ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
微信小程序富文本编辑器获取内容
1.新建wxParse文件夹里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
小程序（二十五）微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) {console.log(e);const that = thiswx.chooseImag ...
微信小程序富文本编辑器editor+rich-text(附源码)
之前小程序一直都是使用自己写的接口,小程序远程获取使用富文本编辑器的内容,比如UEditor,wangEditor等.我们可以选择插件wxparse和自带的rich-text,但是这些并不能完全转义他 ...
【愚公系列】2022年03月微信小程序-富文本编辑器
文章目录前言一.富文本编辑器的使用 1.富文本编辑器属性 2.富文本编辑器使用 3.实际效果前言富文本编辑器,可以对图片.文字进行编辑. 编辑器导出内容支持带标签的 html和纯文本的 tex ...

微信小程序富文本编辑器组件 editor

微信小程序富文本编辑器组件 editor

微信小程序富文本编辑器组件 editor相关推荐

最新文章

热门文章

微信小程序 富文本编辑器组件 editor

微信小程序 富文本编辑器组件 editor

微信小程序 富文本编辑器组件 editor相关推荐

最新文章

热门文章

微信小程序富文本编辑器组件 editor

微信小程序富文本编辑器组件 editor

微信小程序富文本编辑器组件 editor相关推荐