一、从官方网站下载UEditor,http://ueditor.baidu.com/website/download.html, 我下载的是1.53.net版本
二、使用VS2013创建MVC4 工程,添加UEditor到Content下
三、在VS中创建EF,主要model如下
using System; using System.Collections.Generic; public partial class TestUeditor { public int id { get; set; } public string title { get; set; } public string ucontent { get; set; } }
四、Home控制器如下代码:
public class HomeController : Controller { WzhEntities1 db = new WzhEntities1(); public ActionResult Index() { return View(); } [HttpPost] [ValidateInput(false)] public ActionResult Index(TestUeditor news) { if (!ModelState.IsValid) { return HttpNotFound(); } db.TestUeditors.Add(news); db.SaveChanges(); return Content("ok"); } public ActionResult Edit(int id) { return View(db.TestUeditors.Find(id)); } [HttpPost] [ValidateInput(false)] public ActionResult Edit(TestUeditor news) { if (!ModelState.IsValid) { return HttpNotFound(); } db.Entry(news).State=EntityState.Modified;; db.SaveChanges(); return Content("ok"); } public ActionResult List() { return View(db.TestUeditors.ToList()); } }
五、Index的view视图:
@{ ViewBag.Title = "Index"; } <script src="~/Content/ueditor/ueditor.config.js"></script> <script src="~/Content/ueditor/ueditor.all.min.js"></script> <link href="~/Content/ueditor/themes/iframe.css" rel="stylesheet" /> <h2>Index</h2> @using (Html.BeginForm()) { @Html.TextBox("Title") <script id="ucontent" name="ucontent"> </script> <input type="submit" value="提交"/> } <script type="text/javascript"> var editorOption = { initialFrameWidth: 784, initialFrameHeight: 400 }; var editor = new baidu.editor.ui.Editor(editorOption); editor.render(‘ucontent‘); </script>
Edit视图:
@using System.Net.Http @model MvcApplication3.Models.TestUeditor @{ ViewBag.Title = "Edit"; } <script src="~/Content/ueditor/ueditor.config.js"></script> <script src="~/Content/ueditor/ueditor.all.min.js"></script> <link href="~/Content/ueditor/themes/iframe.css" rel="stylesheet" /> <h2>Edit</h2> @using (Html.BeginForm(HttpMethod.Post)) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <fieldset> <legend>News</legend> <div class="editor-label"> @Html.LabelFor(model => model.title) </div> <div class="editor-field"> @Html.TextBoxFor(model => model.title) @Html.ValidationMessageFor(model => model.title) </div> <div class="editor-label"> @Html.LabelFor(model => model.ucontent) </div> <div class="editor-field"> @Html.TextAreaFor(m => m.ucontent) @Html.ValidationMessageFor(model => model.ucontent) </div> <p> <input type="submit" value="Save" /> </p> </fieldset> } <div> @Html.ActionLink("Back to List", "Index") </div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") } <script type="text/javascript"> var editorOption = { initialFrameWidth: 784, initialFrameHeight: 400 }; var editor = new baidu.editor.ui.Editor(editorOption); editor.render(‘ucontent‘); </script>
完成
时间: 2024-10-09 23:20:27