KindEditor Html编辑器的配置实例

本文介绍如何在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  里面修改。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值