今天介紹的一款百度出品的富文本編輯器UEditor!體積小、功能強(qiáng)大、安全可靠。UEditor已經(jīng)應(yīng)用到百度百科、百度經(jīng)驗(yàn)、百度空間等多個(gè)項(xiàng)目。下面就介紹一下UEditor編輯器的配置方法。
1.下載ueditor編輯器
最新版下載地址:http://autodetailinggreeley.com/2011/9-28/baidu-UEditor.html
解壓后目錄結(jié)構(gòu)如下:
* _examples:直接打開index.html即可看到效果(注:請(qǐng)將項(xiàng)目部署到服務(wù)器上,避免對(duì)話框圖片無(wú)法加載等跨域問(wèn)題)
* demo:一些常用的示例和實(shí)現(xiàn)方式
* _src:所有源碼,部署時(shí)可刪除,二次開發(fā)時(shí)可使用
* dialogs:彈出對(duì)話框所引用的頁(yè)面
* themes:樣式和圖片
* editor_ui_all.js:包含全部功能的js文件
* editor_ui_all_min.js:包含全部功能的壓縮文件,即editor_ui_all.js的壓縮版
* editor_config.js:編輯器的配置文件,這個(gè)腳本需要在其他腳本之前引用
2.部署編輯器到您的網(wǎng)站程序目錄里,例如:http://您的域名/ueditor
3.修改HTML頁(yè)面
A. 在需要顯示編輯器的位置準(zhǔn)備一個(gè)容器,容器可以是textarea或者div。
//id可以自己修改,在創(chuàng)建編輯器的時(shí)候?qū)⑦@個(gè)id傳入即可
//div作為容器的示例
<div id="editor"></div>
//textarea作為容器的示例
<textarea id="editor">
這里可以放編輯器初始化的內(nèi)容,創(chuàng)建編輯器時(shí),
我們會(huì)將內(nèi)容放到編輯器的編輯區(qū)域里
</textarea>
//兩種創(chuàng)建編輯器的區(qū)別是:
//div不可以在標(biāo)簽里設(shè)置初始值,在創(chuàng)建編輯器的時(shí)候配置initialContent參數(shù)
//textarea可以在標(biāo)簽里設(shè)置初始值,不能配置initialContent參數(shù)
B. 在該HTML頁(yè)面添加以下腳本
//先引入配置文件(可以修改編輯器的高度,初始化內(nèi)容等參數(shù))
<script type="text/javascript" src="/editor_config.js"></script>
//包含全部功能的js文件
<script type="text/javascript" src="/editor_ui_all.js"></script>
//編輯器的默認(rèn)樣式
<link type="text/css" href="/themes/default/ueditor.css"/>
//創(chuàng)建編輯器
<script type="text/javascript" charset="utf-8">
var editor = new baidu.editor.ui.Editor();
editor.render('editor'); //editor為編輯器容器的id
</script>