当前位置：首页 > news >正文

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

news 来源：原创 2024/9/19 10:08:35

在这里插入图片描述

我 | 在这里
⭐ 全栈开发攻城狮、全网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');