ASP. NET MVC5 use Baidu ueditor this editor

Recently do a project, using the Baidu Ueditor Rich text editor, powerful, online editing documents, uploading pictures video, accessories.

1, visit http://ueditor.baidu.com/website/download.html to enter the development version of the download page, download. NET UTF-8 version, now the latest is version 1.43.

2, the download after decompression, the folder renamed to Ueditor, then the Ueditor folder inside is the original program.

3. Copy this Ueditor folder to the content file of your MVC project.

4. Create the article model in the Model folder in the project, and note that if you want to render the field of the content, you need to add the [Datype (datatype.multilinetext)] data annotation so that it can be rendered directly in the view <textarea > Text field labels. Add public dbset<article> articles to the corresponding database context constructor, such as using warehousing mode, you need to create a warehousing code, code

public class article
{

[Display (name= "article")]
public int ArticleID {get; set;}

[Display (name= "category")]
public int CategoryID {get; set;}

[Display (name= "title")]
[Required]
[Stringlength (50)]
public string Title {get; set;}

[Display (name= "body")]
[DataType (Datatype.multilinetext)] //If you use a strong class type of auxiliary method @html.editorfor (model =>model) in the view, this field will be rendered as < Textarea> the Text field label.
public string Content {get; set;}

[Display (Name = "Author")]
[Stringlength (20)]
public string AuthorName {get; set;}

[Display (Name = "Publish Time")]
[DataType (Datatype.date)]
[DisplayFormat (dataformatstring= "{0:YYYY-MM-DD}")]
[DataType (Datatype.datetime)]
[DisplayFormat (dataformatstring = "{0:yyyy-mm-dd HH:mm:ss}", Applyformatineditmode = True)]
Public DateTime posttime {get; set;}

Public virtual category category {get; set;}

Warehousing Code

public class Articleservice:baseservice<article>
{
Public Articleservice (DbContext DbContext): Base (DbContext) {}
}

5, compile a project, and then in the controller file to create new controllers, model selection article, the use of scaffolding function automatically created controller Articlecontroller and new, edit, delete various views.

6. The following create view and edit view operate exactly the same way. Open the CREATE view and change the content field to

<div class= "Form-group" >
@Html. labelfor (model = model. Content, htmlattributes:new {@class = "Control-label col-md-2"})
<div class= "col-md-6" >//By setting this code to introduce a bootstrap style, you can adjust the width of the editor, which is 6 lines, and bootstrap divides a document into 12 rows.
@Html. editorfor (model = model. Content) //This helper method will generate <textarea id= "content" in conjunction with data annotations in the model [DataType (datatype.multiline)] name= "Content" Rows=1 cols=2>model.content</textarea> tags. Both the ID and the name attribute are content.

Then add it at the bottom

@section Scripts {
@Scripts. Render ("~/bundles/jqueryval","~/content/ueditor/ueditor.config.js", "~/content/ueditor/ Ueditor.all.js ") //A reference to Ueditor.config.js,ueditor.all.js is introduced through the path.

You can use @script.render ("*.js", "*.js") to render the same JavaScript file at the same time. Generate multiple <script type= "Text/javascript" src= "*.js" > Files.

<script type= "Text/javascript" >

Initializes an editor object, new Baidu.editor.ui.editor creates a Ueditor object
var editor = New Baidu.editor.ui.Editor({
ueditor_home_url: '/content/ueditor/',//configuration Editor path can also be configured in the Ueditor.config.js file.
Iframecssurl: '/content/ueditor/themes/iframe.css ',//style path
Initialcontent: ' Welcome to Ueditor ',//Initialize editor content
autoheightenabled:true,//Height Auto-growth
The initial height of the initialframeheight:400//configuration Editor is 400px.
});
editor.render (' Content '); //The editor is loaded into the id=content text field.
</script>
}

ASP. NET MVC5 use Baidu ueditor this editor