解决方案:微信小程序editor富文本编辑器的使用，拿走不谢
优采云 发布时间: 2022-10-16 10:17解决方案:微信小程序editor富文本编辑器的使用，拿走不谢
前言：对于产品的上传，我们大部分都是在PC后台，因为管理起来比较方便高效，但是也有一些客户想在手机上实现简单的上传，使用富文本编辑器，正好editor富文本编辑器自带小程序表单组件，一起来学习吧。
如果对大家有帮助，请点赞转发。
特征
文件地址：
整合后的页面：
代码使用
wxml:
wxss:
@import "../common/lib/weui.wxss";
@import "./assets/iconfont.wxss";
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.ql-container {
box-sizing: border-box;
width: 100%;
height: 100%;
font-size: 16px;
line-height: 1.5;
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;
}
css引用的两个外部链接在文章的末尾，我会给出下载地址。
js：
Page({
data: {
formats: {},
readOnly: false,
placeholder: '开始输入...',
editorHeight: 300,
keyboardHeight: 0,
isIOS: false
},
readOnlyChange() {
this.setData({
readOnly: !this.data.readOnly
})
},
onLoad() {
const platform = wx.getSystemInfoSync().platform
const isIOS = platform === 'ios'
this.setData({ isIOS})
const that = this
this.updatePosition(0)
let keyboardHeight = 0
wx.onKeyboardHeightChange(res => {
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)
})
},
updatePosition(keyboardHeight) {
const toolbarHeight = 50
const { windowHeight, platform } = wx.getSystemInfoSync()
let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
this.setData({ editorHeight, keyboardHeight })
},
calNavigationBarAndStatusBar() {
const systemInfo = wx.getSystemInfoSync()
const { statusBarHeight, platform } = systemInfo
const isIOS = platform === 'ios'
const navigationBarHeight = isIOS ? 44 : 48
return statusBarHeight + navigationBarHeight
},
onEditorReady() {
const that = this
wx.createSelectorQuery().select('#editor').context(function (res) {
that.editorCtx = res.context
}).exec()
},
blur() {
this.editorCtx.blur()
},
format(e) {
let { name, value } = e.target.dataset
if (!name) return
// console.log('format', name, value)
this.editorCtx.format(name, value)
},
onStatusChange(e) {
const formats = e.detail
this.setData({ formats })
},
insertDivider() {
this.editorCtx.insertDivider({
success: function () {
console.log('insert divider success')
}
})
},
clear() {
this.editorCtx.clear({
success: function (res) {
console.log("clear success")
<p>
}
})
},
removeFormat() {
this.editorCtx.removeFormat()
},
insertDate() {
const date = new Date()
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
this.editorCtx.insertText({
text: formatDate
})
},
insertImage() {
const that = this
that.blur();
wx.showLoading({
title: '加载中…',
})
setTimeout(function(){
wx.hideLoading();
wx.chooseImage({
count: 1,
success: function (res) {
that.editorCtx.insertImage({
src: res.tempFilePaths[0],
data: {
id: 'abcd',
role: 'god'
},
width: '80%',
success: function () {
console.log('insert image success')
}
})
}
})
},500);
}
})
</p>
整体目录结构：
富文本编辑器无法在开发者工具上演示，必须在手机上运行才能查看效果。
示例代码：
如果需要代码，可以通过运行示例代码在开发者工具中获取。
富文本编辑器中方法api介绍
文件地址：
比如怎么上传图片，怎么设置编辑器的内容，怎么获取编辑器的内容等等。其实重点是获取编辑器的内容，然后传到后台数据库.
获取编辑器内容的代码：
that.editorCtx.getContents({
success(res){
var description = res['html'];//详情
wx.request({
url: HTTP_REQUEST_URL+'/api/user/product_create',
data: {
},
method: 'POST',
dataType:'json',
header: header,
success: function (res) {
var data = res['data'];
if(data['code']==200){
}else{
}
},
fail: function (res) {
},
});
}
})
总结：
小程序的富文本编辑器可以实现图文上传、排序等功能的基本操作。对于普通用户来说，只要能输入文字、上传图片进行排版，就可以解决基本需求。
上一篇文章提到使用编辑器上传图片会出现样式问题
如果有朋友在使用过程中碰巧遇到这样的问题，可以看看我昨天发的文章。微信小程序内置编辑器编辑器上传图片wx.chooseImage样式问题
我是一名小程序软件开发人员。每天分享开发过程中遇到的知识点。如果对你有帮助，请给我点个赞，然后去，非常感谢。
解决方案:WordPress修改管理员邮箱的方法有哪些
本文来自
要想把网站操作好，及时更新文章是必不可少的。文章需要在WordPress后台编辑，需要有编辑器。那么有人会问什么是WordPress文章 编辑器？
以下是推荐给大家的两个 WordPress 编辑器插件：
1.经典编辑器
现在 WordPress 的默认编辑器是古腾堡编辑器，但还是有很多人使用经典编辑器，因为它好用。接下来，我将教你如何切换回经典编辑器。
在网站的后台打开“安装插件”就可以看到（如果看不到就在搜索框输入：经典编辑器）
如果没有安装，点击安装（本站已经安装了上图），然后启用就可以使用了。
2. TinyMCE Advanced（经典编辑器增强版）
TinyMCE Advanced 是 WordPress 经典编辑器的增强版，用户数量相当庞大（100 万+）。本插件常用的功能都有，表格、粗体、斜体、下划线、删除线、上标、下标、插入代码、清除格式、锚点、横线、特殊字符等。对于一般人来说，是足够的。
这两个WordPress文章编辑器也是大家常用的，大家可以根据自己的喜好选择。
