- 导入相关css和js。
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
- 如果不是使用form表单，建议使用div。
<div id="summernote">Summernote的基本使用</div>
- 如果使用form表单，与上面几乎相同，建议使用一个textarea元素，该元素应包含name属性，该元素应包含name属性，因此在提交表单时，您可以使用该名称来处理您的编辑器数据后端。另外，如果在form表单中使用Summernote form表单设置属性method="post"以允许将较大尺寸的编辑器内容解析到后端，如果不这样做，则数据可能无法解析，或者将被截断。
<form method="post">
<textarea id="content" name="content"></textarea>
</form>
- 然后再初始化summernote。
$(document).ready(function() {
$('#content').summernote();
});
- 例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
</head>
<body>
<div id="content"><p>Summernote的基本使用</p></div>
<script>
$(document).ready(function() {
$('#content').summernote();
});
</script>
</body>
</html>
来源：https://blog.csdn.net/weixin_40140969/article/details/102721713