它的特点:
- 开源
- 使用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>    