HTML編輯器UEditor的簡單使用

時間  2019-11-18
標籤 html 編輯器 ueditor 簡單 使用 欄目 HTML 简体版
原文   原文鏈接

參考自：http://ueditor.baidu.com/website/document.htmljavascript

 

關於HTML編輯器，試過FCKeditor，升級版的CKeditor，還有TinyMCE，最近在嘗試使用百度的UEditor。對比一下仍是以爲UEditor的配置較簡單，上手快而且文檔和例子也很齊全。那麼這裏以UEditor1.2.3.0PHP版本UTF-8版爲例梳理一下UEditor的使用流程。php

 

1.首先是UEditor的文檔結構css

 

_examples：編輯器各類版本的示例頁面html

_src：JS文件java

dialogs：彈出對話框對應的資源和JS文件web

lang：語言包文件編輯器

PHP：文件上傳處理，遠程圖片抓取，圖片在線管理，屏幕截圖相關文件工具

themes：樣式圖片和樣式文件post

third-party：第三方插件測試

editor_all.js：_src目錄下全部文件的打包文件

editor_all_min.js：editor_all.js文件的壓縮版，能夠在正式部署時才採用

editor_config.js：編輯器的配置文件

 

2.系統配置

 

UEditor的配置能夠分爲系統默認配置和用戶自定義配置兩種類型。系統默認配置分散在各個對應的核心或者插件文件之中，對用戶不可見。當用戶註釋掉自定義配置時起做用。用戶自定義配置包括兩種類型，一種位於editor_config.js文件之中，優先級高於系統默認配置；另外一種位於實例化編輯器時傳入的參數中，優先級最高。默認狀況下，UEditor在editor_congfig.js註釋掉了全部能夠省略的配置項，採用系統默認配置，若取消註釋，則以該配置項爲準；未註釋的配置項要求用戶必需按照項目實際填寫。

如下是本身定義的一個簡單配置：

 

[html] view plain copy print ?
  1. <scripttype="text/javascript"> 
  2. // 自定義的編輯器配置項,此處定義的配置項將覆蓋editor_config.js中的同名配置 
  3. var editorOption = { 
  4. //這裏能夠選擇本身須要的工具按鈕名稱,此處僅選擇以下四個 
  5. toolbars:[['FullScreen', 'Source', 'Undo', 'Redo']] 
  6. ​ //更多其餘參數，請參考editor_config.js中的配置項 
  7. }; 
  8. </script>  
<script type="text/javascript">
// 自定義的編輯器配置項,此處定義的配置項將覆蓋editor_config.js中的同名配置
 var editorOption = {
 //這裏能夠選擇本身須要的工具按鈕名稱,此處僅選擇以下四個
 toolbars:[['FullScreen', 'Source', 'Undo', 'Redo']]
​ //更多其餘參數，請參考editor_config.js中的配置項
};
</script>

 

其中最重要的配置是第28行關於URL參數的配置，關係到圖片上傳，處理等路徑，須要配置爲uediotr在網站的相對路徑或者絕對路徑。如個人項目名稱爲t，根目錄爲www，則URL的值設置以下：

 

[html] view plain copy print ?
  1. URL = window.UEDITOR_HOME_URL||"/t/UEditor/";  
URL = window.UEDITOR_HOME_URL||"/t/UEditor/";

3.引入配置文件，JS文件和主題CSS文件

 

 

[html] view plain copy print ?
  1. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"> 
  2. <scripttype="text/javascript"src="UEditor/editor_config.js"></script> 
  3. <scripttype="text/javascript"src="UEditor/editor_all.js"></script> 
  4. <linkrel="stylesheet"href="UEditor/themes/default/ueditor.css">  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="UEditor/editor_config.js"></script>
<script type="text/javascript" src="UEditor/editor_all.js"></script>
<link rel="stylesheet" href="UEditor/themes/default/ueditor.css">

 

4.建立編輯器實例及其DOM容器

 

[html] view plain copy print ?
  1. <formaction=""method="post"name="myForm"> 
  2. <!--如下引入UEditor編輯器界面--> 
  3. <scripttype="text/plain"id="editor"name="myContent"></script> 
  4. //此處不設置name，則editor默認名字爲"editorValue"，能夠在 
  5. //editor_config.js中配置參數textarea，或者在此處設置 
  6. <inputtype="submit"name="submit"value="upload"/> 
  7. </form>  
<form action="" method="post" name="myForm">
<!--如下引入UEditor編輯器界面-->
<script type="text/plain" id="editor" name="myContent"></script>
 //此處不設置name，則editor默認名字爲"editorValue"，能夠在
//editor_config.js中配置參數textarea，或者在此處設置
<input type="submit" name="submit" value="upload"/>
</form>

 

 

5.設置選項而且渲染編輯器

若是須要有不一樣設置的ueditor，能夠分別定義以後設置不一樣的自定義選項再渲染編輯器，

 

[html] view plain copy print ?
  1. <scripttype="text/plain"id="myEditor"style="width:800px"></script> 
  2. <scripttype="text/plain"id="myEditor1"style="width:800px"><p>這裏我能夠寫一些輸入提示</p> 
  3. </script> 
  4. <scripttype="text/javascript"> 
  5. var editor_a = new baidu.editor.ui.Editor(); 
  6. editor_a.render( 'myEditor' ); //此處的參數值爲編輯器的id值 
  7. var editor_a1 = new baidu.editor.ui.Editor({ 
  8. //這裏能夠選擇本身須要的工具按鈕名稱,此處僅選擇以下五個 
  9. toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']] 
  10. //更多其餘參數，請參考editor_config.js中的配置項 
  11. }); 
  12. editor_a1.render( 'myEditor1' ); 
  13. </script>  
<script type="text/plain" id="myEditor" style="width:800px"></script>
<script type="text/plain" id="myEditor1" style="width:800px"><p>這裏我能夠寫一些輸入提示</p>
</script>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor();
editor_a.render( 'myEditor' ); //此處的參數值爲編輯器的id值
var editor_a1 = new baidu.editor.ui.Editor({
//這裏能夠選擇本身須要的工具按鈕名稱,此處僅選擇以下五個
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']]
//更多其餘參數，請參考editor_config.js中的配置項
});
editor_a1.render( 'myEditor1' );
</script>

 

6.先後臺數據交互

對於PHP能夠直接用$_POST['ueditorName']獲取編輯器的值，其中ueditorName的值爲初始化編輯器時ueditor的name值。

如下爲完整的渲染2個ueditor的代碼

 

[html] view plain copy print ?
  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"> 
  5. <title>UEditor</title> 
  6. <!--如下爲引入UEditor資源部分--> 
  7. <scripttype="text/javascript"src="UEditor/editor_config.js"></script> 
  8. <scripttype="text/javascript"src="UEditor/editor_all.js"></script> 
  9. <linkrel="stylesheet"href="UEditor/themes/default/ueditor.css"> 
  10. <!--以上爲引入UEditor資源部分--> 
  11. </head> 
  12. <body> 
  13. <formaction="test.php"method="post"name="myForm"> 
  14. <!--如下引入UEditor編輯器界面--> 
  15. <scripttype="text/plain"id="myEditor"name="myContent">這是一個測試仍是一個測試</script> 
  16. <inputtype="submit"name="submit"value="upload"/> 
  17. </form> 
  18. <scripttype="text/plain"id="myEditor1"><p>這裏我能夠寫一些輸入提示</p></script> 
  19. <scripttype="text/javascript"> 
  20.     var editor_a = new baidu.editor.ui.Editor(); 
  21.     editor_a.render( 'myEditor' ); //此處的參數值爲編輯器的id值 
  22.      
  23.     var editor_a1 = new baidu.editor.ui.Editor({ 
  24.     //這裏能夠選擇本身須要的工具按鈕名稱,此處僅選擇以下五個 
  25.     toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']], 
  26.     //focus時自動清空初始化時的內容 
  27.     autoClearinitialContent:true, 
  28.     //更多其餘參數，請參考editor_config.js中的配置項 
  29. }); 
  30.     editor_a1.render( 'myEditor1' ); 
  31. </script> 
  32. </body> 
  33. </html>  
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UEditor</title>
<!--如下爲引入UEditor資源部分-->
<script type="text/javascript" src="UEditor/editor_config.js"></script>
<script type="text/javascript" src="UEditor/editor_all.js"></script>
<link rel="stylesheet" href="UEditor/themes/default/ueditor.css">
<!--以上爲引入UEditor資源部分-->
</head>
<body>
<form action="test.php" method="post" name="myForm">
<!--如下引入UEditor編輯器界面-->
<script type="text/plain" id="myEditor" name="myContent">這是一個測試仍是一個測試</script>
<input type="submit" name="submit" value="upload"/>
</form>
<script type="text/plain" id="myEditor1"><p>這裏我能夠寫一些輸入提示</p></script>
<script type="text/javascript">
    var editor_a = new baidu.editor.ui.Editor();
    editor_a.render( 'myEditor' ); //此處的參數值爲編輯器的id值
    
    var editor_a1 = new baidu.editor.ui.Editor({
    //這裏能夠選擇本身須要的工具按鈕名稱,此處僅選擇以下五個
    toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']],
    //focus時自動清空初始化時的內容
    autoClearinitialContent:true,
    //更多其餘參數，請參考editor_config.js中的配置項
});
    editor_a1.render( 'myEditor1' );
</script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程