SNF快速開發平臺MVC-EasyUI3.9之-ueditor富文本編輯在 asp.net MVC下使用步驟

時間 2019-12-20

標籤 snf 快速開發平臺 mvc easyui3.9 easyui ueditor 文本編輯 asp.net asp 使用步驟欄目 ASP 简体版

原文原文鏈接

mvc項目中用到了這個富文本編輯就試着把遇到的問題個使用步驟在這裏記錄一下，但願你們少走彎路。javascript

1.首先咱們先下載net版本的uediothtml

2.而後把整個文檔拷貝到咱們的項目中，記得是整個前端

把下載的文件改爲ueditor名稱，添加到Content文件夾裏面java

在ueditor文件夾下面的net文件夾建立一個upload文件夾裝上傳的圖片web

四、找到net文件夾裏面的config.json文件，在找到全部的 /* 圖片訪問路徑前綴 */ 而後在前面的途徑加上：/Content/jsspring

其它配置圖片訪問路徑前綴，以此類推，由於咱們把ueditor文件夾放在了Content/js文件夾下面數據庫

5.就是要在你的html頁面寫Ueditor就能夠了。json

<script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/lang/zh-cn/zh-cn.js"></script>

//實例化編輯器
//建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
var ue = UE.getEditor('editor');
</script>安全

取值、賦值：

<script type="text/javascript">      
           var viewModel =function(data){
                var self = this;
                snf.viewModel.admin.edit.apply(this, arguments);      
                //保存前取值
                this.BeforeSave = function(){
                    self.form.Description(UE.getEditor('editor').getContent());
                };
                $(function () {
                    window.onload = function () { 
                        //加載數據
                        UE.getEditor('editor').setContent(self.form.Description(), false);
                    }
                });

            }

若是感受加載速度慢的話，能夠按以下方法進行加載：直接在頁面加載後進行加載富文本控件和初始化

       <script type="text/javascript">      
           var viewModel =function(data){
                var self = this;
                snf.viewModel.admin.edit.apply(this, arguments);      
                //保存前取值
                this.BeforeSave = function(){
                    self.form.Description(UE.getEditor('editor').getContent());
                };
                $(function () {
                    window.onload = function () { 
                        //實例化編輯器
                        //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
                        var ue = UE.getEditor('editor', {
                            toolbars: [
                                ['fullscreen', 'source', 'undo', 'redo', 'bold']
                            ],
                            zIndex: 10 //處理被遮擋問題
                        });

                        //加載數據
                        UE.getEditor('editor').setContent(self.form.Description(), false);
                    }
                });

            }
            using(['combobox','datebox','datetimebox','numberbox'],easyuifix.datagrid_editor_extend);
            var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));           
            ko.bindingViewModel(new viewModel(data));
          
        </script>

生成會報錯，在ueditor裏面net文件的bin裏面的Newtonsoft.Json沒法拷貝到當前項目裏面的bin目錄裏面，那是由於ueditor的net文件裏面的Newtonsoft.Json的版本要高於項目裏面的版本，把項目裏面的Newtonsoft.Json引用刪除掉，在引用ueditor裏面net文件的bin裏面的Newtonsoft.Json的dll文件第八步：在Web.config裏面找到 <runtime>節點在它下面的<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">節點裏面添加

</dependentAssembly>如上節點，就能夠解決 Newtonsoft.Json沒法引用的問題以上步驟都做完成，就能夠實現富文本而且能夠上傳圖片了！

下面的處理，不是何時都出現的，若是出現進行參考

[HttpPost]

[ValidateInput(false)]

public ActionResult Index(FormCollection fc)

{

var content = fc["editor"];

return View();

} 注意： [ValidateInput(false)]這是解決一直報安全問題的辦法

注意： [ValidateInput(false)]這是解決一直報安全問題的辦法
在ueditor裏面net文件的bin裏面的Newtonsoft.Json沒法拷貝到當前項目裏面的bin目錄裏面，那是由於ueditor的net文件裏面的Newtonsoft.Json的版本要高於項目裏面的版本，把項目裏面的Newtonsoft.Json引用刪除掉，在引用ueditor裏面net文件的bin裏面的Newtonsoft.Json的dll文件
在web.config的配置，要添加Newtonsoft.Json的配置

做者： 王金斗
出處： http://www.cnblogs.com/spring_wang/
Email: spring_best@yeah.net
QQ：903639067 
QQ羣：322581894

這個系列教程文檔，歡迎轉載：

SNF快速開發平臺WinForm-CS甘特圖 http://www.cnblogs.com/spring_wang/p/7418423.html

SNF快速開發平臺MVC-審覈流，審覈完成後會給下一個審覈人發郵件，下一個審覈人能夠不登陸系統，在郵件裏進行審覈處理 http://www.cnblogs.com/spring_wang/p/7418402.html

SNF快速開發平臺MVC-名片管理(實際名片樣式) http://www.cnblogs.com/spring_wang/p/7416540.html

SNF快速開發平臺MVC-表格單元格合併組件 http://www.cnblogs.com/spring_wang/p/7416368.html

SNF快速開發平臺MVC-單據狀態水印 http://www.cnblogs.com/spring_wang/p/7416349.html

SNF快速開發平臺MVC-瀑布式分頁組件 http://www.cnblogs.com/spring_wang/p/7411116.html

SNF快速開發平臺MVC-高級查詢組件 http://www.cnblogs.com/spring_wang/p/7411113.html

SNF快速開發平臺MVC-自由排序組件 http://www.cnblogs.com/spring_wang/p/7411090.html

SNF快速開發平臺MVC-各類級聯綁定方式，演示樣例程序（包含表單和表格控件）http://www.cnblogs.com/spring_wang/p/7405371.html

SNF快速開發平臺MVC-集成了百度開源項目echars http://www.cnblogs.com/spring_wang/p/7405171.html

SNF快速開發平臺WinForm-平板拍照及掃描二維碼功能 http://www.cnblogs.com/spring_wang/p/7404600.html

SNF快速開發平臺WinForm規則引擎總體介紹及使用http://www.cnblogs.com/spring_wang/p/7404182.html

SNF快速開發平臺WinForm-Grid表格控件大全 http://www.cnblogs.com/spring_wang/p/7403881.html

SNF快速開發平臺WinForm-表單驗證控件-通用 http://www.cnblogs.com/spring_wang/p/7403750.html

SNF.CodeGenerator-升級生成BS頁面代碼-支持視圖-數據庫配置-快速開發者的利器 http://www.cnblogs.com/spring_wang/p/7402612.html

SNF快速開發平臺WinForm-審覈流使用方法樣例 http://www.cnblogs.com/spring_wang/p/7374176.html

SNF快速開發平臺WinForm-EasyQuery統計分析-效果-很是牛逼的報表查詢工具 http://www.cnblogs.com/spring_wang/p/7366059.html

SNF快速開發平臺MVC-Grid++集成打印 http://www.cnblogs.com/spring_wang/p/7365567.html

SNF快速開發平臺MVC-富文本控件集成了百度開源項目editor http://www.cnblogs.com/spring_wang/p/7365265.html

C#按回車Enter使輸入焦點自動跳到下一個TextBox的方法收集 http://www.cnblogs.com/spring_wang/p/7216538.html

關於系統前端開發的那些事 http://www.cnblogs.com/spring_wang/p/7092721.html

WebApi和MVC-controller層接收的json字符串的取值方法和調用後臺服務方法 http://www.cnblogs.com/spring_wang/p/6740314.html

SNF快速開發平臺--規則引擎在程序當中如何調用 http://www.cnblogs.com/spring_wang/p/6740490.html

SNF快速開發平臺--規則引擎介紹和使用文檔 http://www.cnblogs.com/spring_wang/p/6740445.html

SNF快速開發平臺MVC-EasyUI3.9之-DataGrid表格控件如何增長右鍵菜單 http://www.cnblogs.com/spring_wang/p/6740338.html

SNF快速開發平臺--多組織+多平臺+多系統處理方案 http://www.cnblogs.com/spring_wang/p/6734654.html

SNF快速開發平臺MVC-EasyUI3.9之-Session過時處理和頁面請求篩選 http://www.cnblogs.com/spring_wang/p/6733975.html

SNF快速開發平臺MVC-EasyUI3.9之-WebApi身份驗證問題解決方案 http://www.cnblogs.com/spring_wang/p/6733814.html

SNF快速開發平臺MVC-EasyUI3.9之-WebApi跨域處理方案 http://www.cnblogs.com/spring_wang/p/6733659.html

SNF快速開發平臺MVC-EasyUI3.9之-ueditor富文本編輯在 asp.net MVC下使用步驟 http://www.cnblogs.com/spring_wang/p/6710351.html

SNF開發平臺WinForm之十五-時間軸控件使用-http://www.cnblogs.com/spring_wang/p/6285393.html

SNF開發平臺WinForm之十四-站內發送系統信息http://www.cnblogs.com/spring_wang/p/6140031.html

SNF開發平臺WinForm之十三-單獨從服務器上獲取PDF文件進行顯示 http://www.cnblogs.com/spring_wang/p/6140025.html

SNF開發平臺WinForm之十二-發送手機短信功能調用 http://www.cnblogs.com/spring_wang/p/6139829.html

SNF開發平臺WinForm之十一-程序打包 http://www.cnblogs.com/spring_wang/p/6139827.html

SNF開發平臺WinForm之十-Excel導入 http://www.cnblogs.com/spring_wang/p/6128604.html

SNF開發平臺WinForm之九-代碼生成器使用說明 http://www.cnblogs.com/spring_wang/p/6128595.html

SNF開發平臺WinForm之八-自動升級程序部署使用說明 http://www.cnblogs.com/spring_wang/p/6128570.html

SNF開發平臺WinForm之七-單據打印和使用說明 http://www.cnblogs.com/spring_wang/p/6126016.html

SNF開發平臺WinForm之六-上傳下載組件使用http://www.cnblogs.com/spring_wang/p/6125929.html

SNF開發平臺WinForm之五-高級查詢使用說明-http://www.cnblogs.com/spring_wang/p/6116640.html

SNF開發平臺WinForm之四-開發-主細表管理頁面-http://www.cnblogs.com/spring_wang/p/6116626.html

SNF開發平臺WinForm之三-開發-單表選擇控件建立-http://www.cnblogs.com/spring_wang/p/6116592.html

SNF開發平臺WinForm之二-開發-單表表單管理頁面-http://www.cnblogs.com/spring_wang/p/6116572.html

SNF開發平臺WinForm之一-開發-單表表格編輯管理頁面-http://www.cnblogs.com/spring_wang/p/6116523.html

Winform開發框架之通用Windows攝像頭調用拍照 http://www.cnblogs.com/spring_wang/p/6008674.html

Winform開發框架之圖表報表在線設計器2-圖表-SNF.EasyQuery項目--SNF快速開發平臺3.3-Spring.Net.Framework

Winform開發框架之圖表報表在線設計器-報表-SNF.EasyQuery項目--SNF快速開發平臺3.3-Spring.Net.Framework

Winform開發框架之通用附件管理模塊 --SNF快速開發平臺3.3-Spring.Net.Framework

SNFAutoupdater通用自動升級組件V2.0-WinForm

SNF快速開發平臺3.2之--.Net可擴展的單據編號生成器-SNF.CodeRule

SNF快速開發平臺3.1之--審覈流(3)低調奢華，簡單不凡，實例演示-SNF.WorkFlow

SNF快速開發平臺3.1之--審覈流(2)流程設計-SNF.WorkFlow功能使用說明

SNF快速開發平臺3.1之--審覈流(1)SNF.WorkFlow審覈流簡介

SNF快速開發平臺3.0之--完美的代碼生成器SNF.CodeGenerator-快速開發者的利器

基於MVC4+EasyUI的Web開發框架--Spring.Net.FrameworkV3.0整體介紹

SNF快速開發平臺3.0之--MVC 打印解決方案

SNF快速開發平臺3.0之--文件批量上傳-統一附件管理器-在線預覽文件(有互聯網和沒有兩種)

SNF快速開發平臺3.0之--asp.net mvc4 強大的導出和不須要上傳文件的批量導入EXCEL

SNF快速開發平臺3.0之MVC通用控件庫展現-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF快速開發平臺3.0之BS頁面展現和九大優勢-部分頁面顯示效果-Asp.net+MVC4.0+WebAPI+EasyUI +Knockout

SNF快速開發平臺3.0之-界面個性化配置+10種皮膚+7種菜單-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF快速開發平臺3.0之-CS頁面-Asp.net+Spring.Net.Framework

SNF快速開發平臺3.0之--系統裏廣播的做用--迅速及時、簡明扼要的把信息發送給接收者

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。