summernote富文本编辑器

官网：https://summernote.org/

它的特点：

• 开源
• 使用Bootstrap 3.xx到4.xx
• 轻量级（js + css：100Kb）
• 智能用户交互
• 适用于所有主要浏览器：
  • Safari，Chrome，Firefox，Opera，Edge和Internet Explorer 9+
• 适用于所有主要操作系统：
  • Windows，MacOS，Linux

使用方法：

1.添加引用

<!-- include libraries(jQuery, bootstrap) -->

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

<!-- include summernote css/js -->

<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.10/lang/summernote-zh-CN.min.js"></script>

 

tips:

 

此框架是基于bootstrap的，所以要添加bootstrap引用; 引用了中文语言包。

 

2.前端代码：

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

<script>

$(document).ready(function () {

$('#summernote').summernote({

height: '300px',

lang: 'zh-CN',

callbacks: {

onImageUpload: function (files) {//上传图片 sendFile(files); } } });

$('#summernote').summernote('code', '测试富文本框');

//赋值

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

//取值

console.log(content); });

function sendFile(files) {

$('#summernote').summernote('insertImage', 'https://avatar.csdn.net/C/B/7/3_zero_295813128.jpg');//插入图片 //处理上传图片及诶口并返回路径...

}

</script>