Using the Kindeditor Rich Text Editor in ASP.

I used to use Baidu's ueditor. This time the customer asked for a need to insert Flash animation in the editor, but do not know how to use ueditor implementation, so chose the kindeditor.

More importantly, the customer's website uses Framework2.0, but ueditor only supports version 4.0 or higher (older versions are hard to find).

Let's take a look at the steps to use Kindeditor

1, first to the official website to download the latest version of the Ueditor.

After the download is complete, the directory structure is as follows

As you can see, Eeditor supports the development of a variety of back-end languages, because we are using ASP. Open the ASP.

Here are two very important files, File_manager_json.ashx and upload_json.ashx, which are used to handle client file upload requests. There is a LitJSON.dll class library in the bin directory that is used to serialize and deserialize objects.

2. Refer the Ueditor to the project

<link href= "/js/kindeditor/themes/default/default.css" rel= "stylesheet" charset= "Utf-8" type= "Text/css"/> <script src= "/js/kindeditor/kindeditor-all.js" charset= "Utf-8" type= "Text/javascript" ></script>< Script src= "/js/kindeditor/lang/zh-cn.js" charset= "Utf-8" type= "Text/javascript" ></script>

3. Initialize Ueditor

The first thing to do is to do some preparatory work, add a textarea to the HTML code to use as a ueditor container.

<Divstyle= "margin:0 auto;width:1000px;">
<textareaID= "Content1"cols= "+"rows= "8"style= "Width:700px;height:200px;visibility:hidden;"runat= "Server"></textarea>
</Div><DivID= "Articlefoot"style= "Margin-top:20px;text-align:right">     <inputtype= "button"ID= "Canceldoc"value= "Cancel Edit"style= "margin-right:20px;height:30px" />     <inputtype= "button"ID= "Savedoc"value= "Save Document"style= "margin-right:20px;height:30px"/></Div>

Then initialize the Kindeditor in JS.

Kindeditor.ready (function(K) {editor= K.create (' #content1 ', {                //the path of the upload handlerUploadjson: '/js/kindeditor/asp.net/upload_json.ashx ', Imagesizelimit:' 10MB ',//Bulk Upload a picture sheet maximum capacityImageuploadlimit:30,//Upload images in bulk upload up to the same number                //path to the file management handlerFilemanagerjson: '/js/kindeditor/asp.net/file_manager_json.ashx ', Allowfilemanager:true,                //to set the value setting here This function is to synchronize the value of Kindeditor to the TextArea text boxAftercreate:function () {                    varSelf = This; K.ctrl (document,13,function() {self.sync (); K (' form[name=example] ' [0].submit ();                    }); K.ctrl (Self.edit.doc,13,function() {self.sync (); K (' form[name=example] ' [0].submit ();                }); },                //post-upload callback function to get the path to the uploaded imageAfterupload:function(data) {alert (data); },                //also set hereAfterblur:function () {                     This. sync (); }, Width:' 1000px; ', Height:' 500px; ',                //editing Toolbarsitems: [' Source ', ' | ', ' undo ', ' Redo ', ' | ', ' preview ', ' print ', ' template ', ' Code ', ' Cut ', ' copy ', ' Paste ',                ' Plainpaste ', ' wordpaste ', ' | ', ' justifyleft ', ' justifycenter ', ' justifyright ',                ' Justifyfull ', ' insertorderedlist ', ' insertunorderedlist ', ' Indent ', ' outdent ', ' subscript ',                ' Superscript ', ' clearhtml ', ' Quickformat ', ' selectall ', ' | ', ' fullscreen ', '/',                ' Formatblock ', ' fontname ', ' fontsize ', ' | ', ' forecolor ', ' hilitecolor ', ' bold ',                ' Italic ', ' underline ', ' strikethrough ', ' lineheight ', ' removeformat ', ' | ', ' image ', ' multiimage ',                ' Flash ', ' media ', ' insertfile ', ' table ', ' hr ', ' emoticons ', ' baidumap ', ' pagebreak ',                ' Anchor ', ' link ', ' unlink ', ' | ', ' about '                ]            });        });

Using the Kindeditor Rich Text Editor in ASP.