Summernote富文本编辑器上传、删除图片以及带样式内容还原

发布于:2024-12-07 ⋅ 阅读:(130) ⋅ 点赞:(0)

前言

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>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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,关键部分代码


网站公告

今日签到

点亮在社区的每一天
去签到