首页 > 代码库 > KindEditor编辑器使用
KindEditor编辑器使用
<%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="true" CodeBehind="AddArticle.aspx.cs" Inherits="Web.SpiderAdmin.Article.AddArticle" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/index.css" />
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/function.css" />
<link href="http://www.mamicode.com/css/leftsidebar.css" rel="stylesheet" />
<link href="http://www.mamicode.com/kindeditor/themes/default/default.css" rel="stylesheet" />
<link href="http://www.mamicode.com/kindeditor/plugins/code/prettify.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.mamicode.com/kindeditor/kindeditor.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/kindeditor/plugins/code/prettify.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/kindeditor/plugins/multiimage/multiimage.js"></script>
<script type="text/javascript">
KindEditor.ready(function (K) {
var editor1 = K.create(‘#content1‘, {
cssPath: ‘../kindeditor/plugins/code/prettify.css‘,
uploadJson: ‘../kindeditor/asp.net/upload_json.ashx‘,
fileManagerJson: ‘../kindeditor/asp.net/file_manager_json.ashx‘,
allowFileManager: true,
afterCreate: function () {
var self = this;
K.ctrl(document, 13, function () {
self.sync();
K(‘form[name=example]‘)[0].submit();
});
K.ctrl(self.edit.doc, 13, function () {
self.sync();
K(‘form[name=example]‘)[0].submit();
});
}
});
prettyPrint();//要高亮的代码一开始是隐藏的，要显示出来
});
KindEditor.ready(function (K) {
var editor = K.editor({
uploadJson: ‘../kindeditor/asp.net/upload_json.ashx‘,
fileManagerJson: ‘../kindeditor/asp.net/file_manager_json.ashx‘,
allowFileManager: true
});
K(‘#uploadimg‘).click(function () {
editor.loadPlugin(‘image‘, function () {
editor.plugin.imageDialog({
// imageUrl: K(‘#SiteLogo‘).val(),
showRemote: false,
clickFn: function (url, title, width, height, border, align) {
K(‘#HidBigImg‘).val(url);
// alert(url);
K(".text-img").attr("src", url);
editor.hideDialog();
}
});
// alert($(window.parent.frames["content"].document));
//var rf = window.frames["content"];
//var scre = rf.document.body.scrollTop;
//alert(scre);
//scre = scre == 0 ?245 :scre;
//$(".ke-dialog-default").css("top", scre);
});
});
<%=script.ToString()%>
});
</script>
<script type="text/javascript">
KindEditor.ready(function(K) {
K.create(‘.myedit-min‘, {
items: [
‘source‘, ‘|‘,
‘bold‘, ‘italic‘, ‘underline‘, ‘fontname‘, ‘fontsize‘, ‘forecolor‘, ‘hilitecolor‘,
‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘,
‘plug-align‘, ‘plug-order‘, ‘plug-indent‘, ‘quickformat‘, ‘clearhtml‘, ‘link‘
]
});
});
</script>
<%--上传--%>
<link href="http://www.mamicode.com/css/mutiImg.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/extMutiImg.js"></script>
<script type="text/javascript">
$(function () {
//10.14
var editors = $(".myedit");
for (var i = 0; i < editors.length; i++) {
KindEditor.create($(editors[i]));
}
var btns = $(".swich");
var divs = $(".myeditdiv");
divs[0].style.display = ‘block‘;
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function () {
for (var j = 0; j < divs.length; j++) {
divs[j].style.display = "none";
$(btns[j]).removeClass("currentbtn");
}
divs[this.index].style.display = "block";
$(this).addClass("currentbtn");
}
}
});
</script>
<style type="text/css">
*{ margin:0; padding:0;}
#box{ width:252px; min-height:300px; background:#FF9}
#demo{ margin:50px auto; width:540px; min-height:800px; background:#CF9}
</style>
<%--预览--%>
<style type="text/css">
.file {
position: relative;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 5px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
width:30px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
filter:alpha(opacity=0);
-webkit-opacity:0;
-moz-opacity:0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
.ke-container-default {
/* float:left;*/
margin-top: 5px;
margin-bottom:5px;
}
.myedit-1 {
width: 84% !important;
}
.main-lab {
float:left;
}
/*.ke-dialog-default{position:absolute !important;top:146px !important;left:487px;z-index:99999999;
}*/
</style>
<%-- <script src="http://www.mamicode.com/js/uploadPreview.js"></script>--%>
<script>
$(function () {
// $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
});
</script>
<script type="text/javascript">
$(function () {
$(".close-btn").click(function () {
var url = document.referrer;
parent.frames[‘content‘].location.href = http://www.mamicode.com/url;"text/css">
</style>
<script src="http://www.mamicode.com/js/nq.js"></script>
<%--取色--%>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/spectrum.css">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/docs.css">
<script type="text/javascript" src="http://www.mamicode.com/js/spectrum.js"></script>
<script type=‘text/javascript‘ src=http://www.mamicode.com/‘../js/toc.js‘></script>"server" method="post" enctype="multipart/form-data">
<div class="main-box main-box-2 ">
<h1 class=".page-manage">内容管理<span><%=companyName() %></span></h1>
<div class="container">
<div class="content-top" style="margin-left: 2%;">
<ul>
<li class="content-t1" id="tab1" onclick="show(‘tab1‘)">基本内容
</li>
</ul>
</div>
<div class="content-cn" id="tab1list" style="margin-left: 2%; width: 98%;">
<div class="add-box-2">
<div class="add-form-1">
<p>
<label>标题：</label>
<asp:TextBox ID="txtProductTitle" runat="server" CssClass="add-text" Style="width: 50%;"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtProductTitle" CssClass="mes-err" ErrorMessage="标题必填" Display="Dynamic"></asp:RequiredFieldValidator>
<input type="text" id="full" /><input type="hidden" value="http://www.mamicode.com/#000000" name="TitleColour" id="TitleColour" />
</p>
<p>
<label>排序：</label>
<asp:TextBox ID="txtSort" runat="server" Text="0" CssClass="add-text text-b" Style="width: 40px;"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtSort" ErrorMessage="仅限数字，越大越排前" CssClass="mes-err" Type="Integer" Display="Dynamic" MinimumValue="http://www.mamicode.com/-999999" MaximumValue="http://www.mamicode.com/999999"></asp:RangeValidator>
</p>
<p runat="server" id="pclick">
<label>点击量：</label>
<asp:TextBox ID="txtClick" runat="server" Text="1" CssClass="add-text" Style="width: 40px;"></asp:TextBox>
</p>
<p>
<label>SEO关键词：</label>
<asp:TextBox ID="txtKeyWord" runat="server" CssClass="add-text" Style="width: 50%;"></asp:TextBox>
</p>
<p>
<label>SEO描述：</label>
<asp:TextBox ID="txtDescription" runat="server" CssClass="add-text" Style="width: 50%;"></asp:TextBox>
</p>
<p>
<label>缩略图：</label>
<input type="button" id="uploadimg" class="btn-tx btn-all" value="http://www.mamicode.com/添加图片" />
<%-- <a href="javascript:;" class="file">添加图片
<input type="file" name="up" id="up">
</a>--%>
</p>
<p>
<asp:HiddenField ID="HidBigImg" runat="server" />
<img id="ImgPr" class="text-img" src="http://www.mamicode.com/images/default.gif" />
</p>
</div>
<div class="add-img">
</div>
<div class="cl"></div>
<div class="add-form-2">
<div>
<div class="neirong">内容摘要：</div>
<asp:TextBox ID="txtSummary" runat="server" CssClass="text-ms myedit-min myedit-1" TextMode="MultiLine"></asp:TextBox>
</div>
<div class="cl"></div>
<%-- <div>
<label class="main-lab">内容：</label>
<textarea id="content1" cols="100" rows="8" class="text-cn" style="visibility:hidden;width:80%;height:300px;" runat="server"></textarea>
</div>--%>
<div style="width: 90%; margin-left: 10.5%; margin-top: 10px;">
<div>
<input type="button" class="swich currentbtn btn-all" value="http://www.mamicode.com/内容" /><%=lb.ToString() %>
</div>
<div class="myeditdiv">
<textarea id="content1" cols="100" rows="8" class="text-cn myedit" style="visibility: hidden; width: 95%; height: 300px;" runat="server"></textarea>
</div>
<%=sb.ToString() %>
</div>
<div class="cl"></div>
<%=sbtxt.ToString() %>
<p class="mt">
<label>文章来源：</label>
<asp:TextBox ID="txtSource" runat="server" CssClass="add-text" Style="width: 50%;"></asp:TextBox>
</p>
<p>
<label>路由：</label>
<asp:TextBox ID="routeurl" class="add-text" runat="server"></asp:TextBox><span style="color:red">（不能由纯数字组成 且只能包含数字和字母）</span>
</p>
<p>
<label>推荐：</label>
<asp:DropDownList ID="ddlRecomType" runat="server"></asp:DropDownList>
</p>
<p>
<label>模版：</label>
<asp:DropDownList ID="ddlTemplate" runat="server"></asp:DropDownList>
</p>
<p>
<label>是否显示：</label>
<input type="radio" name="Show" value="http://www.mamicode.com/1" id="RadioGroup1_0" checked="checked" />是
<input type="radio" name="Show" value="http://www.mamicode.com/0" id="RadioGroup2_0" />否
</p>
<p>
<asp:Button ID="BtnSave" CssClass="sure-btn btn-all" runat="server" Text="确 定" OnClick="BtnSave_Click" />
<input class="close-btn" type="reset" value="http://www.mamicode.com/取 消" name="">
</p>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
KindEditor编辑器使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。