在线HTML编辑器 KindEditor
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。
sys_addNews.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/admin/common.jsp" %>
<html>
<head>
<title>发布文章</title>
<STYLE type="text/css">
li{list-style: none;}
.color{background:pink;}
.search_input{
border:1px solid #7F9DB9;font-size:12px;font-family: Verdana, Arial, Helvetica, sans-serif;height:18px
}
table {
font-family:Arial,Helvetica,sans-serif;font-size:15px;
}
select,input,textarea{ border: 1px solid #E1E1E1}
</STYLE>
<link rel="stylesheet" href="<%=basePath %>/kindeditor//themes/default/default.css" />
<script charset="utf-8" src="<%=basePath %>/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="<%=basePath %>/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript" src="${path}/js/jquery-1.4.2.min.js"></script>
<script>
var editor1;
var k1;
KindEditor.ready(function(K) {
editor1 = K.create('textarea[name="ncontent"]', {
resizeType : 1,
afterChange : function() {
K('.word_count1').html(this.count());
}
,
height:"300",
cssPath : '<%=basePath %>/kindeditor//themes/default/default.css',
uploadJson : '<%=basePath %>/system/index_kindeditorupload_json.action',
fileManagerJson : '<%=basePath %>/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['mycomment'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
//self.sync();
document.forms['mycomment'].submit();
});
}
});
//prettyPrint();
});
//function postComment(id){
//editor1.sync();
//document.forms['mycomment'].action="comment.action?parentId="+id+"&uId="+document.getElementById("name_"+id).value;
//document.forms['mycomment'].submit();
//}
KindEditor.ready(function(K) {
K;
var uploadbutton = K.uploadbutton({
button : K('#ke-upload-button')[0],
fieldName : 'imgFile',
url : '<%=basePath %>/system/index_kindeditorupload_json.action',
afterUpload : function(data) {
if (data.error === 0) {
$("#picPath").val(data.url);
} else {
alert(data.message);
}
}
});
uploadbutton.fileBox.change(function(e) {
uploadbutton.submit();
});
//editor1.insertHtml($("#inittextarea").html());
K('#submit').click(function() {
if($("#topicid").val()==""){
var dialog = K.dialog({
width : 200,
title : '提示',
body : '<div style="margin:10px;"><strong>文章分类不能为空</strong></div>',
closeBtn : {name : '关闭',click : function(e) {dialog.remove();}
}
//yesBtn : {name : '确定',click : function(e) {alert(this.value);}},
//noBtn : {name : '取消',click : function(e) {dialog.remove();}}
});
}
if($("#ntitle").val()==""){
var dialog = K.dialog({
width : 200,
title : '提示',
body : '<div style="margin:10px;"><strong>文章标题不能为空</strong></div>',
closeBtn : {name : '关闭',click : function(e) {dialog.remove();}
},
//yesBtn : {name : '确定',click : function(e) {alert(this.value);}},
noBtn : {name : '确定',click : function(e) {dialog.remove();return;}}
});
return;
}
if($("#nauthor").val()==""){
var dialog = K.dialog({
width : 200,
title : '提示',
body : '<div style="margin:10px;"><strong>文章作者不能为空</strong></div>',
closeBtn : {name : '关闭',click : function(e) {dialog.remove();}
},
//yesBtn : {name : '确定',click : function(e) {alert(this.value);}},
noBtn : {name : '确定',click : function(e) {dialog.remove();return;}}
});
return;
}
if(editor1.html()==""){
var dialog = K.dialog({
width : 200,
title : '提示',
body : '<div style="margin:10px;"><strong>文章内容不能为空</strong></div>',
closeBtn : {name : '关闭',click : function(e) {dialog.remove();}
},
//yesBtn : {name : '确定',click : function(e) {alert(this.value);}},
noBtn : {name : '确定',click : function(e) {dialog.remove();return;}}
});
return;
}
if(editor1.html().length>400000){
var dialog = K.dialog({
width : 200,
title : '提示',
body : '<div style="margin:10px;"><strong>文章内容过长</strong></div>',
closeBtn : {name : '关闭',click : function(e) {dialog.remove();}
},
//yesBtn : {name : '确定',click : function(e) {alert(this.value);}},
noBtn : {name : '确定',click : function(e) {dialog.remove();return;}}
});
return;
}
var picpath="";
var focusNews = 0;
if($("#focusNews").attr("checked")){
if($("#picPath").val()=="" || $("#picPath").val()==null){
alert("请点击右面的图片按钮上传一张用于显示在焦点新闻的图片");
return;
}
picpath =$("#picPath").val();
focusNews=1;
}
var indexImg = 0;
if($("#indexImg").attr("checked")){
if($("#picPath").val()=="" || $("#picPath").val()==null){
alert("请点击右面的图片按钮上传一张用于显示在顶部的图片");
return;
}
picpath =$("#picPath").val();
indexImg=1;
}
var jdsj = 0;
if($("#jdsj").attr("checked")){
if($("#picPath").val()=="" || $("#picPath").val()==null){
alert("请点击右面的图片按钮上传一张用于显示在经典瞬间的图片");
return;
}
picpath =$("#picPath").val();
jdsj=1;
}
var imgPath ="";
$("#getImg").html(editor1.html());
$("#getImg img").each(function(){
imgPath+=(this.src)+";"
})
//if($("#nsummary").val()==""){
//var dialog = K.dialog({
//width : 200,
//title : '提示',
//body : '<div style="margin:10px;"><strong>文章标题不能为空</strong></div>',
//closeBtn : {name : '关闭',click : function(e) {dialog.remove();}
//},
//yesBtn : {name : '确定',click : function(e) {alert(this.value);}},
// noBtn : {name : '确定',click : function(e) {dialog.remove();return;}}
//});
//return;
//}
//alert($("#newsid").val());
//alert(imgPath);
$.ajax({
type: "POST",
url: "<%=basePath%>/system/jdata_addNews.action",
data: {"news.topic.topicid" : $("#topicid").val(),
"news.ntitle": $("#ntitle").val(),
"news.nsummary":$("#nsummary").val(),
"news.ncontent":editor1.html(),
"news.nid":$("#newsid").val(),
"news.focusNews":focusNews,
"news.indexImg":indexImg,
"news.focusImagePath":imgPath,
"news.nauthor":$("#nauthor").val(),
"news.npicpath":picpath,
"news.jdsj":jdsj,
"news.ipAddress":'<%=ip%>'
},
dataType: "json",
success: function (data) {
var result=$.parseJSON(data.result);
if(result.success!="true"){
//alert(result.msg);
var dialog = K.dialog({
width : 200,
title : '错误提示',
body : '<div style="margin:10px;"><strong>'+result.msg+'</strong></div>',
closeBtn : {name : '关闭',click : function(e) {dialog.remove();}
},
//yesBtn : {name : '确定',click : function(e) {alert(this.value);}},
noBtn : {name : '确定',click : function(e) {dialog.remove();return;}}
});
return;
}else{
//alert(result.msg);
var dialog = K.dialog({
width : 200,
title : '系统消息',
body : '<div style="margin:10px;"><strong>'+result.msg+'</strong></div>',
closeBtn : {name : '关闭',click : function(e) {dialog.remove();}
},
//yesBtn : {name : '确定',click : function(e) {alert(this.value);}},
noBtn : {name : '确定',click : function(e) {location.reload();return;}}
});
}
}
});
});
});
//上传顶部大图
$(function(){
$("#ke-upload-button").hide();
$("#picPath").show();
})
</script>
</head>
<body style="background:#DFF7F4;">
<input type="hidden" value="<s:property value="news.nid" />" id="newsid"/>
<div style="margin:0 0 0 50;width: 200px;"></div>
<div style="border: 1px solid #66CCFF;background: #FCFCFC;margin: 10 50 50 50 ">
<table width="900px" style="">
<tr>
<td width="150px;" align="center">文章分类 </td>
<td>
<table style="margin: 0 0 0 0 ;border: 0 solid;">
<tr>
<td>
<select style="width:auto;" name="topicid" id="topicid">
<s:iterator value="topicList" status="st" id="Topic">
<s:if test="%{news.topic.topicid==#Topic.topicid}">
<option value="<s:property value="#Topic.topicid" />" selected="selected" style="color: red">
<!--<s:property value="#st.index+1"/>_-->
<s:property value="#Topic.zt.ztname"/>►
<s:property value="#Topic.topicname"/></option>
</s:if>
<s:else>
<option value="<s:property value="#Topic.topicid" />">
<!--<s:property value="#st.index+1"/>_-->
<s:property value="#Topic.zt.ztname"/>►
<s:property value="#Topic.topicname"/></option>
</s:else>
<s:iterator value="%{twotopic}" id="TwoTopic">
<s:if test="%{news.topic.topicid==#TwoTopic.topicid}">
<option value="<s:property value="#TwoTopic.topicid" />" selected="selected" style="color: red">
<!--<s:property value="#st.index+1"/>_-->
<s:property value="zt.ztname"/>►
<s:property value="#Topic.topicname"/>►
<s:property value="#TwoTopic.topicname"/>
</option>
</s:if>
<s:else>
<option value="<s:property value="topicid" />">
<!--<s:property value="#st.index+1"/>_-->
<s:property value="zt.ztname"/>►
<s:property value="#Topic.topicname"/>►
<s:property value="#TwoTopic.topicname"/>
</option>
</s:else>
</s:iterator>
</s:iterator>
</select><font color="#FF0000" style="margin-top:50%;font-size:13px;">*</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="150px;" align="center">文章标题 </td>
<td>
<table style="margin: 0 0 0 0 ;border: 0 solid;">
<tr>
<td>
<input style='WIDTH: 499px;font-size:14px;' maxlength="30" name="ntitle" id="ntitle" value="<s:property value="news.ntitle"/>"/><font color="#FF0000" style="margin-top:50%;font-size:13px;">*(必填,限制30字)</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="150px;" align="center">文章作者 </td>
<td>
<table style="margin: 0 0 0 0 ;border: 0 solid;">
<tr>
<td>
<input style='WIDTH: 499px;font-size:14px;' maxlength="10" name="nauthor" id="nauthor" value="<s:property value="news.nauthor"/>"/><font color="#FF0000" style="margin-top:50%;font-size:13px;">*(必填,限制10字)</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="150px;" align="center">内容摘要 </td>
<td>
<table style="margin: 0 0 0 0 ;border: 0 solid;">
<tr>
<td>
<textarea rows="3" onpropertychange="if(value.length>300) value=value.substr(0,300)" style="WIDTH: 499px;font-size:14px;" maxlength="80" name="nsummary" id="nsummary"><s:property value="news.nsummary"/></textarea>
</td>
<td><font color="#FF0000" style="margin-top:50%;font-size:13px;">(选填,限制300字)</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="150px;" align="center">文章内容 </td>
<td>
<table>
<tr>
<td width="700">
<textarea rows="3" id="ncontent" name="ncontent" style="WIDTH: 700px;font-size:14px;"><s:property value="news.ncontent" escape="false"/></textarea>
<p>您当前输入了 <span class="word_count1">0</span> 个文字。(字数统计包含HTML代码。)</p>
<!-- <textarea rows="" cols="" style="display: none;" id="inittextarea"><s:property value="news.ncontent" escape="false"/></textarea> -->
</td>
<td><font color="#FF0000" style="margin-top:50%;font-size:13px;">*</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="150px;" align="center"></td>
<td><input type="checkbox" id="focusNews"
<s:if test="news.focusNews==1">
checked="checked"
</s:if> style="font-size: 12px;" />推荐到焦点新闻
<input type="checkbox" id="indexImg" <s:if test="news.indexImg==1">
checked="checked"
</s:if> style="font-size: 12px;" />推荐到顶部滚动大图
<input type="checkbox" id="jdsj" <s:if test="news.jdsj==1">
checked="checked"
</s:if> style="font-size: 12px;" />推荐到经典瞬间 <input value="<s:property value="news.npicpath"/>" width="40px;" id="picPath" style="display: none;" readonly="readonly"/><input style="display: none;" value="图片" id="ke-upload-button"/></td>
</tr>
<tr>
<td colspan="2" align="left" style="line-height: 45px;">
<s:if test="news.nid!=null">
<button style="margin-left:200px; border: 1px solid #C0C0C0;line-height:30px;" id="submit">修 改</button>
</s:if>
<s:else>
<button style="margin-left:200px; border: 1px solid #C0C0C0;line-height:30px;" id="submit">发 表</button>
</s:else>
</td>
</tr>
</table>
</div>
<div style="display: none;" id="getImg"></div>
</body>
</html>
action
/**
* 该方法用于支持 kindeditor
* @return
*/
public String kindeditorupload_json(){
return "upload_json";
}
struts2
<result name="upload_json">/kindeditor/jsp/upload_json.jsp
资源下载: