Summernote - 超级简单的所见即所得编辑器-优快云博客

Summernote - 超级简单的所见即所得编辑器

【免费下载链接】summernote Super simple WYSIWYG editor 项目地址: https://gitcode.com/gh_mirrors/su/summernote

Summernote 是一款基于 JavaScript 的开源富文本编辑器，以其简洁直观的界面和强大的功能特性而闻名。作为一个轻量级的 WYSIWYG（所见即所得）编辑器，它能够帮助开发者轻松集成到各种 Web 应用中，为用户提供流畅的内容编辑体验。

核心特性

简单易用的用户界面：Summernote 提供了清晰直观的工具栏布局，用户无需学习复杂的操作即可快速上手。编辑器界面设计简洁，专注于内容创作本身。

便捷的图片处理功能：用户可以直接从剪贴板复制粘贴图片到编辑器中，Summernote 会自动将图片转换为 base64 编码并嵌入到内容中，无需额外的图片上传和管理流程。

Bootstrap 完美兼容：Summernote 与 Bootstrap 3、4、5 版本完全兼容，可以无缝集成到基于 Bootstrap 框架的网站和应用中。

丰富的插件生态系统：Summernote 拥有庞大的插件和连接器生态系统，可以通过插件扩展编辑器的功能，满足各种特定需求。

跨平台支持：支持多种浏览器和设备，确保在不同环境下都能提供一致的编辑体验。

快速开始

安装步骤

引入依赖文件：在 HTML 文件的 <head> 标签中添加 jQuery、Bootstrap 和 Summernote 的 CSS/JS 文件引用：

<!-- 引入 jQuery 和 Bootstrap -->
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 引入 Summernote -->
<link href="summernote-bs5.css" rel="stylesheet">
<script src="summernote-bs5.js"></script>

创建编辑器容器：在页面 body 中添加一个 div 元素作为编辑器的容器：

<div id="summernote">欢迎使用 Summernote</div>

初始化编辑器：使用 jQuery 初始化 Summernote 编辑器：

$(document).ready(function() {
  $('#summernote').summernote();
});

基本 API 使用

Summernote 提供了丰富的 API 接口，方便开发者进行自定义操作：

// 获取编辑器内容
var htmlContent = $('#summernote').summernote('code');

// 设置编辑器内容
$('#summernote').summernote('code', '<p>新的内容</p>');

// 插入文本
$('#summernote').summernote('insertText', '插入的文本');

// 插入图片
$('#summernote').summernote('insertImage', 'image.jpg', '图片描述');

安全注意事项

由于 Summernote 的代码视图允许用户输入脚本内容，建议在服务器端对 HTML 内容进行过滤和清理，以防止潜在的 XSS 攻击。确保对用户输入的内容进行适当的安全处理。

扩展功能

Summernote 支持多种扩展功能，包括：

自动链接检测：自动将 URL 文本转换为可点击的链接
代码高亮：支持代码片段的语法高亮显示
表格编辑：提供完整的表格创建和编辑功能
全屏模式：支持全屏编辑体验
占位符文本：可以设置编辑器的占位符提示文本

自定义配置

Summernote 提供了丰富的配置选项，允许开发者根据具体需求进行自定义：

$('#summernote').summernote({
  height: 300,                // 设置编辑器高度
  minHeight: null,            // 最小高度
  maxHeight: null,            // 最大高度
  focus: true,                // 初始化后自动聚焦
  toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['insert', ['link', 'picture', 'video']],
    ['view', ['fullscreen', 'codeview', 'help']]
  ]
});

Summernote 作为一个功能强大且易于使用的富文本编辑器，无论是用于博客系统、内容管理系统还是企业内部协作工具，都能提供出色的编辑体验。其简洁的设计和丰富的功能使其成为开发者和内容创作者的理想选择。

【免费下载链接】summernote Super simple WYSIWYG editor 项目地址: https://gitcode.com/gh_mirrors/su/summernote

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考