要在网页中添加 summernote 编辑器，我们首先需要在 html 文档的头部包含 summernote css 和 js 文件。接下来，我们需要通过调用 summernote 函数来在特定文本区域或 div 元素上初始化 summernote 编辑器。最后，我们可以通过将选项作为对象传递给 summernote 函数来自定义编辑器的选项和功能。
我们先来了解一下什么是summernote编辑器。
summernote 是什么？summernote 是一个 javascript 库，允许在网页中创建和编辑富文本。
它是一个 wysiwyg（所见即所得）编辑器，提供用户友好的文本格式设置界面。
summernote 支持多种功能，例如文本格式、列表、图像、视频和链接。
它易于集成和自定义，提供多种选项和插件。
summernote 是开源的并得到积极维护，拥有强大的社区和定期更新。
我们将使用 html + jquery 来集成 summernote 编辑器。让我们讨论同样的方法。
方法将 summernote css 和 javascript 文件包含在 html 文档的头部 -
<link href=https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.css rel=stylesheet><script src=https://cdn.jsdelivr.net/npm/summernote@0.8.16/dist/summernote-lite.min.js></script>
在 html 中创建一个要显示 summernote 编辑器的文本区域元素 -
<textarea id=summernote></textarea>
在 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', '<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/npm/summernote@0.8.16/dist/summernote-lite.min.css rel=stylesheet> <script src=https://code.jquery.com/jquery-3.5.1.min.js></script> <script src=https://cdn.jsdelivr.net/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”的 textarea 元素，summernote 编辑器将出现在其中。我们在文档的头部包含了 summernote css 和 javascript 文件，并且还包含了 jquery 库，因为它是 summernote 的依赖项。
在脚本部分，我们使用一些选项在 textarea 元素上初始化 summernote 编辑器。我们还有一个 id 为“save”的按钮，单击该按钮将使用 ajax 请求将编辑器的内容保存到服务器。
以上就是如何用javascript将summernote editor添加到网页中？的详细内容。