zoukankan      html  css  js  c++  java
  • KindEditor简单的Demo使用

    一般的做网站后台都会用到富文本编辑器,网上也有很多优秀的富文本编辑器,这里是开源中国的富文本编辑器推荐:http://www.oschina.net/project/tag/172/wysiwyg

    我用过CKeditor比较庞大,这里我用了一个国产开源的富文本编辑器(JS开发)KindEitor官网地址:http://www.kindsoft.net/

    开始前我要说下,开发时最好用最新的KindEitor因为网上有文章说KindEitor3.x-4.1有漏洞例如:

    http://www.2cto.com/Article/201207/140017.html

    http://www.cnseay.com/504/

    官方最目前新版的是:4.1.7 请大家去下载:http://www.kindsoft.net/down.php

    好了说了这么进入正题:

    下载下来是这样的红线标的是要的文件:

    把这些文件复制进入你的项目:

    对应的前台代码:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="KindEidtor._Default" %>
    
    <!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">
        <title>KindEditor测试Demo</title>
        <%--必须引入的对应CSS和JS--%>
        <link rel="stylesheet" href="Editor/themes/default/default.css" />
        <link rel="stylesheet" href="Editor/plugins/code/prettify.css" />
        <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.js"></script>
        <script type="text/javascript" charset="utf-8" src="Editor/kindeditor-min.js"></script>
        <script type="text/javascript" charset="utf-8" src="Editor/lang/zh_CN.js"></script>
        <script type="text/javascript" charset="utf-8" src="Editor/plugins/code/prettify.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(function () {
                var editor = KindEditor.create('textarea[name="txtEditor"]', {
                    //上传文件管理
                    uploadJson: 'handler/upload_json.ashx',
                    //文件管理
                    fileManagerJson: 'handler/file_manager_json.ashx',
                    //编辑器宽度
                     '700px',
                    //编辑器的显示功能
                    items:[
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash','insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                    'anchor', 'link', 'unlink', '|', 'about'
                    ]
                                               
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="margin: 20px auto;  800px;">
            <asp:TextBox id="txtEditor" runat="server" style="750px;height:450px;" TextMode="MultiLine"></asp:TextBox>
        </div>
        </form>
    </body>
    </html>

    这个例子只有简单的功能,更的配置请看官方的文档:http://www.kindsoft.net/doc.php

  • 相关阅读:
    python 包管理工具 pip 的配置
    Python 变量作用域 LEGB (下)—— Enclosing function locals
    Python 变量作用域 LEGB (上)—— Local,Global,Builtin
    2020 Java 面试题 小结 (答案慢慢补上,有错误请指出)
    mysql 根据日期(date)做年,月,日分组统计查询
    jvm指令
    正则表达式 分割地址 获取省市区详细地址
    .Net 异常记录
    WCF设计服务协议(一)
    plsql ORA-01789:查询块具有不正确的结果列数
  • 原文地址:https://www.cnblogs.com/zxdBlog/p/3193500.html
Copyright © 2011-2022 走看看