UEditor を ASP.NET MVC プロジェクトに組み込むには、以下の３つの JavaScript ファイルを <head> 内に読み込みます。
<script src="~/ueditor/ueditor.config.js"></script>
<script src="~/ueditor/ueditor.all.min.js"></script>
<script src="~/ueditor/lang/ja/ja.js"></script> <!-- 日本語化した場合 -->
次に、ビューにエディタ用の要素を配置し、初期化します。
<textarea id="postBody" name="postBody"></textarea>
<script>
var ue = UE.getEditor('postBody', {
initialFrameHeight: 320,
initialFrameWidth : '100%',
autoHeightEnabled : false
});
</script>
サーバーサイドでの HTML 許可
投稿時に HTML タグを含む文字列を受け取る場合、ASP.NET の入力検証を無効化し、かつ表示時にエスケープしないよう設定します。
// Controller
[HttpPost, ValidateInput(false)]
public ActionResult Save(ArticleViewModel vm)
{
...
ViewBag.Content = vm.Body;
return View();
}
// Razor View
@Html.Raw(ViewBag.Content)
画像アップロードのカスタマイズ
net/config.json を編集してアップロード先を変更できます。
{
"imageUrlPrefix": "https://cdn.example.com",
"imagePathFormat": "/upload/{yyyy}{mm}{dd}/{time}{rand:6}",
"imageCompressBorder": 1600
}
アップロード処理は controller.ashx → UploadHandler.cs で実装されています。独自にリサイズする場合は以下のように記述します。
HttpPostedFileBase file = Request.Files["upfile"];
using (var src = Image.FromStream(file.InputStream, true, true))
{
int newW = 800;
int newH = src.Height * newW / src.Width;
using (var dest = new Bitmap(newW, newH))
using (var g = Graphics.FromImage(dest))
{
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(src, 0, 0, newW, newH);
var path = Server.MapPath("~/App_Data/Uploads/" + Guid.NewGuid() + ".jpg");
dest.Save(path, ImageFormat.Jpeg);
}
}
エディタのツールバーは ueditor.config.js の toolbars 配列で並び順や表示／非表示を制御できます。