SP.NET取不到kindeditor 编辑器数据，直接取得textarea的value也无法取到

用ASP.NET做一个内容管理系统，很简单的一个项目，应该没有什么问题，但是在做到文本编辑器的时候确实把我给难住了，我花了好长时间在网上搜资料，最终选用了KindEditor文本编辑器，这个比FCKEditor文本编辑器轻巧，而且也不用很进行很麻烦的参数配置，直接从官网上下载文件包，解压一下，里面有asp,asp.net,php,jsp的应用实例，用过之后感觉确定蛮好的，很轻巧也很灵活，可以说完全满足了我的需求，本来以为万事大吉了，可是在获取value值的时候，突然间发现在后台取不到textarea的值，纠结很长时间最终解决，下面是摘自官网的一段说明文档：

KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要将HTML数据设置到原来的textarea，editor.sync()函数会完成这个动作。

KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加editor.sync()函数，所以用form方式提交数据，不需要手动执行editor.sync()函数。

然后我又仔细看了看附带的实例，终于找到了问题所在，以下代码基本上就是官方给出的源码，就是增加了一个事件，然后一切搞定，终于可以在后台通过this.txtWb.value获取到文本编辑器的值了

<script type="text/javascript" language="javascript">

KindEditor.ready(function (K) {

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

cssPath: 'kindeditor/plugins/code/prettify.css',

uploadJson: '../../Handler/Upload.ashx',

fileManagerJson: '../../Handler/FileManager.ashx',

allowFileManager: true,

afterCreate: function () {

var self=this;

K.ctrl(document, 13, function () {

self.sync();

K('form[name=formCreateDocument]')[0].submit();

});

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

self.sync();

K('form[name=formCreateDocument]')[0].submit();

});

$('#lbtnSubmit').click(function () {

self.sync();

});

}

});

prettyPrint();

});

</script>

、kindeditor安装

• 普通使用

下载编辑器kindeditor最新版本

解压文件，然后将所有文件上传到工程目录下，具体目录视不同框架而定

在html页面引入以下js文件，路径需要修改为自己的路径，保证文件能正常加载

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

在页面需要的部分加入textarea控件，注意：id需要唯一

 <textarea id="editor_id" name="content" style="width:700px;height:300px;">
 这里写入内容
 </textarea>

最后需要增加以下js代码，用于初始化控件

 <script>
 //简单模式初始化
 var editor;
 var options={};
 KindEditor.ready(function(K) {
 editor=K.create('#editor_id', options);
 });
 </script>

注意：

第一个参数为css选择器，一次只能初始化一个textarea元素。

options为编辑器的配置项，具体参数请参考官网

• rails安装

安装过程非常简单，首先在Gemfile

 gem 'rails_kindeditor'
 bundle install

然后执行命令生成相关文件

 rails g rails_kindeditor:install

修改配置文件参数config/initializers/rails_kindeditor.rb，例如文件上传路径，上传文件类型等

 RailsKindeditor.setup do |config|
 # Specify the subfolders in public directory.
 # You can customize it , eg: config.upload_dir='this/is/my/folder'
 config.upload_dir='uploads'
 # Allowed file types for upload.
 config.upload_image_ext=%w[gif jpg jpeg png bmp]
 config.upload_flash_ext=%w[swf flv]
 config.upload_media_ext=%w[swf flv mp3 wav wma wmv mid avi mpg asf rm rmvb]
 config.upload_file_ext=%w[doc docx xls xlsx ppt htm html txt zip rar gz bz2]
 
 # Porcess upload image size
 # eg: 1600x1600=> 800x800
 # 1600x800=> 800x400
 # 400x400=> 400x400 # No Change
 # config.image_resize_to_limit=[800, 800]
 # if you have config in your rails application like this:
 # /config/enviroments/production.rb
 # # config.action_controller.asset_host="http://asset.example.com"
 # # config.assets.prefix="assets_prefx"
 # then you should:
 #
 # config.asset_url_prefix="http://asset.example.com/assets_prefx/" if Rails.env.production?
 end

在view中嵌入编辑器

 <%=kindeditor_tag :content,"这里是默认内容" %>

然后编辑器就可以使用，如图：

二、填坑

• 获取文本框内容

当表单提交时会发现，提交的数据并没有获取到文本框中的内容，这是因为输入数据时并不能实时使textarea获取到文本内容，那么我们就需要在提交表单时手动赋值

 var editor=KindEditor.instances[0];
 editor.sync();

注意，此处KindEditor.instances获取到的是一个文本框数组，根据自己需要取值

• 生产环境使用

rails生产环境都会使用production配置启动，首先需要编译资源文件

 RAILS_ENV=production rake assets:precompile

但是当编译完之后，会发现KindEditor的样式文件并没有获取到，这是因为KindEditor需要单独编译

 rails kindeditor:assets

这时public/assets下就出现了KindEditor需要的资源文件，KindEditor也可以正常使用。