编辑器使用感觉很简单
引入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+');">«</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+');">»</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代码
};