目錄：
- 前言
- 開發環境
- 知識點
- 初始使用
- 自定義工具欄
- 設置和讀取編輯器內容
- 文件上傳
- ueditor加水印
------------------------------------------------
下載地址在尾部
1.前言：之前一直用KingEditor富文本編輯器,在國產編輯器中算是頂尖的插件。但是這個編輯器集成度較差，也很久沒有更新了，今天學習百度產品UEeditor使用！
2.開發環境：VS2013+MVC5
3.知識點：上傳加水印功能
各自選擇自己語言的版本。我這裏是.net版本就選擇.net版本 UTF-8
同時可以選擇Mini版本，Mini版本在日常也是夠用的。開發版功能比較齊全，包括在線編輯WORD,地圖，圖表等功能。如果是普通的，比如博客類的，回覆類使用的，使用mini版比較何時。
4.初次開始：
新建MVC5項目名爲UEeditorForMVC，並解壓下載的ueditor到Script文件夾下，utf8-net改名爲UEeditor
初始部署使用：修改index.cshtml
@{
ViewBag.Title = "Home Page";
}
<script src="~/Scripts/ueditor/ueditor.config.js"></script>
<script src="~/Scripts/ueditor/ueditor.all.min.js"></script>
<script>
//加載編輯器
var ue = UE.getEditor('container', {
});
</script>
<script id="container" name="content" style=" height: 228px; " type="text/plain">
</script>
運行後出現效果，證明配置已經成功！
5.配置工具欄
有時候我們需要自定義工具欄，2個地方可以進行配置，一個是全局的配置文件ueitor.config.js,修改這個文件將導致整站所有編輯器一併修改
單獨配置在加載編輯器時候觸發：
<script>
//加載編輯器
var ue = UE.getEditor('container', {
toolbars: [[
'fullscreen', 'source',
'bold', 'italic', 'underline', 'forecolor', 'insertorderedlist',
'fontfamily', 'fontsize',
'justifyleft', 'justifycenter',
'link', 'unlink',
'simpleupload', 'snapscreen'
]]
});
</script>
這個加載可以發現與config.js是對應的。包括接口路徑，主題等，都可以單獨配置
效果如下，我只配置了最常用的工具欄
6.設置和讀取編輯器內容
ue.ready(function() {
//設置編輯器的內容
ue.setContent('hello');
//獲取html內容，返回: <p>hello</p>
var html = ue.getContent();
//獲取純文本內容，返回: hello
var txt = ue.getContentTxt();
});
可以設置編輯器的內容。比如文章可以獲取後調用
ue.setContent('hello');//爲編輯器設置內容
7.文件上傳
文件上傳是本文的主要內容,我們必須瞭解一下接口。
controller.ashx 這是一個處理文件，繼承IHttpHandler接口。所有文件的上傳必須經過這個文件處理
App_Code文件夾下的UploadHandler.cs爲上傳處理文件。
執行順序由controller.ashx判斷處理後調用UploadHandler。
初始上傳會成功，但是沒有圖片顯示
這是因爲路徑文件造成
研究發現net根目錄下有文件config.json。這個是一個json格式的配置文件
這裏可以配置所有上傳時候的參數包括，上傳路徑，文件命名，遠程抓取路徑等
我們這裏只修改第11行代碼即可
"imageUrlPrefix": "/Scripts/ueditor/net/", /* 圖片訪問路徑前綴 */
修改上傳路徑：在62行
8.加入水印
既然我們知道修改文件爲上傳文件，那麼修改上傳處理邏輯可以加入水印
添加一個水印類
/// <summary>
/// 文字水印
/// </summary>
/// <param name="imgPath">服務器圖片相對路徑</param>
/// <param name="filename">保存文件名</param>
/// <param name="watermarkText">水印文字</param>
/// <param name="watermarkStatus">圖片水印位置 0=不使用 1=左上 2=中上 3=右上 4=左中 9=右下</param>
/// <param name="quality">附加水印圖片質量,0-100</param>
/// <param name="fontname">字體</param>
/// <param name="fontsize">字體大小</param>
AddImageSignPic方法參數解析
這樣我們修改自帶的UploadHandler.cs第68行try方法爲
保存後調用寫水印函數，完整的
try
{
if (!Directory.Exists(Path.GetDirectoryName(localPath)))
{
Directory.CreateDirectory(Path.GetDirectoryName(localPath));
}
file.SaveAs(localPath);
WaterMark.AddImageSignText(localPath, localPath,
"ymnets", 9,
80, "Tahoma", 12);
//WaterMark.AddImageSignPic(serverFileName, serverFileName,
// "傳入水印圖片路徑", 9,
// 80, 5);
Result.Url = savePath;
Result.State = UploadState.Success;
}
UploadHandler
這次我們再次上傳預覽效果
成功生成一個文字水印。這個水印類也包含了圖片LOGO形式的
WaterMark.AddImageSignPic(serverFileName, serverFileName,
"傳入水印圖片路徑", 9,
80, 5);
注掉文字的替換這句：
我下載了博客園的LOGO，那麼結果顯然
模糊度和圖片透明度都有關係.