便签使用wangEditor

编辑器使用感觉很简单

引入js

<script type="text/javascript" src="<%=basePath%>public/release/wangEditor.js" ></script>

    <div id="div1" class="toolbar">
	</div>
	<div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度--> </div>
<script type="text/javascript">
$(function() {
        var E = window.wangEditor;
        /* var editor = new E('#editor'); */
         var editor = new E('#div1', '#div2');
         // 关闭粘贴样式的过滤
        editor.customConfig.pasteFilterStyle = false;
        // 忽略粘贴内容中的图片,可以直接粘贴图片
        editor.customConfig.pasteIgnoreImg = false;
        // 自定义处理粘贴的文本内容
        /* editor.customConfig.pasteTextHandle = function (content) {
            // content 即粘贴过来的内容(html 或 纯文本),可进行自定义处理然后返回
            return content + '<p>在粘贴内容后面追加一行</p>'
        } */
        editor.create();    
</script>	

结合后台的业务使用便签


var pageData = function(pageSize,pageTotal,StartTime,endTime) {
	if (pageSize <= 0) {
		pageSize = 1;
		return;
	}else if(pageSize>pageTotal){
		pageSize = pageTotal;
		return;
	}
        //表单列表
		$.ajax({
			type:"post",
			url:root+"noteFile/findPageNoteFile.do",
			data : {
				'pageNumber' : pageSize,
				'StartTime':StartTime,
				'endTime':endTime
			},
			async: false,
			datatype:"json",
			success:function(messageData){
				$("#noticedata").html("");
				console.log(messageData);
				if(messageData.code==500){
					return;
				}
				messageData= messageData.data;
				//获取总数
				var total = messageData.total;
				//获取页码
			  if(total>=1){
					var pageTotal = messageData.totalPages;
				    
					var pageHtml = '<li><a href="javascript:pageData(' + (pageSize - 1) + ','+pageTotal+');">&laquo;</a></li>';
					for (var i = 1; i <= pageTotal; i++) {
						if (pageSize == i) {
							pageHtml = pageHtml + '<li class="active"><a href="javascript:void(0);">' + i + '</a></li>';
						} else {
							pageHtml = pageHtml + '<li><a href="javascript:pageData(' + i + ','+pageTotal+');">' + i + '</a></li>';
						}
					}
					pageHtml = pageHtml + '<li><a href="javascript:pageData(' + (pageSize + 1) + ','+pageTotal+');">&raquo;</a></li>';
					$("#pagination").html(pageHtml);
				var data = messageData.rows;
				var html = "";
				for(var i = 0; i<data.length; i++){
				var neir="'"+data[i].content+"'";
				var str = "'"+data[i].id+"'";
				console.log("data:"+data[i]);
				var cen=neir.substring(0,7);
				html = html 
				+ '<tr>'+
				'<td>'+(i+1)+'</td>'+
				'<td style="color:#00A853;">'+cen+'</td>'+
				'<td style="color:#00A853;">'+timeStampString(data[i].createTime)+'</td>'+
				'<td>'+
				'<div class="btns btn-green" onclick="queryDatel('+str+')">详情</div> '+ 
				'<div class="btns btn-green" onclick="delectDatel('+str+')">删除</div> '+
				' </td></tr>';
				
				$("#noticedata").html(html);
				}
			  }else{
				  $("#pagination").html(""); 
			  }
		},
			error:function(errorDate){
				console.log(errorDate);
			}
		 });
	}
	pageData(1,10,null,null);
//查看详情
	var queryDatel=function(str){
		//根据内容打开编辑
		
		 $.ajax({
			 type:"post",
			 url:root+"noteFile/findByNote.do",
			 datatype:"json",
			 data:{'id':str},
			 async: false,
			 success:function(companyData){ 
				 console.log(companyData);
				 var data =companyData.data;
				 if(companyData.code==200){
					 $(".modal").show();
					 $("#noteId").attr("value",data.id);
					 editor.txt.html(data.html);
				 }
				 if(companyData.code==500){
					 alert(companyData.message);
				 }
			 },
			 error:function(errorData){
			 	console.log(errorData);
			 }
		});
	}
	
//删除
	var delectDatel=function(str){
		 var a=confirm('删除确认');
   		 if (a){
   			 $.ajax({
			 type:"post",
			 url:root+"noteFile/deletebyId.do",
			 datatype:"json",
			 data:{'id':str},
			 async: false,
			 success:function(companyData){ 
				 console.log(companyData);
				
				 if(companyData.code==200){
					 alert(companyData.message);
					 location.reload();
				 }
				 if(companyData.code==500){
					 alert(companyData.message);
				 }
			 },
			 error:function(errorData){
			 	console.log(errorData);
			 }
		});
   	  }
	}

//关闭模态
var closeModal = function(){
	$(".modal").hide();
	location.reload();
}

//提交方法
function addassigntask(id,text,html){
	var url = root + "noteFile/saveNoteFile.do";
	$.ajax({
		type : "post",
		url : url,
		data : {
		    'id':id,
			'html':html,
			'content':text,
			'today':today
		},
		async : false,
		datatype : "json",
		success : function(messageData) {
			console.log(messageData);
			//
			debugger;
			if (messageData.code == 200) {
			  alert(messageData.message);
			  closeModal();
			}
			if (messageData.code == 500) {
				alert(messageData.message);
			}
			if (messageData.code == 501) {
				alert(messageData.message);
			}
		},
		error : function(errorData) {
			console.log(errorData);
		}
	});
}
//创建便签
var addtask = function(){
	$(".modal").show();	
}
//搜索
var echte=function(){
	//获取用户名,获取标题
	var StartTime = $("#startTime").val();
	var endTime = $("#endTime").val();
	pageData(1,10,StartTime,endTime);
}

//下发内容
var funtask = function(){
	//获取编辑器内容
	 // 读取 text
	var text=editor.txt.text();
    //获取编辑器的html
    var html=editor.txt.html();
    if(!html){
		alert('内容不能为空!');
	   	 return false;
	}
    var id=$("#noteId").val();
    //提交
    //alert(id);
	addassigntask(id,text,html);	
}

//表单重置
var ret=function(){
	$("input").val("");
}

java创建的便签的实体类

	private String id;  //主键
	@Column(name = "employee_name", columnDefinition = "varchar(32) COMMENT '用户名'")
	private String employeeName;
	@Column(name = "employee_id", columnDefinition = "int COMMENT '用户ID'")
	private Integer employeeId;
	/**
	 * 
	 * 0:正常    1:失效或删除    
	 */
	@Column(name = "status", columnDefinition = "varchar(32) COMMENT '状态'")
	private String status;
	@Column(name = "html", columnDefinition = "text COMMENT 'html文件'")
	private String html;
	@Column(name = "content", columnDefinition = "text COMMENT '纯文本文件'")
	private String content;
	@Column(name = "create_time", columnDefinition = "datetime COMMENT '创建时间'")
	@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
	private Date createTime;
	@Column(name = "update_time", columnDefinition = "datetime COMMENT '修改时间'")
	@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
	private Date updateTime;

	@Column(name = "note_time", columnDefinition = "datetime COMMENT '便签日期'")
	@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
	private Date noteTime;

使用:进行处理的方法,可以自定义处理

 editor1.customConfig.pasteTextHandle = function (content) {
    	         	 // content 即粘贴过来的内容(html 或 纯文本),可进行自定义处理然后返回
    	             return content.replace(/<!--(.|\s)*?-->/g,"");//去除word转html代码
    	         };   

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值