Ueditor專題

developerguy發表於2017-11-13

https://github.com/xwjie/SpringBootUeditor

 

提交表單
提交表單設定
按照部署編輯器的教程，完成編輯器載入

把容器放到form表單裡面，設定好要提交的路徑，如下面程式碼中的<form>標籤

<!DOCTYPE HTML>
<html lang=”en-US”>

<head>
<meta charset=”UTF-8″>
<title>ueditor demo</title>
</head>

<body>
<form action=”server.php” method=”post”>
<!– 載入編輯器的容器 –>
<script id=”container” name=”content” type=”text/plain”>
這裡寫你的初始化內容
</script>
</form>
<!– 配置檔案 –>
<script type=”text/javascript” src=”ueditor.config.js”></script>
<!– 編輯器原始碼檔案 –>
<script type=”text/javascript” src=”ueditor.all.js”></script>
<!– 例項化編輯器 –>
<script type=”text/javascript”>
var editor = UE.getEditor(`container`);
</script>
</body>

</html>
上一篇: 1.4 目錄介紹

 

 

UEditor

1.1 下載編輯器

git clone 倉庫
npm install 安裝依賴（如果沒有安裝 grunt , 請先在全域性安裝 grunt）
在終端執行 grunt default

$ npm install
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail o n node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible . Use `npm ls graceful-fs` to find it in the tree.
npm ERR! Windows_NT 10.0.15063
npm ERR! argv “C:\Program Files\nodejs\node.exe” “C:\Program Files\nodejs\ node_modules\npm\bin\npm-cli.js” “install”
npm ERR! node v7.2.1
npm ERR! npm v3.10.10

npm ERR! shasum check failed for C:UsersTANGCH~1AppDataLocalTemp
pm-32152- e4fed653
egistry.npmjs.orgunderscore.string-underscore.string-2.3.3.tgz
npm ERR! Expected: 71c08bf6b428b1133f37e78fa3a21c82f7329b0d
npm ERR! Actual: 8d82a2fa42b2b76e72f8bb55b36212e17d8d5eda
npm ERR! From: https://registry.npmjs.org/underscore.string/-/underscore.str ing-2.3.3.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR! C:githubeditorueditor
pm-debug.log

 

MINGW64 /c/github/editor/ueditor (dev-1.5.0)
$ npm update minimatch@3.0.2
$ npm update -d
檢視minimatch版本

$ npm -v minimatch
5.5.1

如果升級後依舊報錯。就需要重灌minimatch:

npm update minimatch
npm install -g npm@3

http://www.jb51.net/article/100594.htm

 

使用grunt打包原始碼
隨著 nodejs 和 grunt 的火爆，UEditor 採用了 grunt 來作為線下的合併打包工具，支援編碼和後臺語言指定。

支援版本
支援 UEditor 1.3.0+ 的版本

使用方法
線上下載ueditor
下載地址：ueditor，要下載”完整版 + 原始碼”
安裝nodejs

下載 nodejs 並安裝到本地
安裝成功後，開啟控制檯，在控制檯下輸入
node -v
如果控制檯輸出nodejs的版本。那恭喜你，nodejs安裝好了，可以使用ctrl+c退出node模式.
安裝打包需要的grunt外掛

以終端方式（windows使用者用cmd）進入ueditor原始碼根目錄，執行
npm install
這個命令會根據package.json檔案，安裝打包需要的grunt和grunt外掛
安裝結束後，會在ueditor目錄下出現一個node_modules資料夾
執行打包命令

以終端方式（windows使用者用cmd）進入ueditor原始碼根目錄，執行
grunt
這個命令會根據Gruntfile.js執行打包打包的任務，執行過程 需要java環境 支援
命令完成後，ueditor目錄下會出現dist/目錄，裡面有你要的打包好的ueditor資料夾，預設是utf8-php資料夾
打包其他版本
執行打包grunt命令時，可以傳入編碼和後臺語言的引數

支援兩種編碼指定：–encode引數
utf8 (預設編碼)
gbk
提供四種後臺語言支援：–server引數

php (預設語言)
jsp
net (代表.net後臺)
asp
例如:想要打包成編碼是gbk，後臺語言是asp版本，可執行命令:

grunt –encode=gbk –server=asp

http://fex.baidu.com/ueditor/#dev-bale_width_grunt

正確的初始化方式
UEditor為開發者提供了ready介面，他會在編輯器所有的初始化操作都結束時呼叫。保證你要做的操作能在一個完整的初始化環境中執行。

UE.getEditor(`editor`).ready(function() {
//this是當前建立的編輯器例項
this.setContent(`內容`)
}) UEditor的老使用者會說，不是還有個addListener可以註冊ready事件嗎？
UE.getEditor(`editor`).addListener(`ready`, function() {
//this是當前建立的編輯器例項
this.setContent(`內容`)
}) 確實這樣寫也能達到效果，但這樣建立有個小問題。如果的這段程式碼是用在第一次建立時就沒有問題。但如果編輯器已經建立，你需要再次賦值，想使用同一段程式碼，這時，這裡的事件ready是不會觸發的。但你呼叫介面ready注入你的操作，這種方式，會判斷如果你的編輯器已經初始化完成了，那ready將會自動載入注入的內容，如果還沒有初始化結束，它會自己註冊ready事件，當完成初始化後再掉起自己。所以建議開發者使用ready介面作為初始化時注入操作。

http://fex.baidu.com/ueditor/#qa-ready

 

 

 

 

如何自定義請求地址
本文件說明修改請求地址的方法。

應用場景
ueditor 1.4.2+ 推薦使用唯一的請求地址，通過GET引數action指定不同請求型別。 但很多使用者都希望使用自己寫好的上傳地址，下面提供一種解決方法： 由於所有ueditor請求都通過editor物件的getActionUrl方法獲取請求地址，可以直接通過複寫這個方法實現，例子如下：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == `uploadimage` || action == `uploadscrawl` || action == `uploadimage`) {
        return `http://a.b.com/upload.php`;
    } else if (action == `uploadvideo`) {
        return `http://a.b.com/video.php`;
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}

action型別以及說明
uploadimage：//執行上傳圖片或截圖的action名稱
uploadscrawl：//執行上傳塗鴉的action名稱
uploadvideo：//執行上傳視訊的action名稱
uploadfile：//controller裡,執行上傳視訊的action名稱
catchimage：//執行抓取遠端圖片的action名稱
listimage：//執行列出圖片的action名稱
listfile：//執行列出檔案的action名稱

http://fex.baidu.com/ueditor/#qa-customurl

如何阻止div標籤自動轉換為p標籤
背景
剛開始使用UEditor的開發者，會發現一個現象，貼上到編輯器中的內容如果帶有div標籤，待貼上到編輯器之後，會發現貼上到編輯器中的div已經被轉換為p標籤了。首先這不是一個bug,這是UEditor對於進入編輯器中的資料進行的過濾處理。在UEditor中表示段落的標籤是p標籤，很多的編輯操作都是基於p標籤進行的處理。當然我們對div標籤也做了相容性的處理，如果你想保留div標籤不讓UEditor進行轉換也是可以的。

阻止轉換

    UE.getEditor(`editorID`, {
        allowDivTransToP: false
    })

http://fex.baidu.com/ueditor/#qa-allowDivToP

 

文件說明
支援版本：支援 UEditor 1.4.2+ 的版本

當前文件的例子是按照 php 後臺介紹，其中的配置項以 圖片上傳 為例介紹，其他上傳配置方法類似。

1 部署說明
UEditor 在靜態伺服器下，也可以正常載入到容器上，但是上傳圖片等後臺相關的功能是不可以使用的，需要有後臺語言支援才能正常使用。

1.1 選擇後臺語言
UEditor 提供了四種後臺語言 php，asp，asp.net，jsp，你可以選擇你熟悉的語言部署到你的伺服器，本文後面以php為例子介紹。

當前文件介紹的是通用的後臺配置方法，具體的配置，還需要移步各後臺的使用說明：

php：PHP 使用說明
asp：ASP 使用說明
asp.net：AST.NET 使用說明
jsp：JSP 使用說明
1.2 配置 serverUrl 引數
UEditor 1.4.2+ 起，推薦使用統一的請求路徑，在你部署好前端程式碼後，你需要修改 ueditor.config.js 裡的 serverUrl 引數，改成 URL + `php/controller.php`

上面的值php的配置值，其他語言請看對應的後臺的使用說明。

1.3 檢查是否正常載入後臺配置項
UEditor 1.4.2+ 起，把前後端相關的配置項都放到後端檔案 php/config.json 設定（配置介紹），在初始化時會向 serverUrl 發起獲取後端配置的請求。

你可以測試你的網站下的路徑 ueditor/php/controller.php?action=config 是否正常返回了json格式的後端配置內容，格式大致如下。如果這個請求出錯，出現400、500等錯誤，編輯器上傳相關的功能將不能正常使用。

 

{
    "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
    "imagePath": "/ueditor/php/",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
    "其他配置項...": "其他配置值..."
}

http://fex.baidu.com/ueditor/#server-deploy

 


相關文章