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

其他 2018-08-20 03:42:07 阅读次数: 0

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


猜你喜欢

转载自blog.csdn.net/liqimo1799/article/details/12872049
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022