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’): 这个方法将编辑器切换到只读模式，使用户无法编辑内容。

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

修改前的效果

修改后的效果