Javascript 如何将Summernote编辑器添加到网页中

要在网页中添加Summernote编辑器，我们首先需要在HTML文档的头部包含Summernote的CSS和JS文件。接下来，我们需要在特定的文本区域或div元素上通过调用Summernote函数来初始化Summernote编辑器。最后，我们可以通过将选项作为一个对象传递给Summernote函数来定制编辑器的选项和功能。

让我们首先了解什么是Summernote编辑器。

什么是Summernote

Summernote是一个JavaScript库，允许在网页中创建和编辑富文本。
它是一个所见即所得（WYSIWYG）的编辑器，为格式化文本提供了一个用户友好的界面。
Summernote支持各种功能，如文本格式化、列表、图像、视频和链接。
它很容易集成和定制，有大量的选项和插件可用。
Sumernote是开源的，并得到积极的维护，有一个强大的社区和定期更新。

我们将使用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元素。

<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>