Summernote 富文本编辑器的内容变成只读模式

在这里插入图片描述

我 | 在这里
⭐ 全栈开发攻城狮、全网10W+粉丝、2022博客之星后端领域Top1、专家博主。
🎓擅长 指导毕设 | 论文指导 | 系统开发 | 毕业答辩 | 系统讲解等。已指导60+位同学顺利毕业
✈️个人公众号:热爱技术的小郑。回复 Java全套视频教程前端全套视频教程 即可获取 300G+ 教程资料,以及大量毕设项目源码。
🐬专注干货知识分享、项目实战案例开发分享
🚪 传送门:Github毕设源码仓库

1. 使用 disable 方法

  Summernote 提供了一个 disable 方法,可以让编辑器变为只读状态。你可以在初始化 Summernote 编辑器之后,调用这个方法:

$('#' + this.id).summernote({height: 300, // 设置编辑器高度toolbar: [    // 自定义工具栏,必要时可以简化['style', ['bold', 'italic', 'underline', 'clear']],['font', ['strikethrough', 'superscript', 'subscript']],['fontsize', ['fontsize']],['color', ['color']],['para', ['ul', 'ol', 'paragraph']],['height', ['height']]]
});// 让内容变成只读
$('#' + this.id).summernote('disable');

2. 在某个条件下将内容设为只读

  你可以根据某个条件决定是否将内容设置为只读。例如,基于某个布尔值条件:

var isReadOnly = true; // 根据需要动态设置$('#' + this.id).summernote({height: 300,toolbar: [['style', ['bold', 'italic', 'underline', 'clear']],['font', ['strikethrough', 'superscript', 'subscript']],['fontsize', ['fontsize']],['color', ['color']],['para', ['ul', 'ol', 'paragraph']],['height', ['height']]]
});if (isReadOnly) {$('#' + this.id).summernote('disable');
}

3. 动态切换编辑和只读模式

  你也可以在某个事件触发时动态地切换编辑和只读模式:

// 让内容变成只读
$('#' + this.id).summernote('disable');// 让内容变成可编辑
$('#' + this.id).summernote('enable');

4. 使用 codeview 结合 readonly 属性

  如果你仅想展示内容并确保完全只读,可以将内容切换到 codeview 并禁用编辑:

$('#' + this.id).summernote({height: 300,toolbar: false, // 禁用工具栏airMode: true   // 启用气泡模式,只显示浮动工具栏
});// 切换到代码视图
$('#' + this.id).summernote('codeview.toggle');// 禁用编辑
$('#' + this.id).attr('readonly', 'readonly');

5.实际应用

$(‘#’ + this.id).summernote(‘code’, content); 只读模式

  要在使用 $('#' + this.id).summernote('code', content); 方法设置内容的同时将 Summernote 编辑器切换到只读模式,可以结合以下步骤来实现:

  使用 $('#' + this.id).summernote('code', content); 设置内容。
  然后调用 $('#' + this.id).summernote('disable'); 将编辑器切换到只读模式。
这里是一个完整的示例代码:

// 初始化 Summernote 并设置内容
$('#' + this.id).summernote({height: 300, // 设置编辑器高度toolbar: [    // 自定义工具栏,必要时可以简化['style', ['bold', 'italic', 'underline', 'clear']],['font', ['strikethrough', 'superscript', 'subscript']],['fontsize', ['fontsize']],['color', ['color']],['para', ['ul', 'ol', 'paragraph']],['height', ['height']]]
});// 设置内容
$('#' + this.id).summernote('code', content);// 将编辑器切换到只读模式
$('#' + this.id).summernote('disable');

简化版本
  如果你只需要设置内容并立即让编辑器进入只读模式,可以直接简化为:

$('#' + this.id).summernote({height: 300,toolbar: false // 禁用工具栏,如果不需要编辑功能
});// 设置内容
$('#' + this.id).summernote('code', content);// 切换到只读模式
$('#' + this.id).summernote('disable');

解释:

  • summernote(‘code’, content): 这个方法用来设置编辑器的内容。
  • summernote(‘disable’): 这个方法将编辑器切换到只读模式,使用户无法编辑内容。

  通过上述代码,编辑器在内容设置完成后立即进入只读模式,确保内容无法被用户修改。

修改前的效果在这里插入图片描述

修改后的效果
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

【安卓】动态加载布局技巧

文章目录 使用限定符常见限定符 使用最小宽度限定符 使用限定符 修改FragmentTest项目中的activity_main.xml文件 <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:orientation"horizontal"android:layout_width&quo…

JavaScript constructor原型原型继承

constructor 在 JavaScript 中&#xff0c;构造函数是一种特殊的函数&#xff0c;使用 new 关键字来调用&#xff0c;用于创建对象实例。JavaScript 中的构造函数通常通过 function 关键字定义。 例如&#xff1a; function Person(name, age) {this.name name;this.age a…

4.MySQL数据类型

目录 数据类型 ​编辑数值类型 tinyint类型 bit类型 float类型 decimal类型 字符串类型 char类型 varchar varchar和char的区别 日期和时间类型 数据类型 数值类型 说明一下&#xff1a;MySQL本身是不支持bool类型的&#xff0c;当把一个数据设置成bool类型时&#x…

C#复习之封装_构造函数,析构函数,垃圾回收

知识点一&#xff1a;构造函数 基本概念 在实例化对象时 会调用的用于初始化的函数 如果不写 默认存在一个无参构造函数 构造函数的写法 1.没有返回值 2.函数名和类名必须相同 3.没有特殊需求时 一般都是public的 4.构造函数可以被重载 5.this代表当前调用该函数的对象自己 注…

【多线程】synchronized原理

文章目录 一、锁升级 (面试经常考)偏向锁 二、锁消除三、锁粗化锁的粒度 四、相关面试题 结合 锁策略&#xff0c;我们就可以总结出&#xff0c;synchronized具有以下特性&#xff1a; 乐观悲观&#xff0c;自适应重量轻量&#xff0c;自适应自旋挂起等待&#xff0c;自适应非…

Gradio 快速开发网页应用

Gradio 是一个开源的 Python 框架&#xff0c;可以快速开发页面&#xff0c;Gradio 主要用于 AI 模型 Demo 的开发&#xff0c;通过几行代码可以快速生成一个 Web Demo&#xff0c;由于 AI 算法工程师使用的都是 Python 语言&#xff0c;使用 Python 开发 Demo 会相对简单&…

演示:基于WPF的DrawingVisual开发GS(2019)1822号矢量中国地图一

一、目的&#xff1a;基于WPF的DrawingVisual开发的矢量地图 二、预览 默认样式 深黑样式 深蓝色样式 深蓝色透明样式 演示&#xff1a;基于WPF的DrawingVisual开发GS(2019)1822号矢量中国地图二-CSDN博客VS2022&#xff0c;net7演示&#xff1a;基于WPF的DrawingVisual开发GS…

DVWA—SQL(Blind)实例

DVWA—SQL Injection&#xff08;Blind&#xff09;实例 预备知识 在SQL注入中会有回显注入和盲注入的形式&#xff0c;在前面的文章中展示了回显注入的情况&#xff0c;而盲注入就是当我输入查询语句的时候数据并不会直接显示在页面中而是以程序员规定的输出格式来进行显示&…

【数据结构和算法】(基础篇二)——链表

链表 数组最麻烦的地方就是其在建立之后大小固定&#xff0c;对于增删数据很不方便。链表的出现解决了这个问题&#xff0c;链表的元素不是在内存中连续存储的&#xff0c;而是通过指针链接在一起的节点集合&#xff0c;这样的设计让链表有了动态的大小。链表是树和图结构的基…

Windows11 WSL2 Ubuntu编译安装perf工具

在Windows 11上通过WSL2安装并编译perf工具&#xff08;Linux性能分析工具&#xff09;可以按以下步骤进行。perf工具通常与Linux内核一起发布&#xff0c;因此你需要确保你的内核版本和perf版本匹配。以下是安装和编译perf的步骤&#xff1a; 1. 更新并升级系统 首先&#x…

Unity数据持久化 之 Json序列化与反序列化

语法规则可以看这篇文章&#xff1a;Unity数据持久化 之 Json 语法速通-CSDN博客 Q:Unity是通过什么来对Json文件进行处理的&#xff1f; A:JsonUtility&#xff1a;Unity 提供了 JsonUtility 类&#xff0c;用于将对象序列化为 JSON 字符串或将 JSON 字符串反序列化为对象。…

大数据-72 Kafka 高级特性 稳定性-事务 (概念多枯燥) 定义、概览、组、协调器、流程、中止、失败

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

DC-5靶机渗透测试

DC-5靶场 文章目录 DC-5靶场信息收集漏洞发现漏洞利用 --- 日志文件包含漏洞利用 --- 文件包含过滤器链的RCEshell反弹权限提升 信息收集 使用--scriptvuln扫描发现了一个thankyou.php界面 感觉会有问题&#xff0c;前往访问网站信息 漏洞发现 来到thankyou.php界面&#xff…

haproxy详解

目录 一、haproxy简介 二、什么是负载均衡 2.1 负载均衡的类型 2.2.1 硬件 2.2.2 四层负载均衡 2.2.3 七层负载均衡 2.2.4 四层和七层的区别 三、haproxy的安装及服务信息 3.1 示例的环境部署&#xff1a; 3.2 haproxy的基本配置信息 3.2.1 global 配置参数介绍 3…

sleuth+zipkin分布式链路追踪

概述 结构图 常见的链路追踪 cat zipkin pinpoint skywalking sleuth Sleuth介绍 Trace Span Annotation 使用Sleuth 添加依赖 <!--sleuth--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starte…

运维工具的衍化对运维工作的新挑战

运维工具的衍化对运维工作产生了深远的影响&#xff0c;这些影响体现在多个方面&#xff0c;包括提升运维效率、优化资源配置、增强故障应对能力、促进团队协作与沟通&#xff0c;以及面临新的挑战如数据安全和隐私保护等。运维工具的衍化对运维工作带来了多方面的新挑战&#…

Yolo-World初步使用

Yolo v8目前已经支持Yolo-World&#xff0c;整理一下初步使用步骤。 使用步骤 1 先下载Yolo-World的pt文件&#xff0c;下载地址&#xff1a;GitHub - AILab-CVC/YOLO-World: [CVPR 2024] Real-Time Open-Vocabulary Object Detection 官网应该是点这里&#xff08;有个笑脸…

【C#】读取与写入txt文件内容

在 C# 中读取和写入文本文件内容是一个常见的任务。以下是使用几种不同方法读取和写入文本文件的示例。 一、读取txt文件内容 1.1 使用 StreamReader using System; using System.IO;class Program {static void Main(){string filePath "C:\path\to\your\file.txt&qu…

QT多语言工具实现支持生成ts文件,ts文件和xlsx文件互转

一. 工具介绍 1.如果你是Qt项目,为多语言发愁的话,看到这篇文件,恭喜你有福啦!工具截图如下:​ 2.在项目开发的过程中,尽量将所有需要翻译的文本放在一个文件中,qml翻译用一个文件,cpp用一个,如下: test.h #pragma once /******************************************…

Java面试篇(线程池相关专题)

文章目录 1. 为什么要使用线程池2. 线程池的核心参数和线程池的执行原理2.1 线程池的核心参数2.2 线程池的执行原理 3. 线程池中常见的阻塞队列3.1 常见的阻塞队列3.2 ArrayBlockingQueue 和 LinkedBlockingQueue 的区别 4. 如何确定线程池的核心线程数4.1 应用程序中任务的类型…