微信小程序使用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.mzph.cn/news/19617.shtml

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

相关文章

从零开始学python(十二)如何成为一名优秀的爬虫工程师

前言 回顾之前讲述了python语法编程 必修入门基础和网络编程&#xff0c;多线程/多进程/协程等方面的内容&#xff0c;后续讲到了数据库编程篇MySQL&#xff0c;Redis&#xff0c;MongoDB篇&#xff0c;和机器学习&#xff0c;全栈开发&#xff0c;数据分析前面没看的也不用往…

SonarQube入门 - 搭建本地环境

一、SonarQube是什么&#xff1f; SonarQube是一种自我管理的自动代码审查工具&#xff0c;可以系统地帮助您交付干净的代码。作为我们Sonar 解决方案的核心元素 &#xff0c;SonarQube 集成到您现有的工作流程中并检测代码中的问题&#xff0c;以帮助您对项目执行持续的代码检…

Meta-Transformer 多模态学习的统一框架

Meta-Transformer是一个用于多模态学习的新框架&#xff0c;用来处理和关联来自多种模态的信息&#xff0c;如自然语言、图像、点云、音频、视频、时间序列和表格数据&#xff0c;虽然各种数据之间存在固有的差距&#xff0c;但是Meta-Transformer利用冻结编码器从共享标记空间…

Linux lvs负载均衡

LVS 介绍&#xff1a; Linux Virtual Server&#xff08;LVS&#xff09;是一个基于Linux内核的开源软件项目&#xff0c;用于构建高性能、高可用性的服务器群集。LVS通过将客户端请求分发到一组后端服务器上的不同节点来实现负载均衡&#xff0c;从而提高系统的可扩展性和可…

01-1 搭建 pytorch 虚拟环境

pytorch 管网&#xff1a;PyTorch 一 进入 Anaconda 二 创建虚拟环境 conda create -n pytorch python3.9注意要注意断 VPN切换镜像&#xff1a; 移除原来的镜像 # 查看当前配置 conda config --show channels conda config --show-sources# 移除之前的镜像 conda config --…

量化:numpy基础

文章目录 ndarray创建array创建顺序数组改变数据类型nan筛选元素去重重塑 ndarray numpy最重要的一个特点是其N维数组对象ndarry&#xff0c;它是一系列同类型数据的集合 创建array ndarry的创建方式如下&#xff1a; numpy.array(object, dtype None, copy True, order …

c语言——计算两个正整数的最大公倍数

//计算两个正整数的最大公倍数 //例如40和60的最大公约数为20. //计算两个正整数的最大公倍数 //例如40和60的最大公约数为20. #include<stdio.h> int main() {int a,b,temp,i;printf("Input a & b:");scanf("%d%d",&a,&b);if(a<b){…

Go -- 测试 and 项目实战

没有后端基础&#xff0c;学起来真是费劲&#xff0c;所以打算速刷一下&#xff0c;代码跟着敲一遍&#xff0c;有个印象&#xff0c;大项目肯定也做不了了&#xff0c;先把该学的学了&#xff0c;有空就跟点单体项目&#xff0c;还有该看的书.... 目录 &#x1f34c;单元测试…

从Spring的角度看Memcached和Redis及操作

目录 Memcached和Redis的区别 适用场景 Memcached配置使用 Redis配置使用 在SpringBoot的框架里&#xff0c;有直连Redis的SDK却没有Memcached的&#xff0c;可见相比地位。不过各有各的适应场景&#xff0c;Redis这个单线程模型确实非常强。 Memcached和Redis的区别 共同…

redis的数据类型及操作

三、redis的数据类型 String字符串 set、get mset setex setnx 会检测键值对存不存在&#xff0c;如果存在不发生变化&#xff0c;如果存在则增加键值对 只增加 而set会覆盖原来的值 增加、修改 setrange 有下标则替换&#xff0c;没有则添加 getrange 获取全…

剑指 Offer 54. ! 二叉搜索树的第k大节点 (考察二叉树的中序遍历)

剑指 Offer 54. 二叉搜索树的第k大节点 给定一棵二叉搜索树&#xff0c;请找出其中第 k 大的节点的值。 我的思路是&#xff1a;用一个全局arrayList不断收集“逆向”中序遍历该搜索二叉树所需要的答案 class Solution {int res, k;public int kthLargest(TreeNode root, int …

为Stable Diffusion web UI开发自己的插件实战

最近&#xff0c;Stable Diffusion AI绘画受到了广泛的关注和热捧。它的Web UI提供了了一系列强大的功能&#xff0c;其中特别值得一提的是对插件的支持&#xff0c;尤其是Controlnet插件的加持&#xff0c;让它的受欢迎程度不断攀升。那么&#xff0c;如果你有出色的创意&…

GLM模型介绍

paper: 《GLM: General Language Model Pretraining with Autoregressive Blank Infilling》 摘要&#xff1a; 我们提出了一个基于自回归空白填充的通用语言模型&#xff08;GLM&#xff09;来解决这一挑战。GLM通过添加2D位置编码和允许任意顺序预测跨度来改进空白填充预训…

机器学习笔记之优化算法(四)线搜索方法(步长角度;非精确搜索)

机器学习笔记之优化算法——线搜索方法[步长角度&#xff0c;非精确搜索] 引言回顾&#xff1a;精确搜索步长及其弊端非精确搜索近似求解最优步长的条件反例论述 引言 上一节介绍了从精确搜索的步长角度观察了线搜索方法&#xff0c;本节将从非精确搜索的步长角度重新观察线搜…

蓝网科技股份有限公司存在SQL注入

书把他从沉重的生活中拉出来&#xff0c;使他的精神不致被劳动压的麻木不仁。通过不断地读书&#xff0c;他认识到&#xff0c;只有一个人对世界了解得更广大&#xff0c;对人生看得更深刻&#xff0c;那么&#xff0c;他才可能对自己所处的艰难和困苦有更高意义的理解&#xf…

AI 绘画Stable Diffusion 研究(五)sd文生图功能详解(下)

大家好&#xff0c;我是风雨无阻。 上一篇文章详细介绍了sd文生图的功能及使用注意事项&#xff0c;感兴趣的朋友可以前往查看&#xff1a;AI 绘画Stable Diffusion 研究&#xff08;四&#xff09;sd文生图功能详解&#xff08;上&#xff09; 。 那今天这篇文章&#xff0c;我…

论文阅读 - Social bot detection in the age of ChatGPT: Challenges and opportunities

论文链接&#xff1a;https://www.researchgate.net/publication/371661341_Social_bot_detection_in_the_age_of_ChatGPT_Challenges_and_opportunities 目录 摘要&#xff1a; 引言 1.1. Background on social bots and their role in society 1.2. The rise of AI-gene…

计算机是如何工作的(笔记)

目录 寄存器 操作系统 进程&#xff08;process&#xff09; CPU pcb中关于进程调度相关的属性 寄存器 用来存储数据的单位&#xff0c;是CPU的一部分 寄存器&#xff0c;存储空间更小&#xff0c;访问速度更快&#xff0c;成本更高&#xff0c;掉电后数据会丢失 寄存器…

java 定时任务不按照规定时间执行

这里写目录标题 使用异步启动可能出现的问题排查代码中添加的定时任务步骤是否正确排查是否任务阻塞&#xff0c;如果定时任务出现异常阻塞后&#xff0c;将不会在次执行java中多个Scheduled定时器不执行为了让Scheduled效率更高&#xff0c;我们可以通过两种方法将定时任务变成…

【LeetCode 75】第十五题(1456)定长子串中元音的最大数目

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码运行结果&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 就难度而言&#xff0c;我觉得算不上中等&#xff0c;因为和上一题基本一致&#xff0c;只不过上一题是求最大平均数&#xff0c…