Mvc4 Project using Ueditor Editor

Configure the. NET Mvc4 project to use the Ueditor editor.

1, first download Ueditor1.3.6 development version (http://ueditor.baidu.com/website/download.html)

2. Put the downloaded files under the content folder of the project, or put them in other files, but note that the downloaded folder is copied to the project.

3, the project configuration use

Introducing a Style file

<link href= "~/content/ueditor/themes/iframe.css" rel= "stylesheet"/>

Introduction of JS File

<script src= "~/content/ueditor/ueditor.config.js" ></script>

<script src= "~/content/ueditor/ueditor.all.js" ></script>

<script src= "~/content/ueditor/lang/zh-cn/zh-cn.js" ></script>

<script src= "~/content/ueditor/ueditor.parse.js" ></script> use the text editor in the area box JS to initialize the <script type = "text/ JavaScript ">
var editor = new Baidu.editor.ui.Editor ({
Ueditor_home_url: '/content/ueditor/',//configuration Editor path
Iframecssurl: '/content/ueditor/themes/iframe.css ',//style path
Initialcontent: "@Model. Arccontent",//Initialize editor contents
Autoheightenabled:true,//High automatic growth
minframeheight:500//min height
});
Editor.render (' arccontent ');//elements using a text editor
Editor.ready (function () {
var content = ' @Html. Raw (model.arccontent) ';
Editor.setcontent (content);
});
</script >

Data preservation and access to display considerations

1. When the data is stored, the data is encoded Server.HTMLEncode (cmsarc.arccontent);

2. Server.htmldecode (cmsarc.arccontent) should be used when returning data when modifying; decoding data

3, the Data assignment note use the Html.raw function, no person data will be displayed as HTML tag form. Use Editor.ready (function () {})

Service side:

Action Tag [ValidateInput (false)] to resolve, as shown in figure:

6, editor and so on, we can receive through formcollection to achieve content preservation, processing pictures and other related operations

Modify the default path for file storage and the handling of images and attachments that cannot be uploaded note

1. The top of the IMAGE.ASHX under the Net Folder <%@ Assembly src= "Uploader.cs"%> and <%@ Assembly src= "Config.cs"%> removed

Successfully upload a picture, inserted into the editor, but can not correctly display the image just uploaded.

View the HTML source code can be found in the picture path, upload1 after 2/, manually delete one, return to view, the picture can be displayed normally.

Or in Ueditor/net/imageup.ashx, find the following line of code:

info = up.upfile (context, path + '/', filetype, size); Get upload Status

And then modify it into

info = up.upfile (context, path, filetype, size); To get the upload status is to delete the + '/'.
customizing toolbars

var editor = new Baidu.editor.ui.Editor ({
        toolbars:[[' Paragraph ', ' rowspacing ', ' FontFamily ', ' fontsize ']
    }) ;