bootstrap插件summernote 的使用

最新推荐文章于 2024-08-08 08:25:30 发布

zihandan

最新推荐文章于 2024-08-08 08:25:30 发布

阅读量2.6w

点赞数 3

分类专栏： Java

本文链接：https://blog.csdn.net/zihandan/article/details/51025006

版权

Java 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一、有时java工程中会用到summernote 编辑器，下面简单说一下引用

1、将summernote 相应的文件放到工程中（webapp下面）

2、建一个jsp文件，在文件中引入相应的js、css文件

	<script src="includes/summernote/jquery-2.1.1.min.js"></script>
	<script src="includes/summernote/bootstrap.min.js"></script>
	<script src="includes/summernote/jquery.min.js"></script>
	<script src="includes/summernote/bootstrap.js"></script>
	<script src="includes/summernote/summernote.min.js"></script>
	<script src="includes/summernote/lang/summernote-zh-CN.js"></script>
	<link rel="stylesheet" type="text/css" href="includes/summernote/font-awesome/css/font-awesome.css"></link>
	<link rel="stylesheet" type="text/css" href="includes/summernote/font-awesome/css/font-awesome.min.css"></link>
	<link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote.css"></link>
	<link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote-bs2.css"></link>
	<link rel="stylesheet" type="text/css" href="includes/summernote/css/summernote-bs3.css"></link>

3、建一个div初始化div

<body>
	<div id="summernote">这是summernote 富文本编辑器</div>
</body>

4、js初始化

	<script type="text/javascript">
	//加载编辑器
	$(document).ready(function() {
		$('#summernote').summernote({
			height: 400,                
			minHeight: 300,           
			maxHeight: 500,      
			focus: true, 
		    lang:'zh-CN', 
		    // 重写图片上传
		onImageUpload: function(files, editor, $editable) {
			sendFile(files[0],editor,$editable);
		}
	  });
	});
	//图片上传
	function sendFile(file, editor, $editable){
		
		var filename = false;
		try{
		filename = file['name'];
		} catch(e){
			filename = false;
		}
		if(!filename){
			$(".note-alarm").remove();
		}
		
		//以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误
		data = new FormData();
		data.append("file", file);
		data.append("key",filename); //唯一性参数

		$.ajax({
		data: data,
		type: "POST",
		url: "",
		cache: false,
		contentType: false,
		processData: false,
		success: function(url) {
			if(url=='200'){
	       		alert("上传失败！");
	       		return;
	   		}else{
	   			alert("上传成功！");	
	   		}
			//alert(url);
		editor.insertImage($editable, url);
		//setTimeout(function(){$(".note-alarm").remove();},3000);
		},
		error:function(){
			alert("上传失败！");
			return;
			//setTimeout(function(){$(".note-alarm").remove();},3000);
			}
	  });
	 }
	
	</script>

5、给编辑器赋值

	   var text="${text}"; 
	   $('#summernote').code(text);

6、取值

	var str= $('#summernote').code();

zihandan

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
9
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录