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="../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/function.css" />
    <link href="../css/leftsidebar.css" rel="stylesheet" />
    <link href="../kindeditor/themes/default/default.css" rel="stylesheet" />
    <link href="../kindeditor/plugins/code/prettify.css" rel="stylesheet" />
    <script type="text/javascript" src="../kindeditor/kindeditor.js"></script>
    <script type="text/javascript" src="../kindeditor/lang/zh_CN.js"></script>
    <script type="text/javascript" src="../kindeditor/plugins/code/prettify.js"></script>
    <script type="text/javascript" src="../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="../css/mutiImg.css" rel="stylesheet" />
    <script type="text/javascript"  src="../js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="../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="../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 = url;
            });

        });

    </script>
    <style type="text/css">

    </style>
    <script src="../js/nq.js"></script>
    <%--取色--%>

    <link rel="stylesheet" type="text/css" href="../css/spectrum.css">

    <link rel="stylesheet" type="text/css" href="../css/docs.css">

    <script type="text/javascript" src="../js/spectrum.js"></script>
    <script type=‘text/javascript‘ src=‘../js/toc.js‘></script>
    <script type=‘text/javascript‘ src=‘../js/docs.js‘></script>

</head>
<body>
    <form runat="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="#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="-999999" MaximumValue="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="添加图片" />
                                <%--                    <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="../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="内容" /><%=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="1" id="RadioGroup1_0" checked="checked" />是
  	 		  <input type="radio" name="Show" value="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="取 消" name="">
                            </p>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </form>
</body>
</html>
时间: 2024-07-28 23:43:28

KindEditor编辑器使用的相关文章

(编辑器)Jquery-EasyUI集合Kindeditor编辑器

1.在html里面添加 list.html list.html (function ($, K) { if (!K) throw "KindEditor未定义!"; function create(target) { var opts = $.data(target, 'kindeditor').options; var editor = K.create(target, opts); $.data(target, 'kindeditor').options.editor = edit

KindEditor编辑器的使用

1.下载KindEditor编辑器  以KindEditor 4.1.10为例. 2.将下载解压完的KindEditor文件夹放在__ROOT__中. 3.在thinkphp中的Index/index.html中添加以下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

kindeditor编辑器代码过滤解决方法.

很多朋友在使用Kindeditor编辑器的时候都会遇到这样一个问题,如:给A标签加上title属性过后,浏览的时候,却神奇般地发现title属性没有了.再次切换html源代码的时候,返现编辑器将title属性给删掉了.追究其根本原因主要是kindeditor设置了标签和属性的默认过滤机制.KindEditor默认状态下会过滤编辑器里的html代码,主要是为了生成干净的代码,就会出现我们想不到的结果,现在焦国强为大家讲解:如何避免自己手动添加的代码被不必要的过滤. 首先我们知道3.4版本以上版本默

Kindeditor编辑器上传附件,自动获取文件名显示。

大部分在线编辑器在上传附件之后都是会以路径的形式显示出来很不友好.类似这样..怎么样显示成这样用户上传的原始文件名呢.就是这样.是不是看着很友好. kindeditor编辑器上传文件是已插件的形式调用的,包括其他类似的功能(批量上传图片,百度地图)都是在plugins目录下.打开insertfile目录下的insertfile.js文件.在文件上传之后的回调函数里面找到urlBox.val(url);在下面添加一行titleBox.val(data.title);这里会把后台上传文件之后返回的j

详细介绍如何使用kindEditor编辑器

今天群里的朋友问我能不能写个kindEditor编辑器的使用教程,说是弄了半天没有搞定.由于PHP啦后台正好用了这个编辑器,我有写经验,正好教他的同时写出来分享给大家. kindEditor编辑器是一个由JS写成的在线编辑器,很多网站或CMS等都有用它,口碑不错,目前最新版本是4.1.10. 其实它的用法非常简单,我是在下载了它的安装包后看了一些demo然后就把它放到PHP啦的后台上去了.好了教程正式开始 一.下载 下载最新版本的kindEditor(官方网站kindeditor.net),下载

DWZ与KindEditor编辑器的整合

原文:DWZ与KindEditor编辑器的整合 DWZ自带的编辑器是xheditor,可能很多人用不习惯.就像我,习惯用kindeditor了.现在就来说说如何整合dwz和kindeditor. 一.打开DWZ的中的dwz.ui.js,进行修改. 首先找到 if ($.fn.xheditor) { $("textarea.editor", $p).each(function(){ var $this = $(this); var op = {html5Upload:false, ski

Kindeditor 编辑器POST提交的时候会出现符号被转换

Kindeditor编辑器输入符号单引号,双引号,斜杠 都会被转义 解决办法 $date['content']=$this->textString($_POST['content']); public function textString($string){ $string = str_replace("\'","'",$string); $string = str_replace('\"','"',$string); return $s

如何自定义kindeditor编辑器的工具栏items即去除不必要的工具栏或者保留部分工具栏

kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能就需要保留部分工具栏.那么我们应该如何自定义自己想要的工具栏呢?工具栏如何编辑呢?我们分几种情况来加以阐述: 第一种:修改原始文件kindeditor.js对工具栏进行统一调整 kindeditor编辑器包内有一个kindeditor.js或者kindeditor-min.js文件,这个文件主要是包含了编辑器的整个基本配置以及一些基本的

yourphp添加KindEditor编辑器

<tr> <td align="right">故障描述</td> <script charset="utf-8" src="./Public/Kindeditor/kindeditor-min.js"></script> <script charset="utf-8" src="./Public/Kindeditor/lang/zh_CN.js&quo

KindEditor编辑器在ASP.NET中的使用

最近做的项目中都有用到富文本编辑器,一直在寻找最后用的富文本编辑器,之前用过CKEditor,也用过UEditor,这次打算用 一下KindEditor. KindEditor简介: KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器.KindEditor使用JavaScript编写,可以无缝的于Java..NET.PHP.ASP等程序接合. KindEditor非常适合