2. 程式人生 > >HTML編輯器UEditor的簡單使用

HTML編輯器UEditor的簡單使用

阿新 • • 發佈：2018-12-23

關於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註釋掉了所有可以省略的配置項，採用系統預設配置，若取消註釋，則以該配置項為準；未註釋的配置項要求使用者必需按照專案實際填寫。

以下是自己定義的一個簡單配置：

  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>

其中最重要的配置是第28行關於URL引數的配置，關係到圖片上傳，處理等路徑，需要配置為uediotr在網站的相對路徑或者絕對路徑。如我的專案名稱為t，根目錄為www，則URL的值設定如下：

  1. URL = window.UEDITOR_HOME_URL||"/t/UEditor/";  

3.引入配置檔案，JS檔案和主題CSS檔案
  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">

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

  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>

5.設定選項並且渲染編輯器

如果需要有不同設定的ueditor，可以分別定義之後設定不同的自定義選項再渲染編輯器，

  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>

6.前後臺數據互動

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

以下為完整的渲染2個ueditor的程式碼

  1. 相關推薦

    HTML編輯器UEditor的簡單使用

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

    淺用HTML編輯器ueditor

    UEditor是由百度web前端研發部開發的web編輯器，一個學長推薦我去看一下，的確很好用。 先上官網看一下，有好多版本。Ubuilder是比較精簡的一個版本，我要把 編輯器運用到專案中，所以選用了開發版的。 把下載的壓縮包開啟，裡面就有demo。 在根目錄下有兩個js

    百度編輯器UEditor源碼模式下過濾div/style等html標簽

    規則 開頭 lte 標簽 定位 ads 兩種 適用於 tlist UEditor在html代碼模式下，當輸入帶有<div style="">、<iframe>這類帶有html標簽的內容時，切換為編輯器模式後，會發現輸入的內容被刪除，自動過濾掉了。提供

    百度UEditor編輯器的簡單使用方法

    百度UEditor編輯器的官方下載地址： ueditor 官方地址：http://ueditor.baidu.com/website/index.html 開發文件地址：http://ueditor.baidu.com/website/document.html 下載地址：

    純html如何引用百度的富文字編輯器ueditor

          最近專案遇到了純html頁面使用富文字編輯器的需要，思來想去還是百度的富文字功能最豐富，但是ueditor只提供了jsp的demo，參照jsp頁面可以直接用java實現jsp頁面的功能，從而解決html頁面引用ueditor問題。第一步： 把ueditor 檔案引

    百度富文字編輯器UEditor使用簡單示例

    HTML程式碼： <form id="f_edit" method="post"> <input name="id" type="hidden" value="${activit

    xheditor HTML編輯器簡單使用

    2. 解壓zip檔案，將其中的xheditor.js以及xheditor_emot和xheditor_skin兩個資料夾上傳到網站相應目錄 3. 在相應html檔案的head標籤結束之前新增 <scripttype="text/javascript"src="htt

    關於富文字編輯器ueditor（jsp版）上傳檔案到阿里雲OSS的簡單例項，適合新手

           本人菜鳥一枚，最近公司有需求要用到富文字編輯器，我選擇的是百度的ueditor富文字編輯器，閒話不多說，進入正題：一：ueditor的下載及安裝以及OSS的下載及引入我就不詳細說了，這裡說下要注意的幾點：        1，ueditor下載地址:點選開啟連結

    用Ueditor為Asp.net mvc打造視覺化HTML編輯器

    在Asp.net WebForm時代，Web系統的HTML視覺化編輯器可以使用FTB一類的控制元件，直接引入工具箱拖拉即可實現。但是在Asp.net MVC時代，直接使用伺服器端控制元件是不符合MVC

    第三講 html編輯器及body詳解

    原則 eight enter 一個 width html標記 ctr script mysq 最好的學習方法：學思路 1.制作網頁的方法: 新建記事本或者用“editplus編輯器”. edi

    百度富文本編輯器ueditor使用總結

    min 操作 如果 toolbar host 配置文檔 ted 文件 cti 最近做的項目用到了ueditor這個東東，但是他的一些配置文檔對初次使用者來說很難以理解，故作此總結 1.ueditor 官方地址：http://ueditor.baidu.com/websi

    UE編輯器的簡單配置

    edi fonts 文件 元素 ron fontsize 解壓 height auto UE編輯器的簡單使用和配置 1.下載解壓UEditor編輯器，並在項目中引入JS文件， 2.實例化編輯器 3.基本配置（ueditor.config.js） ,fullscreen

    atitit.html編輯器的設計要點與框架選型 attilax總結

    編輯功能 att 瀏覽器 lan 粘貼 edit 編輯 -m 上傳 atitit.html編輯器的設計要點與框架選型 attilax總結 1. html編輯器的設計要求1 1.1. 障礙訪問 1 1.2. 強大Ajax上傳 1 1.3. Word完美

    百度編輯器-Ueditor

    域名 換工作 目錄 as3 表單 內部 domain 增加 sun 作者：Lionden Lionden‘s Lion Den. 又一編輯神器-百度編輯器-Ueditor （Lionden<[email protecte

    富文本編輯器UEditor的配置使用方法

    效果 es2017 如果 配置使用 cnblogs 是我 nta asc utf-8 將下載的富文本編輯器的文件解壓後放到 webcontent 下 如果 文件中的jsp文件夾下的controller.java文件報錯的話 就將jsp下的lib文件夾中的文件都復制到

    百度編輯器UEditor 點擊上傳圖片選擇框會延遲幾秒才會顯示 反應很慢(轉)

    php 編輯 ued 效果 all edit www. 上傳 min 轉自：http://www.blogxuan.com/php/show/323.html UEditor 編輯器點擊上傳文件選擇框會延遲幾秒才會顯示，反應很慢，上傳圖片選擇框顯示很慢。 1、uedit

    vue 中 使用百度編輯器 UEditor

    oat his ole text 觸發 pan ont lec 通過 已有前輩整理，記錄URL: http://www.cnblogs.com/ocean-sky/p/7132319.html http://blog.csdn.net/psd_html/article

    第二課時之HTML 編輯器

    編輯器 簡單的 擴展名 html mac div 附件 bsp 根據 使用 Notepad來編寫 HTML 可以使用專業的 HTML 編輯器來編輯 HTML： 不過，我們同時推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)

    百度編輯器ueditor插件的基本使用

    tpframe thinkphp5 php 註意：該插件是基於tpframe開發，請在tpframe框架上使用 插件下載地址：https://pan.baidu.com/s/1MOJbd1goQC0Bn5-7HcIdKA 插件下載下來後解壓到addon插件目錄，然後進入後臺進行安裝即可 Uedi

    Linux系統Vi/Vim編輯器的簡單介紹、安裝/卸載、常用命令

    菜鳥 3.3 移動 左移 str file 所在 最後一行 簡單 Linux系統Vi/Vim編輯器的簡單介紹、安裝/卸載、常用命令 1、介紹 vi（Visual Interface）編輯器是Linux和Unix上最基本的文本編輯器，工作在字符模式下。由於不需要圖形界面，