微信小程序富文本编辑器editor初体验-图片上传

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

以前没有小程序富文本编辑器，只能输入文字，图片上传后，在服务端进行拼接。现在好啦，直接上富文本，向里面传图片，修改图片大小。

主要是富文本里插入图片，选择图片，一个临时地址，预览地址，上传服务器后返回的图片地址。

在微信小程序基础库2.7以前（目前最新为2.7.1）是没有富文本编辑器的，只能通过textarea和图片选择器，将文本和图片在服务端进行组装。目前网络上也几乎没有一个完整的例子出来（因为今年5月份刚推出来）。

有了富文本编辑器，就可以愉快地发布图文了。瞧它功能还是挺丰富，加粗，斜体，下划线，左中右对齐……背景色，标题，插入当前日期，事项，列表，

当然，最主要还是图片上传（理论上是不是没有6幅图9幅图的数量限制啦？），点击图片，还可以删除，整个编辑区的删除请使用哪个回收站（垃圾桶）的图标…… 当然，它传到服务端的带标签的html，解析还是依靠wxparse 珠三角设代小程序plus版已经整合完毕。

相比之前的文本+图片组装模式，这里可以给每个图片进行说明了。甚至给每个图片下方添加图片名称。当然，手机上操作这些稍嫌麻烦，用语音输入文字，速度就快很多了。

js:

  insertImage() {const that = thiswx.chooseImage({count: 6,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: res => {const images = that.data.images.concat(res.tempFilePaths)console.log(res.tempFilePaths)that.data.images = images.length <= 6 ? images : images.slice(0, 6)$digest(that)const arr = []// console.log(that.data.images)for (let path of that.data.images) {arr.push(wxUploadFile({// url: config.urls.question + '/image/upload',url: config.url + '/wx/uploadwxeditorimg',filePath: path,name: 'file',}))}// console.log(arr)Promise.all(arr).then(res => {return res.map(item => JSON.parse(item.data).link)}).catch(err => {console.log(">>>> upload images error:", err)}).then(urls => {// console.log(urls)for (let i = 0; i < urls.length; ++i) {that.editorCtx.insertImage({src: config.attachmenturl + urls[i],// data: {//   id: 'abcd',//   role: 'god'// },success: function () {console.log('insert image success')that.setData({images: []//这里清0，否则总是将上次的图片带上})// console.log(that.data.images)}})}})}})},

  handleContentInput(e) {const value = e.detail.html//要将图片的头http://*.*.*.去掉/at/gvar reg = new RegExp(config.attachmenturl, "g")this.data.content = value.replace(reg, '');},submitForm(e) {var that = thisconst title = this.data.titleconst content = this.data.contentif (title && content) {// 登录var sessionId = wx.getStorageSync('sessionId')//发起网络请求wx.request({url: config.url + '/wx/addwxeditorarticle',header: {"Content-Type": "application/x-www-form-urlencoded"},method: "POST",data: {hotqinsessionid: sessionId,title: title,content: content},success: function (res) {if (res.data.status == 0) {wx.showToast({title: res.data.info,icon: 'loading',duration: 1500})} else {wx.showToast({title: res.data.info, //这里打印出成功icon: 'success',duration: 1000})//进行清理that.editorCtx.clear({success: (res) => {console.log('succ:' + res)},fail: (res) => {console.log('fail:' + res)}})wx.navigateTo({url: `../detail/detail?id=` + res.data.id})}}})} else {wx.showToast({title: "标题或正文不能为空！",icon: 'loading',duration: 1500})}},

微信小程序富文本编辑器editor初体验-图片上传相关推荐

小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
小程序（二十五）微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) {console.log(e);const that = thiswx.chooseImag ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
微信小程序富文本编辑器editor+rich-text(附源码)
之前小程序一直都是使用自己写的接口,小程序远程获取使用富文本编辑器的内容,比如UEditor,wangEditor等.我们可以选择插件wxparse和自带的rich-text,但是这些并不能完全转义他 ...
微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
微信小程序富文本编辑器获取内容
1.新建wxParse文件夹里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
【愚公系列】2022年03月微信小程序-富文本编辑器
文章目录前言一.富文本编辑器的使用 1.富文本编辑器属性 2.富文本编辑器使用 3.实际效果前言富文本编辑器,可以对图片.文字进行编辑. 编辑器导出内容支持带标签的 html和纯文本的 tex ...
关于微信小程序富文本编辑器回显数据初始化editor的时候，页面滑动到最底部了
** 一个页面高度超出一屏时,底部使用了富文本编辑器组件editor之后,如果在进入页面时对editor进行了赋值,页面会滚动到底部控制页面不滚动到底部?** 这个问题的关键是进入页面给富文本赋值造 ...

微信小程序富文本编辑器editor初体验-图片上传

微信小程序富文本编辑器editor初体验-图片上传相关推荐

最新文章

热门文章