Mvc+easyui-based Web development Framework Experience Summary (5)--Using HTML edit controls CKEditor and Ckfinder

Web development has a lot of HTML editing controls, such as CKEditor, Kindeditor, and so on, a lot of doing very well, this article mainly introduces in the MVC interface, ckeditor configuration and use. CKEditor's predecessor is FCKeditor, with its update, the function of uploading pictures is separated out, now if you need to implement upload images, either write their own code or use other upload controls (such as Uploadify), there is another way is to use Ckfinder, The combination of the two can bring us more convenience.

1, the use of CKEditor

CKEditor is http://ckeditor.com/download, which can be customized according to the needs of the style, this article mainly describes the current newer version of the 4.4.1 inheritance use. And the Ckfinder is: Http://ckfinder.com/download.

The use of CKEditor is relatively simple, under normal circumstances according to the official guidelines to choose the appropriate style download can be, when used, the basic need not how to modify the configuration file. In the MVC view page, add the relevant references to the file.

@* add support for CKEditor *@<script src= "~/content/jquerytools/ckeditor/ckeditor.js" ></script><script src= " ~/content/jquerytools/ckeditor/adapters/jquery.js "></script>

Then add the textarea control that needs to edit the HTML content in the interface, because I'm using a Easyui control, so I've set the control style class= "Easyui-validatebox" or whatever.

<tr><th><label for= "Content" > Contents: </label></th><td><textarea class= " Easyui-validatebox "id=" content "name=" content "style=" width:1024px "></textarea></td></tr>

We typically use a JavaScript script to initialize the corresponding control, and the initialization code is shown below.

<script>function Initeditor () {$ (' #Content '). CKEditor ();//Control 1$ (' #Content1 '). CKEditor ();//Control 2}</script >

Once you have added the appropriate script and control initialization code, you can render the desired effect in the interface.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201406/101649458585264.png "style=" border:0px; "/>

And then the control used, and normal use is no different, such as the assignment statement as shown below.

$ (' #Content1 '). val (info. Content);//ckeditor Assignment

Gets the value of the control, same as normal

var content = $ ("#Content1"). Val ();

2. Integrated use of Ckfinder

Although Ckfinder has been independent, but it also provides a perfect integration effect, we downloaded it, in the compressed package inside the bin directory to find the corresponding CkFinder.dll, add it to our project engineering reference inside, we can normally use the file upload function.

Then modify some of the settings in the Config.ascx file so that we can use it smoothly.

The first step sets the Checkauthentication function to return true.

public override bool Checkauthentication () {return true;}

The second step is to set the Setconfig function inside the BaseURL, the base address needs to be set and the address of our project, or upload the file has a problem.

public override void Setconfig () {//the base URL used to reach files in Ckfinder through the browser. BASEURL = "/content/jquerytools/ckfinder/userfiles/"; ........................

The third step, integration Ckfinder to CKEditor, the front said ckeditor default is no file upload function operation, need to add ckfinder and configure to use.

Ckeditor.editorconfig = function ( config )  {    // define  changes to default configuration here.    // For  complete reference see:    // http://docs.ckeditor.com/#!/api/ ckeditor.config.......................    config.filebrowserbrowseurl =  '/ Content/jquerytools/ckfinder/ckfinder.html ';  //browse service folders when uploading files      config.filebrowserimagebrowseurl =  '/content/jquerytools/ckfinder/ckfinder.html? Type=images ';  //Browse Service folder when uploading images     config.filebrowserFlashBrowseUrl =  '/ Content/jquerytools/ckfinder/ckfinder.html? Type=flash ';   //upload Flash When browsing Service folder     config.filebrowserUploadUrl =  '/ Content/jquerytools/ckfinder/core/connector/aspx/connector.aspx?command=quickupload&type=files ';  // Upload file button (label)      config.filebrowserimageuploadurl =  '/content/jquerytools/ckfinder/core/connector/aspx/connector.aspx? Command=quickupload&type=images ';  //upload image button (label)       config.filebrowserflashuploadurl =  '/content/jquerytools/ckfinder/connector/aspx/connector.aspx? Command=quickupload&type=flash ';  //upload Flash button (tag)};

3. Integrated effect display

Through the above code to consolidate, in the Insert Picture Operation page, will add a Browse Server button, upload Operation tab and other functions, convenient for the file browsing and upload operations, the specific effect as shown below.

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201406/101702383278504.png "style=" border:0px; "/> 650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201406/101702579524876.png "style=" border:0px; "/>

650) this.width=650; "src=" Http://images.cnitblog.com/i/8867/201406/101703161864005.png "style=" border:0px; "/>

These are the HTML editing controls and the Ckfinder file upload components that I have integrated into my web framework, which combine to make it easy to build an illustrated article.

4. MVC Processing

It is important to note that due to the special characters in the textarea, the MVC framework is not allowed to commit for security reasons, and the [ValidateInput (false)] property should be added to the corresponding method.

If I want to submit the HTML content, I need to rewrite the content's write and update operation function inside the controller object, as shown below.

[ValidateInput (False)]public override ActionResult Insert (informationinfo info) {info. Editor = Currentuser.name;info. EditTime = Datetime.now;return base. Insert (info);} [ValidateInput (False)]public override ActionResult Update (string ID, formcollection formvalues) {return base. Update (ID, formvalues);}

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1828937

Mvc+easyui-based Web development Framework Experience Summary (5)--Using HTML edit controls CKEditor and Ckfinder