MVC uses the Baidu open-source text editor UEditor to combine images and texts, limit the number of words, and upload images or graffiti.

There are many text editors, such as ticymce and CKEditor, which are easy to use. However, when uploading images and files, you must use CKFinder. In addition, some functions are charged even if you are willing to pay for them, payment is not convenient. Fortunately, Baidu's open-source text editor, UEditor, is also well developed. This article will try its use in MVC. The following results must be achieved:

 

1. upload images
2. Upload graffiti
3. word limit
4. Graphic Display of another view page

FirstHereDownload the UEditor. NET version. I downloaded the UTF-8 version of [1.4.3.NET version.

 

After the download, create the UEditor folder under the Scripts folder and put all the downloaded documents in the UEditor folder.
We need a Model that uses [DataType (DataType. MultilineText)] to specify a string type attribute to be displayed using TextArea.

Using System. componentModel. dataAnnotations; namespace MvcApplication2.Models {public class Post {[Required (ErrorMessage = "Required")] [DataType (DataType. multilineText)] public string Content {get; set ;}}}

 

In HomeController, an Action is used to display a strongly typed view and another Action. When the Result. cshtml partial view is displayed.

using System.Web.Mvc;using MvcApplication2.Models;namespace MvcApplication2.Controllers{    public class HomeController : Controller    {        public ActionResult Create()        {            return View();        }        [HttpPost]        [ValidateInput(false)]        public ActionResult Create(Post post)        {            if (ModelState.IsValid)            {                ViewData["c"] = post.Content;                return PartialView("Result");            }            return View(post);        }    }}

 

Result. cshtml displays graphic information in some views.

@Html.Raw(ViewData["c"].ToString())

 

Home/Create. in cshtml, let TextArea present the editor and use the addListener () method to add the method for listening to contentChange events to the editor. When the number of words exceeds the limit (100 here), let the editor perform a rollback operation: editor.exe cCommand ("undo "). In addition, the root path of UEditor is also set through Window. UEDITOR_HOME_URL = "/Scripts/UEditor/". The settings here will be assigned to the UEDITOR_HOME_URL attribute in ueditor. config. js.

@ Model MvcApplication2.Models. Post @ {Layout = null ;}<! DOCTYPE html> 
 
The Image Upload path is set in config. json.
The above figure shows that the image storage path is Scripts/UEditor/net/upload/image/20140607/6353775730679106479709368 .jpgfrom the settings of imageUrlPrefix, imagePathFormat, or scrawlPathFormat, we need to create the upload folder under Scripts/UEditor/net, and then create the image folder under Scripts/UEditor/net/upload.
Finally, in ueditor. config. js, set the UEditor Global Path, general processing program path, word limit, and so on.