前言
Summernote 编辑器插件是一款适用于FastAdmin后台的富文本编辑器,Summernote 是一个简单,灵活,所见即所得(WYSIWYG)的编辑器,基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键,有一个功能强大的 API,它提供了大量的自定义选项的设计和功能
1、Summernote 对于开发人员不友好的地方
summernote默认保存的是图片的base64数据,并没有存储图片文件,base64数据保存到数据库是较长的字符数据,占用大量的数据存储,不利于开发。
本人在使用过程中遇到了几个问题
- 图片保存无法触发方法,尝试更换js
- 保存后图片在编辑器内不显示,检查文件路径
- 因网页较大,数据库字段设置为Text
2、下面将介绍如何解决图片存储、删除问题、以及将存储内容还原等问题
1.引入库
引入jquery、summernote相关的库,直接去summernote官网下载
2.页面
<div class="ibox-content no-padding">
<table class="table table-bordered table-striped">
<div id="summernote" class="summernote"></div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-5">
<a href="#" class="btn btn-primary" type="button"
onclick="saveAddNews();">保存内容</a>
<a
href="javascript:history.back(-1);" class="btn btn-white">取消</a>
</div>
</div>
</div>
3.方法
1、如果发现插入图片不能触发上传图片的方法,尝试换一个summernote js的版本
2、插入图片时,后台的data.url 路径要是能获取的正确路径,否则会出现插入图片后编辑器不显示图片
3、上传、删除图片及保存数据不介绍了,常规传到服务器即可
4、编辑器初始化,设置常规参数,重写上传、删除的方法
//初始化
$(document).ready(function() {
$('.summernote').summernote({
lang : 'zh-CN',
height : 500, // 设置高度
callbacks : {
// 重写onImageUpload方法
onImageUpload : function(file) {
sendFile(this, file);
},
onMediaDelete : function(target) {
deleteFile(target);
}
}
});
});
//上传图片
function sendFile(val, file) {
var formData = new FormData();
formData.append("file", file[0]);
$.ajax({
url : "/market/summernoteFile",
type : "post",
data : formData,
dataType : "json",
processData : false,
contentType : false,
success : function(data) {
$('#summernote').summernote('insertImage', data.url); // 插入图片到编辑器中
},
error : function(error) {
console.log(error); // 处理错误情况
}
});
}
// 删除选择的图片
function deleteFile(target) {
var deleteImg = target[0].currentSrc;
var data = new FormData();
data.append("imgUrl", deleteImg);
$.ajax({
data : data,
type : "POST",
url : "/market/delNewsFile", // 执行请求
cache : false,
contentType : false,
processData : false,
success : function(data) {
if (data.data == 1) {
$('#error-alert').modal('show');
$('#error-alert .modal-body').text('删除成功.');
} else {
$('#error-alert').modal('show');
$('#error-alert .modal-body').text('Error. Please try again later.');
return false;
}
}
});
}
//保存编辑器内容
function saveAddNews() {
var content = $('#summernote').summernote('code'); //获取编辑器的内容
$.ajax({
type : "post",
url : '/market/saveAddNews',
data : formData,
dataType : "json",
processData : false,
contentType : false,
success : function(data) {
//成功失败提示
}
});
}
4.展示页面
1、展示比较简单,只需要将数据库获取的网页数据填充到DIV即可。
<div class="ibox-content no-padding">
<input id="content" name="content" th:value="${news.content}"type="hidden" />
<div id="summernote" class="summernote"></div>
</div>
<script type="text/javascript">
var content = $("#content").val();
document.getElementById('summernote').innerHTML = content;
</script>
到这里使用Summernote保存和展示带格式文章的功能就完成了
案列demo,关键部分代码