Asp.net KindEditor and CkEditor configuration instructions

Today we are talking about the ckeditor_3.2 and ckfinder_asp tutorial net_1.4.3 editor. This is also a popular online editor for web pages. Let's take a look.

1. kindeditor

Kindeditor is an open-source html visual editor that allows users to obtain what they see and what they get on their websites. It is compatible with mainstream browsers such as ie, firefox, chrome, safari, and opera. Kindeditor is compiled using webpage special effects, and can be seamlessly integrated with java,. net, php Tutorial, asp, and other programs.
Kindeditor is very suitable for use in Internet applications such as cms, mall, forum, blog, wiki, and email. Since its first release in 2.0, kindeditor relies on excellent user experience and advanced technology to continuously expand the editor market share. It has become one of the most popular editors in China.

The latest kindeditor 3.5.2 is available on the official website.

Kindeditor configuration steps:

1. Create a kindeditor folder in the project, decompress the downloaded file, and copy skins, plugins, and kindeditor. js to the kindeditor folder directory;

2. Place the textbox control in the. aspx file and set the control id.

For example, <asp: textbox id = "txtcontent" textmode = "multiline" runat = "server"> </asp: textbox>

3. Introduce the kindeditor. js file and js code in the. aspx file. You can set the textbox control to the kindeditor online editor. The code is as follows:

<Script src = "../kindeditor. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Ke. show ({
Id: txtcontent,
Imageuploadjson: '/handler/upload_json.ashx ',
Items :[
'Source', '|', 'fullscreen ', 'Undo', 'redo ', 'print', 'Cut ', 'copy', 'paste ',
'Plainpaste ', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright ',
'Justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent ', 'outdent', 'subscript ',
'Superscript', '|', 'selectall ','-',
'Title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold ',
'Italic ', 'underline', 'strikethangout', 'removeformat',' | ', 'Image ',
'Flash', 'media ', 'advtable', 'HR', 'emoticons', 'link', 'unlink'
         ]
});
</Script>

The id is the id of the textbox control, and imageuploadjson: '/handler/upload_json.ashx' can be used to set Image upload (The same is true for file upload). item is used to set whether each function on the toolbar of the editor is displayed, you can manually add or delete corresponding words as needed. If you do not need the "html code" function, delete "'source ',";

4. Add validaterequest = "false" to the first sentence of the. aspx page and the page command to disable. net from automatically blocking html code uploads;

For example, <% @ page language = "c #" validaterequest = "false "...

5. After the settings are completed, the editor content can be obtained directly through the text attribute of textbox in the background;

Set the image upload function of kindeditor.
1. Add the imageuploadjson parameter to the js code just added on the. aspx page,

For example, imageuploadjson: '/handler/upload_json.ashx'
2. Create the general processing page upload_json.ashx, which is used to compile the file upload code. The downloaded source code is as follows:

Using system;
Using system. collections. generic;
Using system. linq;
Using system. web;
Using system. collections;
Using system. io;
Using system. globalization;
Using litjson; // you need to manually add the reference of litjson. dll in asp. netbin.

Namespace yongbin. shop. web. handler
{
/// <Summary>
/// Summary of upload_json
/// </Summary>
Public class upload_json: ihttphandler
    {
// Path of the file storage directory
Private string savepath = "/upload/" + datetime. now. tostring ("yyyymmdd") + "/"; // modify the upload Directory
// File Save Directory url (the address displayed in the kindeditor editor)
Private string saveurl = "/upload/" + datetime. now. tostring ("yyyymmdd") + "/";
// Define the file extension that can be uploaded
Private string filetypes = "gif, jpg, jpeg, png, bmp ";
// Maximum file size
Private int maxsize = 1000000;

Private httpcontext context;

Public void processrequest (httpcontext context)
        {
This. context = context;

Httppostedfile imgfile = context. request. files ["imgfile"];
If (imgfile = null)
            {
Showerror ("Select a file. ");
            }

String dirpath = context. server. mappath (savepath );
If (! Directory. exists (dirpath ))
            {
Directory. createdirectory (dirpath); // The copied code is changed here and the directory is automatically created.
            }

String filename = imgfile. filename;
String fileext = path. getextension (filename). tolower ();
Arraylist filetypelist = arraylist. adapter (filetypes. split (','));

If (imgfile. inputstream = null | imgfile. inputstream. length> maxsize)
            {
Showerror ("The size of the uploaded file exceeds the limit. ");
            }

If (string. isnullorempty (fileext) | array. indexof (filetypes. split (','), fileext. substring (1). tolower () =-1)
            {
Showerror ("the Upload file extension is not allowed. ");
            }

String newfilename = datetime. now. tostring ("yyyymmddhhmmss_ffff", datetimeformatinfo. invariantinfo) + fileext;
String filepath = dirpath + newfilename;

Imgfile. saveas (filepath );

String fileurl = saveurl + newfilename;

Hashtable hash = new hashtable ();
Hash ["error"] = 0;
Hash ["url"] = fileurl;
Context. response. addheader ("content-type", "text/html; charset = utf-8 ");
Context. response. write (jsonmapper. tojson (hash ));
Context. response. end ();
        }

Private void showerror (string message)
        {
Hashtable hash = new hashtable ();
Hash ["error"] = 1;
Hash ["message"] = message;
Context. response. addheader ("content-type", "text/html; charset = utf-8 ");
Context. response. write (jsonmapper. tojson (hash ));
Context. response. end ();
        }

Public bool isreusable
        {
Get
            {
Return false;
            }
        }
    }
}

, Configured successfully

II. ckeditor
I have read an unofficial informal survey on the use of the. net online editor. ckeditor is a heavyweight editor with powerful functions;

Ckeditor is a new generation of fckeditor, which is a redevelopment version. Ckeditor is one of the world's best online web text editors. It is widely used in various websites for its amazing performance and scalability.

(Ckeditor does not provide the upload function. You need to integrate the file manager ckfinder to implement the upload function .)

The versions used here are ckeditor_3.2 and ckfinder_aspnet_1.4.3.

Regardless of web development, the editor is often applied. The two commonly used editors are mentioned above. Other articles are written according to the manual, you can quickly use various web editors according to the reference manual.