首页导航博客电子书算法众创代码随贴关于我们

summernote快速开始,与图片上传

代码正文双击正文可选择全部

1[代码][html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线编辑器</title>

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/lang/summernote-zh-CN.js"></script> 
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>
<div id="summernote">Hello Summernote</div>
<script>
$(document).ready(function() {
   $('#summernote').summernote({
		lang: 'zh-CN',
		focus: false,
		fontNames: ['微软雅黑','黑体','宋体', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New'],
		toolbar: [  
			['codeview', ['codeview']],  
			['style', ['bold', 'italic']],  
			['fontname', ['fontname']],
			['fontsize', ['fontsize']],  
			['height', ['height']],  
			['color', ['color']],  
			['para', ['paragraph']],  
			['insert', ['link', 'picture', 'video']],
			['view', ['fullscreen', 'help']]
		],
		callbacks:{
			onImageUpload: function (files) {
				//上传图片到服务器
				var formData = new FormData();
				formData.append('file',files[0]);
				$.ajax({
					url : '',//后台文件上传接口
					type : 'POST',
					data : formData,
					processData : false,
					contentType : false,
					success : function(path) {
						$('.summernote').summernote('insertImage',path);
					},error:function(){
						alert("上传失败");
					}
				});
			}
		}
	});
});	
	</script>

public function summernote(){
        $ext='jpg,png,gif,jpeg';
        $size=2097152;
        $upload = new \Think\Upload();// 实例化上传类
        $upload->exts =  implode($ext,',');// 设置附件上传类型
        $upload->maxSize = $size;// 设置附件上传类型
        //上传文件
        $info   =   $upload->upload();
        $path = __ROOT__.'/Uploads/'.$info['file']['savepath'].$info['file']['savename'];
        echo json_encode($path);
    }

</body>
</html>