1、引用js 可在 https://summernote.org/ 官网下载 ，并查看详细的API 引入：summernote.js 和 summernote-zh-CN.js 以及样式文件：summernote.css
2、Html
<textarea class="summernote" data-type="w"></textarea>
3、初始化summernote
/**
* 初始化富文本框 summernote
* */
function initSummernote() {
$('.summernote').summernote({
lang: 'zh-CN',
height: 300,
placeholder: "详情...",
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: false,
disableDragAndDrop: true,
dialogsInBody: true,
dialogsFade: true,
fontSizes: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25'],
fontNames: [
'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
'Tahoma', 'Times New Roman', 'Verdana', 'Microsoft YaHei'
],
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'italic', 'underline', 'clear', 'fontsize', 'fontname']],
['color', ['color']],
['font', ['style', 'strikethrough', 'superscript', 'subscript', 'height']],
//['para', ['ul', 'ol', 'paragraph']],
['para', ['paragraph']],
//['video', ['video']],
['picture', ['picture']],
['link', ['link']],
['table', ['table']],
//['hr', ['hr']],
['undo', ['undo']],
['redo', ['redo']],
['help', ['help']],
['codeview', ['codeview']]
],
callbacks: {
//上传回调
onImageUpload: function (files) { //the onImageUpload API
var type = $(this).data('type');
$.each(files, function (i, item) {
sendFile(item, type);
});
},
//删除回调
onMediaDelete: function (target) {
deleteFile(target);
}
}
});
//解决选择图片时 打开本地文件夹时，有延时问题。
$('.note-image-input').prop('accept', 'image/jpeg, image/jpg, image/png, image/gif');
}
/**
* Summernote 上传图片到服务器
* @param {any} file 图片文件
* @param {string} type 图片类型，在textarea 标签 中 添加 data-type 属性 英文 小写
*/
function sendFile(file, type) {
data = new FormData();
data.append("file", file);//根据实际情况传参
data.append("dir", type);
$.ajax({
data: data,
type: "POST",
url: "/",
cache: false,
contentType: false,
processData: false,
success: function (result) {
if (result.success) {
$(".summernote").summernote('insertImage', result.url);
} // the insertImage API
},
error: function () {
alert('上传失败!');
}
});
}
/**
* Summernote 删除到服务器中的图片
* @param {object} target//回调参数
*/ function deleteFile(target) {
var picUrl = target.attr('src');
$.ajax({
data: { },
type: "POST",
url: "/",
processData: true,
success: function (result) {
},
error: function () {
alert('删除失败!');
}
}); }
4、使用：直接调用
initSummernote()就可以完成初始化。