微信小程序使用editor富文本编辑器 以及回显 全屏弹窗的模式

 

  <!--富文本接收的位置--><view class="white-box"><view class="title"><view class="yellow-fence"></view><view class="v1">教研记录</view></view><view class="add-btn" bindtap="addRecords">添加新的教研记录</view><view wx:for="{{records}}" class="rich-text-box" wx:key="index"><!-- <mp-html content="{{item}}" selectable="true" show-img-menu="true" /> --><rich-text nodes="{{item}}" data-index="{{index}}" bindtap="echoRecordsData"></rich-text></view></view><view class="white-box"><view class="title"><view class="yellow-fence"></view><view class="v1">研究成果</view></view><view class="add-btn" bindtap="addAchievement">添加研究成果说明</view><view wx:for="{{achievement}}" class="rich-text-box" wx:key="index"><!-- <mp-html content="{{item}}" selectable="true" show-img-menu="true" /> --><rich-text nodes="{{item}}" data-index="{{index}}" bindtap="echoAchievementData"></rich-text></view></view>

以上是富文本的值返回接收的地方 下面是富文本的html

  <!--富文本编辑器弹窗--><view class="container" style="height:100vh;" wx:if="{{showEidter}}"><view class="save-box"><view class="v1" bindtap="cancelEidter">取消</view><view class="v2" bindtap="saveEditer">确定</view></view><editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady" bindfocus="onFocus" bindinput="onBlur"></editor><view class="toolbar" catchtouchend="format"><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></view>
Page({data: {/*富文本-start*/formats: {},readOnly: false,placeholder: '开始输入...',isClickImg: false,records: [], //教研记录列表    isRecordsEidt: false, //是否编辑的是教研记录recordsEidtIndex: null, //教研记录编辑的是哪一条achievement: [], //研究成果列表isAchievementEidt: false, //是否编辑的是研究成果achievementEidtIndex: null, //研究成果编辑的是哪一条showEidter: false,editData: '',/*富文本-end*/    },onLoad(options) {},/*富文本编辑器-start*///编辑教研记录列表echoRecordsData(e) {const that = thislet oidx = e.currentTarget.dataset.indexthis.setData({isRecordsEidt: true,showEidter: true,recordsEidtIndex: oidx,isAchievementEidt: false, //是否编辑的是研究成果achievementEidtIndex: null, //研究成果编辑的是哪一条})//console.log(that.data.records[oidx])// 修改时，反显数据this.createSelectorQuery().select("#editor").context((res) => {res.context.setContents({html: that.data.records[oidx],});}).exec();},echoAchievementData(e) {const that = thislet oidx = e.currentTarget.dataset.indexthis.setData({isAchievementEidt: true,showEidter: true,achievementEidtIndex: oidx,isRecordsEidt: false, //是否编辑的是教研记录recordsEidtIndex: null, //教研记录编辑的是哪一条})//console.log(that.data.records[oidx])// 修改时，反显数据this.createSelectorQuery().select("#editor").context((res) => {res.context.setContents({html: that.data.achievement[oidx],});}).exec();},//重置cancelEidter() {this.setData({isRecordsEidt: false,showEidter: false,recordsEidtIndex: null,isAchievementEidt: false,achievementEidtIndex: null,editData: ''})},saveEditer() {//如果是教研记录新增let recordsEidtIndex = this.data.recordsEidtIndexlet achievementEidtIndex = this.data.achievementEidtIndexif (this.data.isRecordsEidt) {let odata = this.data.recordsif (recordsEidtIndex || recordsEidtIndex === 0) {//编辑odata[recordsEidtIndex] = this.data.editData} else {//新增odata.push(this.data.editData)}this.setData({records: odata})//console.log(this.data.records)this.cancelEidter()} else if (this.data.isAchievementEidt || achievementEidtIndex === 0) {let odata = this.data.achievementif (achievementEidtIndex) {//编辑odata[achievementEidtIndex] = this.data.editData} else {//新增odata.push(this.data.editData)}this.setData({achievement: odata})//console.log(this.data.records)this.cancelEidter()}},addRecords() {this.setData({isRecordsEidt: true,showEidter: true})},addAchievement() {this.setData({isAchievementEidt: true,showEidter: true})},readOnlyChange() {this.setData({readOnly: !this.data.readOnly})},onEditorReady() {const that = thiswx.createSelectorQuery().select('#editor').context(function (res) {//console.log(res)if (res.context) {that.editorCtx = res.context}}).exec()},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() {this.setData({isClickImg: true})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')}})}})},onFocus() {this.setData({isClickImg: false})},onBlur(e) {//console.log(this.data.isClickImg)//防止上传的图片直接失焦 保存内容的问题    if (!this.data.isClickImg) {//console.log(e.detail.html)this.setData({editData: e.detail.html})}//this.oneEditor.blur()},/*富文本编辑器-end*/})
/*富文本编辑器-start*/
.container {position: fixed; top: 0; right: 0;bottom: 0;left: 0; z-index: 999;  display: flex;flex-direction: column;background: #fff;
}
.ql-container {flex: 1;padding: 10px 10px 50px 10px;box-sizing: border-box;font-size: 16px;line-height: 1.5;
}.ql-active {color: #22C704;
}.iconfont {display: inline-block;width: 30px;height: 30px;cursor: pointer;font-size: 20px;
}.toolbar {position: fixed;left: 0;right: 100%;bottom: 0;padding: 0 10px;display: flex;align-items: center;justify-content: space-between;width: 100%;height: 50px;  box-sizing: border-box;    background: #fff;border-top: 1rpx solid #f2f2f2;
}
.save-box{ margin: 10rpx 10rpx 0 0; display: flex; justify-content: flex-end;}
.save-box .v1,.save-box .v2{ font-size: 28rpx; width: 100rpx; height: 60rpx; text-align: center; line-height: 60rpx; border-radius: 12rpx;}
.save-box .v1{ margin-right: 10rpx; background: #ddd; color: #fff;}
.save-box .v2{ background: #ffb81c; color: #fff;}
.rich-text-box{ margin-bottom: 20rpx;}
/*富文本编辑器-end*/

记录一下使用方法 也可以参考一下怎么使用

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/56593.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

linux安装redis带图详细

linux安装redis带图详细

如何在Linux系统中卸载Redis 一、使用apt-get卸载Redis sudo apt-get purge redis-server如果使用apt-get安装Redis&#xff0c;可以使用apt-get purge命令完全卸载Redis。其中&#xff0c;purge命令会不仅仅删除Redis二进制文件&#xff0c;还会删除配置文件、数据文件和日志…
阅读更多...
VUE框架：vue2转vue3全面细节总结（6）动态路由

VUE框架：vue2转vue3全面细节总结（6）动态路由

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人_python人工智能视觉&#xff08;opencv&#xff09;从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了&#xff1a; https://blog.csdn.net/lbcy…
阅读更多...
Python测试框架pytest：测试用例、查找子集、参数化、跳过

Python测试框架pytest：测试用例、查找子集、参数化、跳过

Pytest是一个基于python的测试框架&#xff0c;用于编写和执行测试代码。pytest主要用于API测试&#xff0c;可以编写代码来测试API、数据库、UI等。 pytest是一个非常成熟的全功能的Python测试框架&#xff0c;主要有以下几个优点&#xff1a; 简单灵活&#xff0c;容易上手。…
阅读更多...
【Spring】深究SpringBoot自动装配原理

【Spring】深究SpringBoot自动装配原理

文章目录 前言1、main入口2、SpringBootApplication3、EnableAutoConfiguration4、AutoConfigurationImportSelector4.1、selectImports()4.2、getAutoConfigurationEntry()4.3、getCandidateConfigurations()4.4、loadFactoryNames() 5、META-INF/spring.factories6、总结 前言…
阅读更多...
MapReduce基础原理、MR与MPP区别

MapReduce基础原理、MR与MPP区别

MapReduce概述 MapReduce&#xff08;MR&#xff09;本质上是一种用于数据处理的编程模型&#xff1b;MapReduce用于海量数据的计算&#xff0c;HDFS用于海量数据的存储&#xff08;Hadoop Distributed File System&#xff0c;Hadoop分布式文件系统&#xff09;。Hadoop MapR…
阅读更多...
Gof23设计模式之享元模式

Gof23设计模式之享元模式

1.定义 运用共享技术来有效地支持大量细粒度对象的复用。它通过共享已经存在的对象来大幅度减少需要创建的对象数量、避免大量相似对象的开销&#xff0c;从而提高系统资源的利用率。 2.结构 享元&#xff08;Flyweight &#xff09;模式中存在以下两种状态&#xff1a; 内…
阅读更多...
vscode自动添加注释说明

vscode自动添加注释说明

1. 安装vscode 双击安装程序,默认安装即可(如:VSCodeSetup-x64-1.70.2.exe) 2. 安装doxygen文档生成插件 1> 打开vscode软件,点击左侧插件管理菜单 2> 点击右上角’…‘按钮,选择’Install from VSIX’(联网状态可以直接搜索doxygen下载安装) 3> 选择doxygen离线安装…
阅读更多...
【docker】docker私有仓库

【docker】docker私有仓库

目录 一、说明二、私有仓库搭建三、上传镜像到私有仓库四、从私有仓库拉取镜像 一、说明 1.docker官方的docker hub(https://hub.docker.com)是一个用于管理公共镜像的仓库&#xff0c;可以从上面拉取镜像到本地&#xff0c;也可以把自己的镜像推送上去 2.若服务器无法访问互联…
阅读更多...
ELK日志分析系统简介

ELK日志分析系统简介

ELK日志分析系统简介 ElasticsearchLogstashKibana主要功能Kibana日志处理步骤ELK的工作原理 日志服务器 提高安全性 集中存放日志 缺陷 ​ 对日志的分析困难 ELK日志分析系统 Elasticsearch 概述:提供了一个分布式多用户能力的全文搜索引擎 核心概念 接近实时 集群 节…
阅读更多...
【C语言初阶】指针篇—下

【C语言初阶】指针篇—下

目录 4. 指针运算4.1 指针-整数4.2 指针-指针4.3 指针的关系运算 5. 指针和数组6. 二级指针7. 指针数组 C语言初阶—指针上 点击跳转 4. 指针运算 指针 整数指针-指针指针的关系运算 4.1 指针整数 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h>int main() {in…
阅读更多...
R-Meta分析教程

R-Meta分析教程

详情点击链接&#xff1a;R-Meta模型教程 一&#xff1a;Meta分析的选题与文献计量分析CiteSpace应用 1、Meta分析的选题与文献检索 1)什么是Meta分析&#xff1f; 2)Meta分析的选题策略 3)文献检索数据库 4)精确检索策略&#xff0c;如何检索全、检索准 5)文献的管理与…
阅读更多...
il汇编整数相加

il汇编整数相加

在这里尝试了IL汇编字符串连接&#xff1b; IL汇编字符串连接_bcbobo21cn的博客-CSDN博客 下面来看一下IL汇编整数相加&#xff1b; 大概的看一下一些资料&#xff0c;下面语句&#xff0c; ldc.i4 20 ldc.i4 30 add 看上去像是&#xff0c;装载整数20到一个类似于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023