富文本编辑器summernote的基本使用
吕俊才
summernote比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。
官网地址
中文文档
源码下载地址
Summernote依赖于jquery和bootstrap3/4 所以用时记得引入这俩依赖
引入方法
<!-- include libraries(jQuery, bootstrap) -->
<!-- 插件引入 -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<!--引入中文JS包-->
<script src="https://cdn.bootcss.com/summernote/0.8.10/lang/summernote-zh-CN.js"></script> //因为这个插件是国外的写的，一定要引入这个中文包，不然编辑器是默认的英文
HTML
简单的例子：
HTML
<!--方法一-->
<div id="summernote"></div> //内容载体
<!--方法二-->
<body>
<div id="summernote" style="width:100px;height:100px;"><p>Hello Summernote</p></div>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
js
// 编辑器功能=====================================
$("#summernote").summernote({
lang : 'zh-CN',// 语言
height : , // 高度
minHeight : , // 最小高度
placeholder : '请输入文章内容', // 提示
// summernote自定义配置
toolbar: [
['operate', ['undo','redo']],
['magic',['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['para', ['height','fontsize','ul', 'ol', 'paragraph']],
['font', ['strikethrough', 'superscript', 'subscript']],
['color', ['color']],
['insert',['picture','video','link','table','hr']],
['layout',['fullscreen','codeview']],
],
callbacks : { // 回调函数
// 上传图片时使用的回调函数 因为我们input选择的本地图片是二进制图片，需要把二进制图片上传服务器，服务器再返回图片url，就需要用到callback这个回调函数
onImageUpload : function(files) {
var form=new FormData();
form.append('myFileName',files[]) //myFileName 是上传的参数名，一定不能写错
$.ajax({
type:"post",
url:"${path}/Img/upload", //上传服务器地址
dataType:'json',
data:form,
processData : false,
contentType : false,
cache : false,
success:function(data){
console.log(data.data)
$('#summernote').summernote('editor.insertImage',data.data);
}
})
}
}
});
注意：
$('#summernote').summernote('insertImage', url, filename);
官方文档提供的图片插入封装函数，在本地环境下服务器返回的url并不能展示在编辑框内，所以不要怀疑这个函数的作用，当你放到生产环境的时候自然会展示在编辑框内，这个问题我花了一个下午才证明，希望不要再踩坑
summernote取值和赋值
取值：
$('#summernote').summernote('code')
赋值：
$('#summernote').summernote('code', this.richContent)
判断内容是否为空：
var isEmpty = $("#user-work-content").summernote('isEmpty');
今天想做个富文本编辑器器的字数提示功能
var text=$('#summernote').summernote('code');
拿到的值，里面带p标签，还有空格，换行标签什么的，很难统计出富文本的实际文本的长度，于是查了一篇文章
summernote文本编辑器使用（含概要内容提取）
这篇文章，提供了如何将原始文本，转化成干净的文本（不含各种标签，空格符什么的），下面单独将这块代码沾出来
function getNoMarkupStr(markupStr) {
/* markupStr 源码</> */
//console.log(markupStr);
var noMarkupStr=$("<div>").html(markupStr).text();/* 得到可视文本(不含图片),将 <>转为空字符串和<和>显示,同时去掉了换行,文本单行显示 */
//console.log("1--S" + noMarkupStr + "E--");
noMarkupStr=noMarkupStr.replace(/(\r\n|\n|\r)/gm,"");/* 去掉可视文本中的换行,(没有用,上一步已经自动处理) */
//console.log("2--S" + noMarkupStr + "E--");
noMarkupStr=noMarkupStr.replace(/^\s+/g,"");/* 替换开始位置一个或多个空格为一个空字符串 */
//console.log("3--S" + noMarkupStr + "E--");
noMarkupStr=noMarkupStr.replace(/\s+$/g,"");/* 替换结束位置一个或多个空格为一个空字符串 */
//console.log("4--S" + noMarkupStr + "E--");
noMarkupStr=noMarkupStr.replace(/\s+/g," ");/* 替换中间位置一个或多个空格为一个空格 */
//console.log("5--S" + noMarkupStr + "E--");
return noMarkupStr;
}
将获取到的原始文本，传入，然后返回的就是干净的文本，于是就好统计实际文本的长度了
使用summernote
1.summernote使用的js代码
var preview = function(params){
layer.open({
title:"预览",
content: $(".note-editable").html(),
area: ['900px', '500px'],
});
}
var previewCallback = function(params){
//console.info(params);
}
var previewButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-search"/>', //按钮样式
tooltip: '预览',
click: function (params) {
preview(params);// 这里是我自己的点出时触发的事件
},
callback:function(params){
previewCallback(params);// 这里的回调函数会在加载页面的时候直接执行
}
});
return button.render();//按钮渲染
}
$('.summernote').summernote({
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Georgia', 'Georgia2', 'Merriweather'],
fontNamesIgnoreCheck:['Georgia'],
height : 400,
lang : 'zh-CN',
callbacks: {
onImageUpload: function (files) {
sendFile(files[0], this);
}
},
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough', 'subscript', 'superscript']],
['fontsize',['fontsize']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['insert', ['table', 'link', 'picture', 'video', 'hr']],
['view', ['fullscreen', 'codeview', 'help', 'preview']],
],
buttons: {
preview: previewButton//自已定义的按钮函数
},
});
$('.note-editable').css('font-family','Georgia2');
2.上传文件js代码
//上传文件
function sendFile(file, obj) {
var data = new FormData();
var ctx = [[@{/}]] + "summernote/content";
data.append("file", file);
$.ajax({
type: "POST",
url: ctx + "/file/upload",
data: data,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(result) {
if (result.code == web_status.SUCCESS) {
$(obj).summernote('editor.insertImage', result.fileName, result.fileName);
} else {
$.modal.alertError(result.msg);
}
},
error: function(error) {
$.modal.alertWarning("图片上传失败。");
}
});
}
3.获取富文本编辑器里的值
var markupHTML = $('.summernote').summernote('code');
类似资料：