百度UEditor基本使用


1 首先奉上鏈接其http://ueditor.baidu.com/website/index.html 更多更詳細內容在其官方api上,本文只是一個歸類總結性文章。

2 下載鏈接http://ueditor.baidu.com/website/download.html  本人是.net開發人員就直接下載了最新的.net版本,可以直接把下載好的代碼直接放到項目中(需要注意的是,它里面有后代ashx代碼,需要添加其中bin目錄下的Json.net)。

3 看demo.html

首先導入導入三個配置文件

<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>//此處注意順序不能變

在代碼中創建一個編輯器容器 此容器為一個 <script id="container" name="content" type="text/plain" style="width:1024px;height:500px;"> </script>//建議設置樣式,

這個script標簽就是ueditor的容器我們內容就是在這里面顯示的

再創建一個script標簽寫js代碼 

初始化ueditor的代碼為  var ue = UE.getEditor('editor');此出單引號里面的為編輯器容器id 保存刷新頁面就可以看到最簡單的editor的demo了。

4 介紹一下Editor的常用方法

本人喜歡無論獲取對象用工廠模式 

var editor = UE.getEditor('lxt');
function GetEditor() {
if (editor==null||editor==undefined) {
editor = UE.getEditor('lxt');
}
return editor;
}//以后獲取ediotr 對象直接用GetEditor方法就行了。

1)獲取編輯器里面的內容(html代碼): GetEditor().getContent();

2)設置編輯器里面的內容(支持html代碼): GetEditor().setContent("李嘯天", boolean是否追加);

3)獲取編輯器里面的純文本: GetEditor().getContentTxt();

4)獲取編輯器帶格式的純文本(也就是包含一些<img>等標簽的文本,但是不包含文本的格式,上一個方法不包含<ima>等標簽): GetEditro()..getPlainTxt();

5)判斷編輯器是否有內容返回true或者false GetEditor().hasContents();

6)使編輯器獲取焦點:  GetEditor().focus();

7)判斷編輯器是否獲取焦點 :GetEditor().isFocus();

8)使編輯器失去焦點:GetEditor().blur();

9)獲取編輯器選中的文本:可以封裝為一個方法,具體代碼的意思可以看一下百度api鏈接為 http://ueditor.baidu.com/doc/#UE.dom.Range:select()

function getText() {
//當你點擊按鈕時編輯區域已經失去了焦點,如果直接用getText將不會得到內容,所以要在選回來,然后取得內容
var range = UE.getEditor('editor').selection.getRange();
range.select();
var txt = UE.getEditor('editor').selection.getText();
alert(txt)
}

10)使編輯器不可編輯:GetEditor().setDisabled();里面可以設置參數string或者Array[string]設置除此之外為disable,各個按鈕代表的英文在http://fex.baidu.com/ueditor/#start-toolbar

11)是編輯器可以編輯:GetEditor().setEnabled(); 

12)顯示隱藏編輯器方法為:setShow(), setHide()

13)設置編輯器高度:setHeight(Number heigth);

5 定制工具欄圖標

 1). 方法一:修改 ueditor.config.js 里面的 toolbars 2). 方法二:實例化編輯器的時候傳入 toolbars 參數

6上傳功能

 1)首先需要在ueditor.config.js里制定處理上傳的handler.ashx,下載的demo中叫做controller.ashx 開發者可以隨意更換其位置,本人習慣把它放在根目錄或者handler文件夾下,如果在根目錄下,就把地址改為serverUrl: "/controller.ashx",另外提一下配置文件中獲取的url就是配置文件所在的路徑如http://localhost:4761/utf8-net/

2)把config.json文件放在項目根目錄下,也可以在Config.cs進行設置進行

3)修改config.json里面的路徑以及需要修改的配置,里面寫的很詳細 如imageUrlPrefix為圖片訪問路徑前綴一般為空就可以了,imagePathFormat上傳保存路徑,可以根據其提示進行各種設置。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM