【愚公系列】2022年03月 微信小程序-富文本编辑器
2024-06-03 19:31:38
文章目录
- 前言
- 一、富文本编辑器的使用
- 1.富文本编辑器属性
- 2.富文本编辑器使用
- 3.实际效果
前言
富文本编辑器，可以对图片、文字进行编辑。
编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。
通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在小程序内使用时通过 delta 进行插入。
富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入 这段样式，并维护<ql-container><ql-editor></ql-editor></ql-container>的结构。
图片控件仅初始化时设置有效。
一、富文本编辑器的使用
1.富文本编辑器属性
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| 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 |
2.富文本编辑器使用
1、定义模板
<template name="skyeditor">
<view class='toolbar' bindtap="format"><i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-zitishanchuxian {{formats.strike ? 'ql-active' : ''}}" data-name="strike" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align" data-value="right" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-zuoyouduiqi {{formats.align === 'justify' ? 'ql-active' : ''}}" data-name="align" data-value="justify" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-line-height {{formats.lineHeight ? 'ql-active' : ''}}" data-name="lineHeight" data-value="2" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-Character-Spacing {{formats.letterSpacing ? 'ql-active' : ''}}" data-name="letterSpacing" data-value="2em" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-722bianjiqi_duanqianju {{formats.marginTop ? 'ql-active' : ''}}" data-name="marginTop" data-value="20px" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-723bianjiqi_duanhouju {{formats.micon-previewarginBottom ? 'ql-active' : ''}}" data-name="marginBottom" data-value="20px" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-clearedformat" bindtap="editorjs" data-bind="removeFormat"></i><i class="iconfont icon-font {{formats.fontFamily ? 'ql-active' : ''}}" data-name="fontFamily" data-value="Pacifico" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-fontsize {{formats.fontSize === '24px' ? 'ql-active' : ''}}" data-name="fontSize" data-value="24px" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-text_color {{formats.color === '#0000ff' ? 'ql-active' : ''}}" data-name="color" data-value="#0000ff" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-fontbgcolor {{formats.backgroundColor === '#00ff00' ? 'ql-active' : ''}}" data-name="backgroundColor" data-value="#00ff00" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-date" bindtap="editorjs" data-bind="insertDate"></i><i class="iconfont icon--checklist" data-name="list" data-value="check" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-undo" bindtap="editorjs" data-bind="undo"></i><i class="iconfont icon-redo" bindtap="editorjs" data-bind="redo"></i><i class="iconfont icon-outdent" data-name="indent" data-value="-1" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-indent" data-name="indent" data-value="+1" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-fengexian" bindtap="editorjs" data-bind="insertDivider"></i><i class="iconfont icon-charutupian" bindtap="editorjs" data-bind="insertImage"></i><i class="iconfont icon-format-header-1 {{formats.header === 1 ? 'ql-active' : ''}}" data-name="header" data-value="{{1}}" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-zitixiabiao {{formats.script === 'sub' ? 'ql-active' : ''}}" data-name="script" data-value="sub" bindtap="editorjs" data-bind="format"></i><i class="iconfont icon-zitishangbiao {{formats.script === 'super' ? 'ql-active' : ''}}" data-name="script" data-value="super" bindtap="editorjs" data-bind="format"></i><!-- <i class="iconfont icon-quanping"></i> --><i class="iconfont icon-shanchu" bindtap="editorjs" data-bind="clear"></i><i class="iconfont icon-direction-rtl {{formats.direction === 'rtl' ? 'ql-active' : ''}}" data-name="direction" data-value="rtl" bindtap="editorjs" data-bind="format"></i></view><editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" read-only="{{readOnly}}" bindready="onEditorReady"></editor>
</template>
function editorfunction(e) {//获取当前工作路径,that变量等同于页面本身的thisvar pages = getCurrentPages();var that = pages[pages.length - 1]var e = e.currentTarget.dataset//改变文本样式方法if (e.bind == "format") {if (!e.name) returnthat.editorCtx.format(e.name, e.value)}//删除字体样式方法if (e.bind == "removeFormat") {that.editorCtx.removeFormat()}//快速插入日期方法if (e.bind == "insertDate") {var date = new Date()var formatDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`that.editorCtx.insertText({text: formatDate})}//撤销操作方法if (e.bind == "undo") {that.editorCtx.undo()}//恢复操作方法if (e.bind == "redo") {that.editorCtx.redo()}//添加分割线方法if (e.bind == "insertDivider") {that.editorCtx.insertDivider()}//清除内容方法if (e.bind == "clear") {that.editorCtx.clear()}//插入图片方法if (e.bind == "insertImage") {wx.chooseImage({count: 1,sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {wx.showLoading({title: "加载中",mask: true})wx.uploadFile({url: getApp().globalData.url + "activity/uploadimg",//里填写自己的图片上传方法地址header: {// 设置请求的 header"content-type": "multipart/form-data"},filePath: res.tempFilePaths[0],name: "img",success(res) {wx.hideLoading()var data = JSON.parse(res.data)if (data.code == 1) {that.editorCtx.insertImage({src: data.data,data: {id: "abcd",role: "god"},})} else {wx.showToast({title: data.data,icon: "none"})}}})}})}
}module.exports = {editorfunction: editorfunction,//引用editor方法,外部唯一暴露接口
}
@import "../../common/lib/weui.wxss";
@import "../../common/lib/iconfont.wxss";
.iconfont {display: inline-block;padding: 8px 8px;width: 24px;height: 24px;cursor: pointer;font-size: 20px;
}.toolbar {box-sizing: border-box;/* border: 1px solid #ccc; */border-bottom: 0;font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}.ql-container {box-sizing: border-box;padding: 12px 15px;width: 100%;min-height: 30vh;height: auto;background: #fff;margin: 20px 0px;font-size: 16px;line-height: 1.5;border: 1rpx solid #cccccc;border-radius: 15rpx;
}.ql-active {color: #06c;
}
2、页面引用模板
<text>
使用说明:
1、在js文件中引入模板文件js
2、在css文件中引入模板文件wxss
3、在wxml文件中引入,不想用的图标只需要删除相应的i即可。
</text><import src="../../templates/skyeditor/skyeditor"/>
<template is="skyeditor" data="{{formats:editor_formats}}"/><button class="button" type="primary" bindtap="gotoyingyong">查看应用</button>
// pages/default/default.js
var editorjs = require('../../templates/skyeditor/skyeditor.js')Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},gotoyingyong:function(){wx.navigateTo({url: '../yingyong/yingyong',})},/*** 重写没有任何实际意义，只是为了编辑器不带警告，删除也不影响运行。* 如果处女座不想看到警告，把其它的方法写一下就行了。*/format:function(){},//实例化富文本onEditorReady() {var that = thiswx.createSelectorQuery().select('#editor').context(function (res) {that.editorCtx = res.context}).exec()},//富文本样式改变后,向WXML传值,改变按钮选中状态方法onStatusChange(e) {this.setData({editor_formats: e.detail})},//设置富文本内容方法setEditor:function(e){this.setData({editorhtml:e.detail.html})//富文本最终得到的HMTL数据为:this.data.html},//引用editor方法editorjs:function(e){editorjs.editorfunction(e)},
})
@import "../../templates/skyeditor/skyeditor.wxss";3.实际效果
【愚公系列】2022年03月 微信小程序-富文本编辑器相关推荐
- 2022年04月 微信小程序-富文本和文本的使用
前言 富文本格式(Rich Text Format)即RTF格式,又称多文本格式,是由微软公司开发的跨平台文档格式.大多数的文字处理软件都能读取和保存RTF文档.它是一种方便于不同的设备.系统查看的文 ...
- 微信小程序 富文本编辑器组件 editor
微信小程序 富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
- 微信小程序富文本编辑器获取内容
1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
- 微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
- 小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
- uniapp微信小程序富文本编辑器组件
前言 最近需要实现一个微信小程序的富文本编辑器,由于使用的是uniapp框架开发的小程序,因此就改造了一下微信小程序官方案例,并封装成了一个组件. uniapp-editor gitee仓库 实现效果 ...
- 微信小程序富文本编辑器editor+rich-text(附源码)
之前小程序一直都是使用自己写的接口,小程序远程获取使用富文本编辑器的内容,比如UEditor,wangEditor等.我们可以选择插件wxparse和自带的rich-text,但是这些并不能完全转义他 ...
- 使用微信小程序 富文本编辑器组件 editor
先看下官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 富文本组件文档 文档上的代码比较少建议在开 ...
- 关于微信小程序富文本编辑器回显数据初始化editor的时候，页面滑动到最底部了
** 一个页面高度超出一屏时,底部使用了富文本编辑器组件editor之后,如果在进入页面时对editor进行了赋值,页面会滚动到底部 控制页面不滚动到底部?** 这个问题的关键是进入页面给富文本赋值造 ...
最新文章
- canvas 中的元素拖拽
- 不用vim-airline/lightline.vim, 如何使用纯手工制作一个漂亮的 vim 状态栏
- 深入浅出mfc随笔——MFc程序的生死因果
- 花30分钟，用Jenkins部署码云上的SpringBoot项目
- 从零开始一步一步搭建Ubuntu Server服务器、修改数据源、安装Docker、配置镜像加速器、Compose部署Gitlab服务
- oracle library cache lock,【DB】彻底搞清楚library cache lock的成因和解决方法（一）
- Java笔记（基础第二篇）
- 多线程小抄集（新编二）
- 【环境搭建003】UBUNTU + ECLIPS + ANDROID 嵌入式系统编译环境搭建遇到的稀奇古怪的问题集合
- forms角色验证,以普通用户身份登陆管理页面先弹出警告信息窗口
- ‘MIX_INIT_MP3’ was not declared in this scope,这是什么情况？
- Linux 的软件管理及配置 - 安装、卸载、升级、依赖
- php curl修改ip,php中curl设置ip的方法
- 硬盘（U盘）被误格式化（删除），重要的文件如何恢复？
- STM32 IAP docs
- ios 渐变透明背景_2019 - 渐变梯度
- 022-互惠合作|离职员工的关系网
- wamp介绍及crossbar.io服务搭建
- 洛谷 P2440 木材加工（二分，含边界处理的笔记）
- UE4球体根据镜头方向前进