编辑器kindeditor 在Asp.net中的使用

本次分享给大家带来一个可视化编辑器(我以前用的版本是3.x的，现在更新到了4.X请朋友们用于4.x以上的，才可参考我的帮助文档)

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果

开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，

比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。-这不是我的介绍，是官方的

在众多可视化编辑器中，包括ckeditor与Fckeditor，我还是比较支持这个国产软件kindeditor

本网站的编辑器即是用kindeditor下载地址

版本不高不低4.0.5 (2012-01-15)

我发表过ckeditor与Fckeditor的帮助文档。包括本人的使用都感觉这个编辑器完全不适合人类使用。

繁重的加载。功能的缺陷。Debug的出现。兼容性的问题

入正题，无图无真相

用过其他编辑器的人都知道上面那些图标代表的每一个功能！

 

1. 下载编辑器

下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。

下载页面: http://www.kindsoft.net/down.php

2. 部署编辑器

解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/

文件介绍

您可以根据需求删除以下目录后上传到服务器。

asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

3. 修改HTML页

1. 在需要显示编辑器的位置添加textarea输入框。

2. <textarea id="editor_id" name="content" style="width:700px;height:300px;">HTML内容</textarea> 

   
   

• id在当前页面必须是唯一的值。
• 在textarea里设置HTML内容即可实现编辑

2. 在该HTML页面添加以下脚本。

<script charset="utf-8" src="/editor/kindeditor.js"></script> 

<script charset="utf-8" src="/editor/lang/zh_CN.js"></script> 

var editor1;
KindEditor.ready(function (K) {
    editor1 = K.create(#editor_id, {
        cssPath: /editor/kindeditor/plugins/code/prettify.css,
        uploadJson: /editor/kindeditor/asp.net/upload_json.ashx,
        fileManagerJson: /editor/kindeditor/asp.net/file_manager_json.ashx,
        allowFileManager: true
    });
    prettyPrint();
});

4. 获取HTML数据

// 取得HTML内容
html = editor.html();

// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById(editor_id).value; // 原生API
html = K(#editor_id).val(); // KindEditor Node API
html = $(#editor_id).val(); // jQuery

// 设置HTML内容
editor.html(HTML内容);