KindEditor Html编辑器的配置实例

最新推荐文章于 2025-07-09 15:25:45 发布

原创最新推荐文章于 2025-07-09 15:25:45 发布 · 6.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #stylesheet #textbox #function #asp.net #manager

Asp.net 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在ASP.NET项目中配置KindEditor富文本编辑器，包括下载、配置步骤及自定义上传路径等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址：KindEditor 官网

配置方法：

1、下载之后解压，我配置的是asp.net 的，所以就选了下面几个文件，attached 是默认上传图片的保存地址，examples 里面是Demo，把所选的文件放到工程里面。

2、在index.aspx 里面引用js 和css

<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />
    <script charset="utf-8" src="kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="kindeditor/lang/zh_CN.js"></script>
    <script charset="utf-8" src="kindeditor/plugins/code/prettify.js"></script>
    <script>

        KindEditor.ready(function(K) {

            var editor1 = K.create('#content', {

                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();

                        document.forms['example'].submit();

                    });

                    K.ctrl(self.edit.doc, 13, function() {

                        self.sync();

                        document.forms['example'].submit();

                    });

                }

            });

            prettyPrint();

        });

    </script>

3、绑定控件

 <div>
        <asp:TextBox runat="server" ID="content" TextMode="MultiLine" Style="width: 700px;
            height: 400px;"></asp:TextBox>
    </div>

4、这样就可以测试了，如果不想让上传大图的保存在默认的文件夹里面，可以修改保存地址，在asp.net 文件夹下file_manager_json.ashx 和 upload_json.ashx 里面修改。