碼上快樂

相關內容    簡體    繁體

HTML編輯器UEditor的簡單使用

本文轉載自   查看原文   2013-11-14 13:39   2871    js

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

 

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

 

1.首先是UEditor的文檔結構

 

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

_src：JS文件

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

lang：語言包文件

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

themes：樣式圖片和樣式文件

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>


免責聲明！

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



猜您在找 ueditor在線編輯器的簡單使用-上傳圖片 js插件---->ueditor編輯器的使用 超簡單的DEDECMS整合百度編輯器（Ueditor）使用教程 Nodejs之編輯器ueditor vue中使用富文本編輯器ueditor .Net Core 使用百度UEditor編輯器 網頁開發中文本編輯器UEditor的使用 在VUE中使用富文本編輯器ueditor MVC 使用 Ueditor富文本編輯器 vim 編輯器簡單使用總結
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM