整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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為編輯器的配置項，具體參數請參考官網
安裝過程非常簡單，首先在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也可以正常使用。
于可視化布局的實現，其實，目前有兩種方式可以實現可視化布局的方式。一種是在網上選擇一些免費的可視化布局軟件，另一種是直接使用在線可視化拖拽編輯器實現。不管用戶選擇哪種的方式實現可視化布局的話，他們的作用都是一樣的。目前可視化拖拽編輯器可以說是種類繁多, 特別是國外, 開源的商業的, 各種版本, 不一而足，接下來小編就簡單介紹幾個常見的免費、開源、在線的可視化拖拽編輯器。
一、可視化拖拽編輯器——KindEditor
KindEditor是一套開源的HTML可視化編輯器，主要用于讓用戶在網站上獲得所見即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。KindEditor使用JavaScript編寫，可以無縫的于Java、.NET、PHP、ASP等程序接合。
二、可視化拖拽編輯器——Smartbi
Smartbi是廣州思邁特軟件開發的一款軟件，目前個人版是永久免費使用的。使用Smartbi的自助儀表盤功能，讓你的工作匯報增添精彩。數據可視化不僅豐富且美觀，更重要是操作簡潔，使用方便。適應多變的分析場景。大大的提高了業務部門用數效率，減少科技部門的人員投入。當然，Smartbi還提供了移動端HTML訪問 BI 的功能，方便使用手機來查看 BI 應用。也可以通過集成到第三方報表查看，例如微信，釘釘等app。
圖：Smartbi集成使用效果
三、可視化拖拽編輯器——VvvebJs
VvvebJs是一個開源的網頁拖拽自動生成的JavaScript庫，你可以以簡單拖拽的方式生成自己需要的網頁樣式，內置jquery和Bootstrap，你可以拖拽相關的組件進行網頁的構建，非常的方便，而且可以實時修改代碼，功能豐富，使用簡單，界面友好，特別適合一些專注于展示的網頁設計。
四、可視化拖拽編輯器——UEditor
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼。特別要說的是，頭條號后臺發布文章的編輯器就是用的UEditor!
五、可視化拖拽編輯器——Elegant Builder
在Elegant Themes Builder是一個插件，它為方便您編輯頁面上的內容提供了一些不可思議的工具。該插件基于一個可視化的的畫布，您可以添加，排列你的頁面上的大量內容。當你新建一篇文章或頁面時此插件顯示在正常的文本編輯器下方。該插件允許您快速創建列，滑塊，標簽，按鈕，切換，箱子等等。
以上就是我為大家關于各種可視化拖拽編輯器的推薦。希望對準備入門的新手有所幫助，能夠選擇合適自己的可視化編輯器。現在備受市場認可的軟件其實有很多，選擇時必須要結合實際的情況。一般的情況下，選擇市面上口碑較好的軟件，可能比較不會踩到雷。據我所知，國內數據可視化產品口碑較好的就是Smartbi了。簡單方便易上手，可以去試試。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
