修改Summernote文本编辑器支持上传图片到服务器

最新推荐文章于 2021-03-09 23:21:09 发布

lg_lin

最新推荐文章于 2021-03-09 23:21:09 发布

阅读量1.9w

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/lg_lin/article/details/51497197

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

官网：http://summernote.org/

Summernote是基于Bootstrap的文本编辑器

Summernote默认上传图片是保存二进制图片数据，这样会造成数据库庞大，

我们现在就把它修改为上传到服务器，直接保存路径地址

不多说，直接上干货

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试上传图片</title>
</head>

<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="__ROOT__/Public/js/jquery.min.js"></script> 
<script type="text/javascript" src="__ROOT__/Public/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="__ROOT__/Public/css/bootstrap.min.css" />

<!-- include summernote css/js-->
<script src="__ROOT__/Public/plugins/summernote/summernote.min.js"></script>
<script src="__ROOT__/Public/plugins/summernote/lang/summernote-zh-CN.js"></script>

<link href="__ROOT__/Public/plugins/summernote/summernote.css" rel="stylesheet">



<body>

<div id="summernote">Hello Summernote</div>

<script language="javascript">


$(document).ready(function() {
    $('#summernote').summernote({
        height: "500px",
		callbacks: {
        	onImageUpload: function(files) { //the onImageUpload API
            	img = sendFile(files[0]);
        }
    }
    });
});

function sendFile(file) {
    data = new FormData();
    data.append("file", file);
	console.log(data);
    $.ajax({
        data: data,
        type: "POST",
        url: "{:U('Test/upload')}",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
              $("#summernote").summernote('insertImage', url, 'image name'); // the insertImage API
        }
    });
}

</script>
</body>
</html><strong>
</strong>

lg_lin

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
9
评论
修改Summernote文本编辑器支持上传图片到服务器

官网：http://summernote.org/Summernote是基于Bootstrap的文本编辑器Summernote默认上传图片是保存二进制图片数据，这样会造成数据库庞大，我们现在就把它修改为上传到服务器，直接保存路径地址不多说，直接上干货测试上传图片 Hello Summernote$(documen
复制链接

扫一扫