MVC uses the Baidu Open source text editor Ueditor to achieve illustrations, word limit, upload pictures or graffiti

The original: MVC uses the Baidu Open source text editor Ueditor realizes the illustrations, the word limit, uploads the picture or the graffiti

There are a lot of text editor, such as TICYMCE and CKEditor is more useful, but related to pictures, file upload, need to combine ckfinder implementation, and some features are charged, even if the intention to pay for use, payment is not convenient. Fortunately, Baidu's open source text editor Ueditor is now well developed, and this article will experience its use in MVC. The following effects need to be achieved:

1. Uploading Images
2. Upload Graffiti
3. Word limit

4. Another view page graphic display

first to here to download the. NET version of Ueditor, I downloaded version UTF-8 of [1.4.3.NET].

After downloading, create the Ueditor folder under the Scripts folder and place all the downloaded documents in the Ueditor folder.

We need a model that uses [DataType (Datatype.multilinetext)] to specify that a string type attribute is displayed using TEXTAREA.

using System.ComponentModel.DataAnnotations; namespace mvcapplication2.models{    publicclass  Post    {        " required  ")]        [DataType (Datatype.multilinetext)]        publicstring  getset;}}    }

HomeController, an action is used to display a strongly typed view, and another action when validating a partial view by displaying result.cshtml.

usingSYSTEM.WEB.MVC;usingMvcapplication2.models;namespacemvcapplication2.controllers{ Public classHomecontroller:controller { PublicActionResult Create () {returnView (); } [HttpPost] [ValidateInput (false)]         PublicActionResult Create (post post) {if(modelstate.isvalid) {viewdata["C"] =Post.                Content; returnPartialview ("Result"); }            returnView (POST); }    }}

result.cshtml Partial view displays graphic information.

@Html. Raw (viewdata["C"). ToString ())

Home/create.cshtml, let textarea render the editor, add the Listen Contentchange event method to the editor through the AddListener () method, when the number of words exceeds the limit (here is 100), Let the editor perform a fallback operation: Editor.execcommand ("undo"). In addition, the root path of the Ueditor is set by Window.ueditor_home_url = "/scripts/ueditor/", where the settings will eventually be assigned to Ueditor.config.js Ueditor_home_ The URL property.

@model mvcapplication2.models.post@{Layout=NULL;}<! DOCTYPE html>"Viewport"Content="Width=device-width"/> <title>Create</title> <link href="~/scripts/ueditor/themes/default/css/ueditor.css"Rel="stylesheet"/> <script src="~/scripts/jquery-1.8.2.js"></script> <script src="~/scripts/ueditor/ueditor.config.js"></script> <script src="~/scripts/ueditor/ueditor.all.js"></script> <script type="Text/javascript">$ (function () {Window.ueditor_home_url="/scripts/ueditor/"; varEditor =NewBaidu.editor.ui.Editor (); Editor.render ("Content"); Editor.addlistener ("Contentchange", function () {if(Editor.getcontentlength (true) > -) {Editor.execcommand ("undo");        }            });    }); </script>@using (Html.BeginForm ("Create","Home", FormMethod.Post,New{id ="AddForm"}) {@Html. editorfor (Model=model. Content)<br/> <input type="Submit"Value="Submit"/>        }    </div></body>
The upload path of the picture is set in Config.json.
Above, from Imageurlprefix and Imagepathformat or Scrawlpathformat setting roughly can see the picture save path is: scripts/ueditor/net/upload/image/20140607/ 6353775730679106479709368.jpg, to do this, we need to create the upload folder under Scripts/ueditor/net, and then create the image folder under Scripts/ueditor/net/upload.
Finally, the global path of the Ueditor, the path of the general handler, the word limit, and so on are set in Ueditor.config.js.