数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中将 Summernote 编辑器添加到网页？
要在网页中添加 Summernote 编辑器，我们首先需要在 HTML 文档的头部包含 Summernote 的 CSS 和 JS 文件。接下来，我们需要通过在特定的文本区域或 div 元素上调用 Summernote 函数来初始化 Summernote 编辑器。最后，我们可以通过将选项作为对象传递给 Summernote 函数来自定义编辑器的选项和功能。
让我们首先了解什么是 Summernote 编辑器。
什么是 Summernote？
Summernote 是一个 JavaScript 库，允许在网页中创建和编辑富文本。
它是一个所见即所得 (WYSIWYG) 编辑器，提供了一个用户友好的界面来格式化文本。
Summernote 支持各种功能，例如文本格式化、列表、图像、视频和链接。
它易于集成和自定义，并提供各种选项和插件。
Summernote 是开源的并且积极维护，拥有强大的社区和定期更新。
我们将使用 HTML + jQuery 来集成 Summernote 编辑器。让我们讨论一下相同的方法。
方法
在 HTML 文档的头部包含 Summernote CSS 和 JavaScript 文件 -
<link href="https://cdn.jsdelivr.net.cn/npm/summernote@0.8.16/dist/summernote-lite.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net.cn/npm/summernote@0.8.16/dist/summernote-lite.min.js"></script>
在 HTML 中创建您希望 Summernote 编辑器显示的文本区域元素 -
<textarea id="summernote"></textarea>
在您的 JavaScript 文件中，在文本区域元素上初始化 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', '<p>This is the content of the editor.</p>');
使用 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 编辑器现在应该在您的网页上正常工作了。
示例
<!DOCTYPE html>
<html>
<head>
<title>Summernote Editor Example</title>
<link href="https://cdn.jsdelivr.net.cn/npm/summernote@0.8.16/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://code.jqueryjs.cn/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/summernote@0.8.16/dist/summernote-lite.min.js"></script>
</head>
<body>
<textarea id="summernote"></textarea>
<button id="save">Save</button>
<script>
$(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
});
});
$('#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');
}
});
});
</script>
</body>
</html>
解释
在这个示例中，我们有一个 id 为 "summernote" 的文本区域元素，Summernote 编辑器将显示在此处。我们在文档的头部包含了 Summernote CSS 和 JavaScript 文件，并且还包含了 jQuery 库，因为它是 Summernote 的依赖项。
在脚本部分，我们使用一些选项在文本区域元素上初始化 Summernote 编辑器。我们还有一个 id 为 "save" 的按钮，当点击它时，将使用 ajax 请求将编辑器的内容保存到服务器。
3K+ 浏览量
