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>