要在网页中添加 Summernote 编辑器，我们首先需要在 HTML 文档的头部包含 Summernote CSS 和 JS 文件。接下来，我们需要通过调用 Summernote 函数来在特定文本区域或 div 元素上初始化 Summernote 编辑器。最后，我们可以通过将选项作为对象传递给 Summernote 函数来自定义编辑器的选项和功能。
我们先来了解一下什么是Summernote编辑器。
Summernote 是什么？
Summernote 是一个 JavaScript 库，允许在网页中创建和编辑富文本。
-
它是一个 WYSIWYG（所见即所得）编辑器，提供用户友好的文本格式设置界面。
立即学习“Java免费学习笔记（深入）”；
Summernote 支持多种功能，例如文本格式、列表、图像、视频和链接。
它易于集成和自定义，提供多种选项和插件。
Summernote 是开源的并得到积极维护，拥有强大的社区和定期更新。
我们将使用 HTML + jQuery 来集成 Summernote 编辑器。让我们讨论同样的方法。
方法
将 Summernote CSS 和 JavaScript 文件包含在 HTML 文档的头部 -
在 HTML 中创建一个要显示 Summernote 编辑器的文本区域元素 -
ASP.NET 4.0电子商城下载在现实生活中的购物过程，购物者需要先到商场，找到指定的产品柜台下，查看产品实体以及标价信息，如果产品合适，就将该产品放到购物车中，到收款处付款结算。电子商务网站通过虚拟网页的形式在计算机上摸拟了整个过程，首先电子商务设计人员将产品信息分类显示在网页上，用户查看网页上的产品信息，当用户看到了中意的产品后，可以将该产品添加到购物车，最后使用网上支付工具进行结算，而货物将由公司通过快递等方式发送给购物者
在 JavaScript 文件中，在 textarea 元素上初始化 Summernote 编辑器 -
$(document).ready(function() {
$('#summernote').summernote();
});
如果您想自定义 Summernote 编辑器的选项，可以将选项对象传递给 Summernote() 函数 -
$(document).ready(function() {
$('#summernote').summernote({
height: 300, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true // set focus to editable area after initializing summernote
});
});
要访问编辑器的内容，您可以使用 code() 函数 -
var content = $('#summernote').summernote('code');
要设置编辑器的内容，您可以使用 code() 函数并将内容作为字符串传递 -
$('#summernote').summernote('code', 'This is the content of the editor.
');
使用ajax方法将内容保存到服务器 -
$('#save').click(function(){
var aHTML = $('.summernote').code(); //save HTML If you need(aHTML: array).
$('.summernote').destroy();
$.ajax({
url: '/save',
type: 'post',
data: {content: aHTML},
success: function(){
alert('Your content was successfully saved');
}
});
});
就是这样！您的 Summernote 编辑器现在应该可以在您的网页上运行了。
示例
Summernote Editor Example
说明
在此示例中，我们有一个 id 为“summernote”的 textarea 元素，Summernote 编辑器将出现在其中。我们在文档的头部包含了 Summernote CSS 和 JavaScript 文件，并且还包含了 jQuery 库，因为它是 Summernote 的依赖项。
在脚本部分，我们使用一些选项在 textarea 元素上初始化 Summernote 编辑器。我们还有一个 ID 为“save”的按钮，单击该按钮将使用 ajax 请求将编辑器的内容保存到服务器。
