微信小程序 富文本编辑器 editor
完整微信小程序(Java后端) 技术贴目录清单页面(必看)
富文本编辑器,可以对图片、文字进行编辑。
编辑器导出内容支持带标签的 html
和纯文本的 text
,编辑器内部采用 delta
格式进行存储。
通过setContents
接口设置内容时,解析插入的 html
可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过 delta 进行插入。
富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的html时,需要额外引入,并维护<ql-container><ql-editor></ql-editor></ql-container>
的结构。
图片控件仅初始化时设置有效。
相关 api:EditorContext
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
read-only | boolean | false | 否 | 设置编辑器为只读 | 2.7.0 |
placeholder | string | 否 | 提示信息 | 2.7.0 | |
show-img-size | boolean | false | 否 | 点击图片时显示图片大小控件 | 2.7.0 |
show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 | 2.7.0 |
show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 | 2.7.0 |
bindready | eventhandle | 否 | 编辑器初始化完成时触发 | 2.7.0 | |
bindfocus | eventhandle | 否 | 编辑器聚焦时触发,event.detail = {html, text, delta} | 2.7.0 | |
bindblur | eventhandle | 否 | 编辑器失去焦点时触发,detail = {html, text, delta} | 2.7.0 | |
bindinput | eventhandle | 否 | 编辑器内容改变时触发,detail = {html, text, delta} | 2.7.0 | |
bindstatuschange | eventhandle | 否 | 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 | 2.7.0 |
编辑器内支持部分 HTML 标签和内联样式,不支持class和id
支持的标签
不满足的标签会被忽略,<div>
会被转行为<p>
储存。
类型 | 节点 |
---|---|
行内元素 |
<span> <strong> <b> <ins> <em> <i> <u> <a> <del> <s> <sub> <sup> <img>
|
块级元素 |
<p> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <ol> <ul> <li>
|
支持的内联样式
内联样式仅能设置在行内元素或块级元素上,不能同时设置。例如 font-size
归类为行内元素属性,在 p 标签上设置是无效的。
类型 | 样式 |
---|---|
块级样式 |
text-align direction margin margin-top margin-left margin-right margin-bottom padding padding-top padding-left padding-right padding-bottom line-height text-indent
|
行内样式 |
font font-size font-style font-variant font-weight font-family letter-spacing text-decoration color background-color
|
Bug & Tip
tip
: 使用 catchtouchend 绑定事件则不会使编辑器失去焦点(2.8.3)tip
: 插入的 html 中事件绑定会被移除tip
: formats 中的 color 属性会统一以 hex 格式返回tip
: 粘贴时仅纯文本内容会被拷贝进编辑器tip
: 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如<p><span>xxx</span></p>
会改写为<p>xxx</p>
tip
: 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见
示例代码
在开发者工具中预览效果
editor.wxml
<view class="container" style="height:{{editorHeight}}px;"><editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady"></editor>
</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>
editor.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().platformconst isIOS = platform === 'ios'this.setData({ isIOS})const that = thisthis.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() {that.updatePosition(keyboardHeight)that.editorCtx.scrollIntoView()}})}, duration)})},updatePosition(keyboardHeight) {const toolbarHeight = 50const { windowHeight, platform } = wx.getSystemInfoSync()let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeightthis.setData({ editorHeight, keyboardHeight })},calNavigationBarAndStatusBar() {const systemInfo = wx.getSystemInfoSync()const { statusBarHeight, platform } = systemInfoconst isIOS = platform === 'ios'const navigationBarHeight = isIOS ? 44 : 48return statusBarHeight + navigationBarHeight},onEditorReady() {const that = thiswx.createSelectorQuery().select('#editor').context(function (res) {that.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 })},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() {const that = thiswx.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')}})}})}
})
editor.json
{"navigationBarTitleText": "发表文章","disableScroll": true
}
editor.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;
}
运行效果(请用真机调试):
微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。
微信小程序 富文本编辑器 editor相关推荐
- 微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
- 小程序(二十五)微信小程序富文本编辑器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"> ...
- 小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下 在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
- 微信小程序富文本编辑器获取内容
1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
- layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下 在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
- 关于微信小程序富文本编辑器回显数据初始化editor的时候,页面滑动到最底部了
** 一个页面高度超出一屏时,底部使用了富文本编辑器组件editor之后,如果在进入页面时对editor进行了赋值,页面会滚动到底部 控制页面不滚动到底部?** 这个问题的关键是进入页面给富文本赋值造 ...
- 使用微信小程序 富文本编辑器组件 editor
先看下官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 富文本组件文档 文档上的代码比较少建议在开 ...
最新文章
- 我是一个SDN控制器
- C语言函数集(二十)
- 隐式马可夫模型(hidden markov model,HMM)
- Java中字符串的常用属性与方法
- noi.ac #543 商店
- 【Java】说明变量作用域的示例程序
- WSS 3.0 and MOSS 2007 SP2 发布
- 用Visual C#实现文件下载
- 到退休单位没有通知,半年后通知退休,这半年是否算工龄?
- CartoonGAN照片动漫化
- 2015-UNet论文翻译
- 听完蔡学镛的分享《不瞌睡的PPT制作秘诀》后的总结
- TSP、MTSP问题遗传算法详细解读及python实现
- Openwrt开发笔记(3)—— 修改路由的网关地址和无线SSID 密码
- LeTeX的下载与安装
- 红帽6.4版本安装详细步骤
- 用友OA漏洞学习——test.jsp SQL注入漏洞
- 手机如何连接无线打印服务器,手机如何设置打印服务器的无线WiFi参数?(适用于 B1版)...
- 从阿里云“数字证书管理服务”申请免费的SSL证书
- 为什么使用对数价格?——从连续时间模型下的利息理论说起
热门文章
- iPhone 计算机 桌面,2分钟学会Windows仿苹果任务栏,你的电脑桌面也可如此炫酷!...
- 免费pdf转word网页版
- 一次成功——奶香提子酥
- PhotoshopCC 2018(19.1.3)绿色精简/增强无需注册安装直接用
- 【逆向】【Binary Bomb Lab】二进制拆弹的解说
- Linux的加密和安全
- Linux的远程管理协议是什么,2-Linux权限与远程管理
- 记一次腾讯IEG面试失败经历
- LeetCode刷题笔记——(8/17 - 8/27)
- httprunner 3.x学习10 - parameters 参数化