聲明: UEditor
其實本人也是第一次用,因此想記錄一下,以便下次再用的時候有筆記可以查。嗯……有什麼寫錯的請大家多多指教啦~~
首先推薦大家看一下官方網站,裏面的文檔非常詳細,基本上可以看着教程自己完成部署使用。
本文只介紹ASP.NET 的環境,其他語言請參考官網啦。
下載 ueditor
下載地址:http://ueditor.baidu.com/website/download.html#ueditor
PS: 本人使用的是 1.4.3.3 .Net UTF-8版
前端部署與測試
1. Demo程序
大家下載後看到的文件夾應該是這樣子的:
我們把 tuf8-net
這個文件夾改名爲 ueditor
並添加到建好的asp.net項目裏。
這裏我用了一個文件夾 Libs
來存放它們。如圖:
然後我們先寫個Demo頁面測試一下是否部署成功。
代碼如下:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">
這裏寫你的初始化內容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="/Libs/ueditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="/Libs/ueditor/ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
PS:這是官網的Demo代碼。
好了,運行一下。
這時候你可能會遇到以下錯誤:
未能加載文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”或它的某一個依賴項。找到的程序集清單定義與程序集引用不匹配。 (異常來自 HRESULT:0x80131040)
解決辦法:更新一下 json.net 包就可以了。
具體:工具–》NuGet程序包管理器–》程序包管理器控制檯–》
輸入 update-package Newtonsoft.Json -Version 6.0.2
這次我們應該能加載到正確的頁面啦。
2. 定製工具欄
我們可以看到 Ueditor
是提供了很多功能的,不過有一些可能我們用不到,不過沒關係,我們可以自定義工具欄。
有兩種實現方法:
方法一:修改
ueditor.config.js
裏面的toolbars
window.UEDITOR_CONFIG = {
//爲編輯器實例添加一個路徑,這個不能被註釋
UEDITOR_HOME_URL: URL
// 服務器統一請求接口路徑
, serverUrl: URL + "net/controller.ashx"
//工具欄上的所有的功能按鈕和下拉框,可以在new編輯器的實例時選擇自己需要的重新定義
, toolbars: [[
'undo', //撤銷
'redo', //重做
'|', //分割線
'bold', //加粗
'italic', //斜體
'underline', //下劃線
'strikethrough', //刪除線
'|',
'justifyleft', //居左對齊
'justifycenter', //居中對齊
'justifyright', //居右對齊
'justifyjustify', //兩端對齊
'|',
'indent', //首行縮進
'insertorderedlist', //有序列表
'insertunorderedlist', //無序列表
'|',
'forecolor', //字體顏色
'backcolor', //背景色
'|',
'link', //超鏈接
'simpleupload', //單圖上傳
'|',
'cleardoc', //清空文檔
'|',
'fontfamily', //字體
'fontsize', //字號
'fullscreen', //全屏
]]
//當鼠標放在工具欄上時顯示的tooltip提示,留空支持自動多語言配置,否則以配置值爲準
//,labelMap:{
// 'anchor':'', 'undo':''
//}
......
}
PS:配置項裏用豎線 ‘|’ 代表分割線。
然後Demo程序不用改,此時再加載能獲得下圖:
方法二:實例化編輯器的時候傳入 toolbars 參數
不用改 ueditor.config.js
,Demo程序裏實例化UEditor編輯器的時候定義 toolbars
參數。
var ue = UE.getEditor('container', {
toolbars: [[
'undo', //撤銷
'redo', //重做
'|',
'bold', //加粗
'italic', //斜體
'underline', //下劃線
'strikethrough', //刪除線
'|',
'justifyleft', //居左對齊
'justifycenter', //居中對齊
'justifyright', //居右對齊
'justifyjustify', //兩端對齊
'|',
'indent', //首行縮進
'insertorderedlist', //有序列表
'insertunorderedlist', //無序列表
'|',
'forecolor', //字體顏色
'backcolor', //背景色
'|',
'link', //超鏈接
'simpleupload', //單圖上傳
'|',
'cleardoc', //清空文檔
'|',
'fontfamily', //字體
'fontsize', //字號
'fullscreen', //全屏
]],
initialFrameWidth :800, // 編輯器寬度
initialFrameHeight:250 // 編輯器高度
});
3. 設置和讀取編輯器的內容
通過 getContent
和 setContent
方法可以設置和讀取編輯器的內容。
var ue = UE.getContent();
//對編輯器的操作最好在編輯器ready之後再做
ue.ready(function() {
//設置編輯器的內容
ue.setContent('hello');
//獲取html內容,返回: <p>hello</p>
var html = ue.getContent();
//獲取純文本內容,返回: hello
var txt = ue.getContentTxt();
});
後臺部署
其實 UEditor
可以定製的前後臺配置都很多,但大部分我們不用修改也夠用。因此這裏後臺部署我主要講兩方面,一是圖片上傳路徑配置問題,二是上傳圖片的壓縮問題。
1. 圖片上傳後臺路徑配置
我試着點擊上傳圖片並選擇了一張圖片,我們可以看到,沒配置的時候圖片路徑是不對的。
.Net版的後臺配置文件在 net/
目錄下的 config.json
文件。
根據官方文檔,我們需要可能修改以下幾個地方:
{
...
"imageUrlPrefix": "/Libs/ueditor/net/", /* 圖片訪問路徑前綴,根據ueditor文件夾在你的項目中哪個位置來改 */
"imagePathFormat": "upload/image/{yyyy}{mm}/{time}{rand:6}", / *這裏根據需要修改,我改成了按月份分文件夾 * /
...
}
剩下的基本按原設置就好。
保存,刷新頁面,再次嘗試上傳圖片,成功。
根據我們的設置,圖片會保存在 /Libs/ueditor/net/upload/image
路徑下。
2. 上傳圖片壓縮
說明: UEditor
的圖片上傳有兩種,分別是單圖上傳和多圖上傳。
單圖上傳用的是簡單的表單上傳,沒有使用上傳插件,不會對圖片進行壓縮。
多圖上傳的話可以通過修改 net/
目錄下的 config.json
文件中 imageCompressBorder
的值來限制圖片大小。
此外,我們也可以自己添加方法,在後臺保存圖片時進行壓縮,此時要修改一下後臺的代碼。
關於後臺代碼的詳細文件分析可以看這裏:http://fex.baidu.com/ueditor/?#server-net
上傳圖片文件時會調用 UploadHandeler.cs
的 Process
方法。
File.WriteAllBytes(localPath, uploadFileBytes);
這句是保存文件,我們可以在保存圖片之前對圖片進行壓縮,然後返回壓縮後的圖片路徑。(Result.Url = modifiedPath;
)
public override void Process()
{
...
try
{
if (!Directory.Exists(Path.GetDirectoryName(localPath)))
{
Directory.CreateDirectory(Path.GetDirectoryName(localPath));
}
File.WriteAllBytes(localPath, uploadFileBytes);
// 壓縮圖片
Image sourceImg = Image.FromFile(localPath);
double scale = (Convert.ToDouble(sourceImg.Height) / Convert.ToDouble(sourceImg.Width));
// 調用圖片壓縮方法對圖片進行壓縮
Image modifiedImg = CommonHelper.GetThumbnail(sourceImg, 370, scale);
savePath = Server.MapPath("upload/modifiedImage/123.jpg");
modifiedImg.Save(savePath);
// 返回壓縮後的圖片url
Result.Url = "upload/modifiedImage/123.jpg";
Result.State = UploadState.Success;
}
catch (Exception e)
{
Result.State = UploadState.FileAccessError;
Result.ErrorMessage = e.Message;
}
finally
{
WriteResult();
}
}
測試一下~~
原圖:
壓縮後:
測試成功!