Summernote 入门指南

获取Summernote

编译的CSS，JS

获取Summernote最快的方式是下载我们预编译和压缩的CSS和JavaScript版本。不包含文档或原始源代码文件。

下载源代码

通过直接从GitHub下载，获取最新的Summernote LESS和JavaScript源代码。下载

通过Github克隆或分支

访问我们的GitHub页面以克隆或分支Summernote项目。项目

安装

需要HTML5文档类型

Bootstrap使用某些HTML元素和CSS属性，这些属性需要HTML5文档类型。在所有项目的开始处包含<!DOCTYPE html>。

<!DOCTYPE html>
<html lang="en">
...
</html>

包含js/css

Summernote使用开源库jQuery和Bootstrap，如果你使用Summernote的Bootstrap 3或4版本，或者使用Summernote的Lite版本，则只需要使用jQuery。head区域中包含以下代码。

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="../thirdparty/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="../thirdparty/summernote.min.css" rel="stylesheet">
<script src="../thirdparty/summernote.min.js"></script>

如果你下载了summernote在不同的文件夹中，请别忘了更改文件的路径。

然而，现在很多开发者都这样做，可以在页面的head区域中包含样式表，并在页面底部包含JavaScript，但在关闭body标签之前。

Fontawesome依赖

在v0.8.0之后，你不需要包含fontawesome来显示Summernote的图标。但你仍然可以使用fontawesome来显示自定义图标。更多详情，请访问自定义按钮部分。自定义图标部分。

嵌入

Summernote可以带或不带form.

使用。要在没有form的情况下使用，我们建议在div中使用一个body元素；这个元素将用于在页面中渲染Summernote编辑器。

<div id="summernote">Hello Summernote</div>

在form中使用，基本上和上面一样，但我们在使用div的情况下，建议在textarea元素内部使用一个form元素，它应该包含一个名称属性，以便在表单提交时，你可以使用该名称在后台处理编辑器数据。另外，如果在使用Summernote时在form中设置属性method="post"以允许更大的编辑器内容解析到后台，否则你的数据可能无法解析，或者会被截断。

<form method="post">
  <textarea id="summernote" name="editordata"></textarea>
</form>

运行summernote

当文档准备好时，运行以下脚本！

$(document).ready(function() {
  $('#summernote').summernote();
});

如果你在文档的末尾包含JavaScript，那么$(document).ready函数尤其必要。

简单示例

你也可以测试运行示例。将以下代码保存为index.html并用你的浏览器打开它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="../thirdparty/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="../thirdparty/summernote.min.css" rel="stylesheet">
  <script src="../thirdparty/summernote.min.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>

对于Bootstrap 4

你也可以使用Bootstrap 4与summernote-bs4.js和summernote-bs4.css.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <script src="../thirdparty/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="../thirdparty/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="../thirdparty/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="../thirdparty/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link href="../thirdparty/summernote-bs4.min.css" rel="stylesheet">
    <script src="../thirdparty/summernote-bs4.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 4',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>

对于bootstrap 5

你也可以使用Bootstrap 5与summernote-bs5.js和summernote-bs5.css.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 5</title>
    <!-- include libraries(jQuery, bootstrap) -->
    <script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
    <script type="text/javascript" src="cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

    <!-- include summernote css/js-->
    <link href="summernote-bs5.css" rel="stylesheet">
    <script src="summernote-bs5.js"></script>

  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello Bootstrap 5',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>

无Bootstrap（lite）

你可以使用没有Bootstrap的Summernote，使用summernote-lite.js和summernote-lite.css.

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>without bootstrap</title>
    <script src="../thirdparty/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <link href="../thirdparty/summernote-lite.min.css" rel="stylesheet">
    <script src="../thirdparty/summernote-lite.min.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello stand alone ui',
        tabsize: 2,
        height: 120,
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
        ]
      });
    </script>
  </body>
</html>

基本 API

初始化Summernote

$('#summernote').summernote();

使用选项初始化Summernote

高度和焦点

如果你设置焦点选项，初始化Summernote后光标将聚焦在可编辑区域。

$('#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
});

如果你设置高度，你可以看到下面的调整大小条。

blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~
blah blah~

如果你没有设置高度，可编辑区域的高度将根据内容变化。

按下回车键。

销毁

销毁Summernote。

$('#summernote').summernote('destroy');

获取和设置代码

获取匹配元素集中第一个summernote的HTML内容。

var markupStr = $('#summernote').summernote('code');

如果你初始化了多个编辑器，你可以用jQuery获取第二个summernote的HTML内容eq.

var markupStr = $('.summernote').eq(1).summernote('code');

一个HTML字符串，用作每个匹配元素的设置内容。

var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);

更多详情api：深入了解api

销毁和代码

在v0.7.0之后，为了避免与其他jquery库冲突，直接jquery方法destroy和code被移除了。你可以用summernote api调用这些方法。

i18n支持

语言

包含带lang文件的库。例如)summernote-ko-KR.js.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="../thirdparty/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>

<!-- include summernote-ko-KR -->
<script src="lang/summernote-ko-KR.js"></script>

使用带有区域选项的脚本运行。

$(document).ready(function() {
$('#summernote').summernote({
lang: 'ko-KR' // default: 'en-US'
});
});

更多Summernote语言：语言

集成

在django，rails，angular等第三方可用。

Django

对你的django admin页面有用的更新。

React

要在React中使用Summernote，你可以使用react-summernote包。

react-summernote