如何用Javascript将Summernote Editor添加到网页中？

javascriptjavascript 2023-08-28 10:19:15 1152
摘要： 要在网页中添加Summernote编辑器，我们首先需要在HTML文档的头部包含SummernoteCSS和JS文件。接下来，我们需要通过调用Summernote函数来在特定文本区域或div元素上初始化Summernote编辑器。最后，我们可以...

如何用Javascript将Summernote Editor添加到网页中？

要在网页中添加 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 请求将编辑器的内容保存到服务器。

标签：