百度開源UEditor文本編輯器使用說明自定義屬性

 自定義:把jsp中  /* var newsContent_editor = UE.getEditor('newsContent');*/
 替換成下面
var newsContent_editor = UE.getEditor('newsContent',{
                              initialFrameWidth:800,
                              initialFrameHeight:600,
         toolbars:[['formatmatch','removeformat','underline','italic','bold','redo','undo','source','fullscreen','autotypeset','pastePlain',
   'forecolor','backcolor','selectall','rowspacingtop','rowspacingbottom','lineheight','bold','italic','insertimage',
   'fontsize','fontfamily','paragraph','indent','justifyleft','justifyright ','justifycenter','justifyjustify',
'link','insertvideo','music','attachment','background','date','time','inserttable','deletetable','preview','help','searchreplace']]});

 

 

百度開源UEditor文本編輯器使用說明:
一、完整版的部署與體驗
官網上下載完整源碼包(官網下載地址http://ueditor.baidu.com/website/download.html),解壓到任意目錄,解壓後的源碼目錄結構如下所示:
    _examples:編輯器完整版的示例頁面
    dialogs:彈出對話框對應的資源和JS文件
    themes:樣式圖片和樣式文件
    php/jsp/.net:涉及到服務器端操作的後臺文件,根據你選擇的不同後臺版本,這裏也會不同,這裏應該是jsp,php,.net
    third-party:第三方插件(包括代碼高亮,源碼編輯等組件)
    editor_all.js:_src目錄下所有文件的打包文件
    editor_all_min.js:editor_all.js文件的壓縮版,建議在正式部署時才採用
    editor_config.js:編輯器的配置文件,建議和編輯器實例化頁面置於同一目錄
    
    二、部署UEditor到實際項目(UETest)中的步驟:
    1、在myeclipse或者eclipse中新建web項目(這裏新建項目名稱爲UETest)。然後在WebRoot新建一個文件夾(文件名稱隨便起,這裏我自己取名爲ueditor1.2.6)。
   
    2、拷貝源碼包中的dialogs、lang、themes、third-party、editor_all.js或者ueditor.all.min.js和editor_config.js到ueditor1.2.6文夾中。其中除了ueditor1.2.6目錄之外的其餘文件均爲具體項目文件。


3-1、將需要文本編輯器的頁面(以下爲jsp)引入ueditor.config.js,ueditor.all.min.js或ueditor.all.js,後面兩個js文件的區別是前者是壓縮文件,
後者是沒有壓縮的文件。兩個文件的內容是一樣的(注意首先引入ueditor.config.js然後在引入ueditor.all.min.js或ueditor.all.js,否則特定情況下可能會出現報錯)。




例如:
<script type="text/javascript" src="ueditor1.2.6/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor1.2.6/ueditor.all.min.js"></script>或
<script type="text/javascript" src="ueditor1.2.6/ueditor.all.js"></script>
3-2、在頁面<body>裏增加以下代碼:
  <textarea name="後臺取值的key" id="myEditor"></textarea>
    <script type="text/javascript">
    var editor = new UE.ui.Editor();
    //editor.render("myEditor");
    //1.2.4以後可以使用一下代碼實例化編輯器
    UE.getEditor('myEditor');
</script>
4、修改editor_config.js文件中 var URL = window.UEDITOR_HOME_URL ||"/UETest/ueditor1.2.6/";,
兩個豎框中的文件路徑。{"/UETest/ueditor1.2.6/"路徑爲工程名+文件夾的名稱。(包括1.2.6及其以上的版本可以忽略此步驟)}




5、至此,一個完整的編輯器實例就已經部署到咱們的項目中了!啓動tomcat或者其他web服務器。在瀏覽器中輸入http://localhost:8080/UETest 運行下試試UEditor強大的功能吧!




 三、ueditor.config.js文件配置詳解
1、修改editor_config.js文件中的工具欄按鈕精簡配置詳細查看API中的Commands.




2、補充2,toolbars工具欄按鈕詳解(括號前面是網頁上顯示的名稱,括號裏面是功能的詳細介紹):
fullscreen 全屏(全屏切換事件(插件))
source HTML按鈕(切換源碼編輯模式和富文本編輯模式)
undo 撤銷(撤銷操作)
redo 重做(重做操作)
bold 爲當前選中文字添加粗體效果
italic 爲當前選中文字添加斜體效果
underline 爲當前選中文字添加下劃線效果
fontborder 字符邊框
strikethrough 刪除線(爲當前選中文字添加刪除線效果)
superscript 上標(將當前選中文字轉換成上標)
subscript 下標(將當前選中文字轉換成下標)
removeformat 清除格式(清除當前選中文字上的所有樣式或者指定樣式)
formatmatch 格式刷(開啓格式刷功能)
autotypeset 自動排版
blockquote 引用(爲當前選區所在的塊級元素添加引用標記)
pastePlain 純文本粘貼模式(切換純文本粘貼模式)
forecolor 字體顏色(爲當前選中文字添加顏色)
backcolor 背景色(爲當前選中文字添加背景顏色)
insertorderedlist 有序列表(將當前選區變換成有序列表)
insertunorderedlist 無序列表(將當前選區變換成無序列表)
selectall 全選(全部選擇)
cleardoc 清空文檔(清空當前文檔)
rowspacingtop 段前距(段前距)
rowspacingbottom 段後距(段後距)
lineheight 行間距(行間距 )
customstyle 自定義標題(自定義標題)
paragraph 段落格式(段落格式)
fontfamily 字體(設置當前選中文字的字體)
fontsize 字號(設置當前選中文字的字號)
directionalityltr 從左向右輸入(從左向右輸入)
directionalityrtl 從右向左輸入(從右向左輸入)
indent 首行縮進(默認縮進4格)
justifyleft 居左對齊(設置當前選區中的字體居左對齊方式)
justifycenter 居中對齊(設置當前選區中的字體居中對齊方式)
justifyright 居右對齊(設置當前選區中的字體居右對齊方式)
justifyjustify 兩端對齊(設置當前選區中的字體兩端對齊方式)
touppercase 字母大寫(將當前選中文字中的字母轉換成大寫)
tolowercase 字母小寫(將當前選中文字中的字母轉換成小寫)
link 超鏈接(在當前選區位置插入一個超鏈接)
unlink 取消超鏈接(在當前選區位置取消一個超鏈接)
anchor 錨點(插入錨點)
imagenone 默認浮動(設置當前選區中的內容浮動)
imageleft 左浮動(設置當前選區中的內容左浮動)
imageright 右浮動(設置當前選區中的內容右浮動)
imagecenter 居中浮動(設置當前選區中的內容居中浮動)
insertimage 圖片(在當前選區位置插入一個圖片)
emotion 表情(在當前選區位置插入一個表情)
scrawl 塗鴉(圖片塗鴉)
insertvideo 視頻(插入一個連接視頻)
music 音樂(插入一個連接音樂)
attachment 附件(上傳附件)
map Baidu地圖(插入一個連接百度的地圖)
gmap Google地圖(插入一個連接Google的地圖)
insertframe 插入Iframe(插入一個Iframe框架)
insertcode 代碼語言(在當前選區位置插入一個代碼語言)
webapp 百度應用(插入一個百度應用本功能由百度APP提供,如看到此頁面,請各位站長首先申請百度APPKey!點此申請申請完成之後請至ueditor.config.js中配置獲得的appkey!)
pagebreak 分頁(在當前選區位置插入一個分頁符標記)
template 模板(在當前選區位置插入一個模板)
background 背景(給body添加背景顏色或顏色)
horizontal 分隔線(在當前選區位置插入一個分隔線)
date 日期(在當前選區位置插入一個日期)
time 時間(在當前選區位置插入一個時間)
spechars 特殊字符(當前選區位置插入一個特殊字符)
snapscreen 截圖(IE下進入截屏模式) 
wordimage 圖片轉存(圖片轉存)
inserttable 插入表格(插入表格)
deletetable 刪除表格(當前選區位置刪除表格)
insertparagraphbeforetable 表格前插入行(表格前插入一行)
insertrow 前插入行(表格前插入一行)
deleterow 刪除行(刪除表格的一行)
insertcol 前插入列(在當前選區表格位置前插入一列)
deletecol 刪除列(刪除表格的一列)
mergecells 合併多個單元格(當前選區表格位置合併多個單元格)
mergeright 右合併單元格(當前選區表格位置右合併單元格)
mergedown 下合併單元格(當前選區表格位置下合併單元格)
splittocells 完全拆分單元格(完全拆分單元格)
splittorows 拆分成行(拆分成行)
splittocols 拆分成列(拆分成列)
print 打印(打印當前文本域內容)
preview 預覽(預覽當前文本域內容)
searchreplace 查詢替換(查找替換)
help 幫助(UEditor文本編輯器關於和幫助)




3、其他修改主要是editor_config.js文件中的配置,請參照官網上的API文檔。地址是http://ueditor.baidu.com/doc/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章