HTML编辑器 KindEditor已配置可以直接使用

来源：互联网发布：丁力软件编辑：程序博客网时间：2024/05/17 03:44

在线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

资源下载：

HTML编辑器 KindEditor