SP.NET取不到kindeditor 編輯器數(shù)據(jù)，直接取得textarea的value也無法取到

用ASP.NET做一個(gè)內(nèi)容管理系統(tǒng)，很簡(jiǎn)單的一個(gè)項(xiàng)目，應(yīng)該沒有什么問題，但是在做到文本編輯器的時(shí)候確實(shí)把我給難住了，我花了好長(zhǎng)時(shí)間在網(wǎng)上搜資料，最終選用了KindEditor文本編輯器，這個(gè)比FCKEditor文本編輯器輕巧，而且也不用很進(jìn)行很麻煩的參數(shù)配置，直接從官網(wǎng)上下載文件包，解壓一下，里面有asp,asp.net,php,jsp的應(yīng)用實(shí)例，用過之后感覺確定蠻好的，很輕巧也很靈活，可以說完全滿足了我的需求，本來以為萬事大吉了，可是在獲取value值的時(shí)候，突然間發(fā)現(xiàn)在后臺(tái)取不到textarea的值，糾結(jié)很長(zhǎng)時(shí)間最終解決，下面是摘自官網(wǎng)的一段說明文檔：

KindEditor的可視化操作在新創(chuàng)建的iframe上執(zhí)行，代碼模式下的textarea框也是新創(chuàng)建的，所以最后提交前需要將HTML數(shù)據(jù)設(shè)置到原來的textarea，editor.sync()函數(shù)會(huì)完成這個(gè)動(dòng)作。

KindEditor在默認(rèn)情況下自動(dòng)尋找textarea所屬的form元素，找到form后onsubmit事件里添加editor.sync()函數(shù)，所以用form方式提交數(shù)據(jù)，不需要手動(dòng)執(zhí)行editor.sync()函數(shù)。

然后我又仔細(xì)看了看附帶的實(shí)例，終于找到了問題所在，以下代碼基本上就是官方給出的源碼，就是增加了一個(gè)事件，然后一切搞定，終于可以在后臺(tái)通過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;">
 這里寫入內(nèi)容
 </textarea>

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

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

注意：

第一個(gè)參數(shù)為css選擇器，一次只能初始化一個(gè)textarea元素。

options為編輯器的配置項(xiàng)，具體參數(shù)請(qǐng)參考官網(wǎng)

• rails安裝

安裝過程非常簡(jiǎn)單，首先在Gemfile

 gem 'rails_kindeditor'
 bundle install

然后執(zhí)行命令生成相關(guān)文件

 rails g rails_kindeditor:install

修改配置文件參數(shù)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,"這里是默認(rèn)內(nèi)容" %>

然后編輯器就可以使用，如圖：

二、填坑

• 獲取文本框內(nèi)容

當(dāng)表單提交時(shí)會(huì)發(fā)現(xiàn)，提交的數(shù)據(jù)并沒有獲取到文本框中的內(nèi)容，這是因?yàn)檩斎霐?shù)據(jù)時(shí)并不能實(shí)時(shí)使textarea獲取到文本內(nèi)容，那么我們就需要在提交表單時(shí)手動(dòng)賦值

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

注意，此處KindEditor.instances獲取到的是一個(gè)文本框數(shù)組，根據(jù)自己需要取值

• 生產(chǎn)環(huán)境使用

rails生產(chǎn)環(huán)境都會(huì)使用production配置啟動(dòng)，首先需要編譯資源文件

 RAILS_ENV=production rake assets:precompile

但是當(dāng)編譯完之后，會(huì)發(fā)現(xiàn)KindEditor的樣式文件并沒有獲取到，這是因?yàn)镵indEditor需要單獨(dú)編譯

 rails kindeditor:assets

這時(shí)public/assets下就出現(xiàn)了KindEditor需要的資源文件，KindEditor也可以正常使用。