ASP.NET中整合百度編輯器UEditor

 　　本文給大家講解的是如何在ASP.NET中整合百度編輯器UEditor的方法和具體的步奏，十分的詳細，有需要的小夥伴可以參考下。

　　0.ueditor簡介

　　UEditor是由百度WEB前端研發部開發的所見即所得 (WYSIWYG)的開源富文字編輯器，具有輕量、可定製、使用者體驗優秀等特點。開源基於BSD協議，所有原始碼在協議允許範圍內可自由修改和使用。

　　UEditor官網：http://ueditor.baidu.com/website/index.html

　　UEditor官方文檔地址: http://fex.baidu.com/ueditor/

　　1.將ueditor包匯入項目

　　將從官網上下載的開發包解壓後包含到項目中

　　(注:最新的代碼需要時基於.NETFramework4以上)

　　解壓後目錄下檔案如下：

　　index.html 是一個樣本檔案、可以刪去，ueditor.config.js中是一些富文字編輯器的設定，建議不要改動，可以在頁面中引用的時候設定，如果所有頁面都需要設定可以寫在一個js檔案中，dialogs是在文字框中點擊按鈕時用到的一些彈出框效果，lang檔案夾下是語言相關的設定，目前只有中文與英文，themes檔案夾下是一些樣式，third-party檔案夾下是一些第三方的外掛程式，有代碼高亮，截屏等

　　我在我的項目中建立了一個ueditorHelper.js檔案，在檔案中定義了一些ueditor常用的方法，以及對於ueditor的一些設定

　　在net目錄下，我們只保留controller.ashx與config.json就可以了，同時把App_Code中的代碼拷貝到項目中的App_Code中，同時添加對bin目錄下Json.NET程式集的引用，config.json檔案定義了一些設定，配置上傳檔案的一些要求以及上傳到伺服器儲存的路徑，在web.config檔案中可以看到項目架構應至少為4.0

　　2.在頁面中添加js引用，在頁面中引用

　　添加zh-cn.js檔案是要設定語言，防止自動識別語言錯誤而導致語言適配錯誤，UEditorHelper.js檔案是一些常用的方法和編輯器設定的封裝，查看index.html的原始碼，在其中有一段js代碼

　　自訂的UEditorHelper.js檔案中使用到了一些方法，並對第一行代碼進行了修改，進行 ueditor富文字編輯器的設定

　　3.頁面初始化

　　在需要添加富文字編輯器的地方加入以下代碼：

　　

　　4.編輯內容時，頁面的載入(ajax載入內容)

　　因為富文字編輯器只是產生的一段html代碼，我們需要利用Ajax動態載入內容，相比CKEditor來說，這是比較麻煩的地方，使用CKEditor可以直接使用封裝好的伺服器端控制項，當然也可以不用伺服器端控制項利用Ajax動態載入內容。

　　首先在頁面載入時擷取到新聞的id，然後再進行ajax查詢，查詢新聞封裝在了一個handler中，向這個handler發起ajax請求，請求參數為新聞id，擷取新聞，擷取到之後，把新聞的內容設定給ueditor

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

//執行個體化編輯器 //建議使用Factory 方法getEditor建立和引用編輯器執行個體，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的執行個體 var ue = UE.getEditor('editor',{autoHeightEnabled: false}); function isFocus(e) { alert(UE.getEditor('editor').isFocus()); UE.dom.domUtils.preventDefault(e) } function setblur(e) { UE.getEditor('editor').blur(); UE.dom.domUtils.preventDefault(e) } function insertHtml() { var value = prompt('插入html代碼', ''); UE.getEditor('editor').execCommand('insertHtml', value) } function createEditor() { UE.getEditor('editor'); } function getAllHtml() { return UE.getEditor('editor').getAllHtml(); } function getContent() { return UE.getEditor('editor').getContent(); } function getPlainTxt() { return UE.getEditor('editor').getPlainTxt(); } function setContent(isAppendTo) { UE.getEditor('editor').setContent('', isAppendTo); } function getText() { //當你點擊按鈕時編輯地區已經失去了焦點，如果直接用getText將不會得到內容，所以要在選回來，然後取得內容 var range = UE.getEditor('editor').selection.getRange(); range.select(); return UE.getEditor('editor').selection.getText(); } function getContentTxt() { return UE.getEditor('editor').getContentTxt(); } function hasContent() { return UE.getEditor('editor').hasContents(); } function setFocus() { UE.getEditor('editor').focus(); } function deleteEditor() { UE.getEditor('editor').destroy(); } function getLocalData() { alert(UE.getEditor('editor').execCommand("getlocaldata")); } function clearLocalData() { UE.getEditor('editor').execCommand("clearlocaldata"); alert("已清空草稿箱") }

　　以上所述就是本文的全部內容了，希望大家能夠喜歡。