. net online editor: Configuration description of kindeditor and ckeditor + ckfinder
wx57ba58dea2328 2021-07-27 17:52:30

One 、KindEditor( free )

KindEditor It's an open source set HTML Visual editor , It is mainly used to let users get WYSIWYG editing effect on the website , compatible IE、Firefox、Chrome、Safari、Opera Wait for mainstream browsers . KindEditor Use JavaScript To write , Can be seamless with Java、.NET、PHP、ASP And so on .
KindEditor It's very suitable for CMS、 Shopping Mall 、 Forum 、 Blog 、Wiki、 E-mail and other Internet applications ,2006 year 7 First released in June 2.0 since ,KindEditor Rely on excellent user experience and leading technology to continuously expand the editor market share , At present, it has become one of the most popular editors in China .

KindEditor Configuration steps :

1、 Build... In the project KindEditor Folder , Unzip the downloaded file , Will be one of the skins,plugins,kindeditor.js Copy to the KindEditor Folder directory ;

2、 stay .aspx Put... In the file TextBox Control , And set the control ID

    Such as :<asp:TextBox ID="txtContent" TextMode="MultiLine"  runat="server"></asp:TextBox>

3、 stay .aspx Introduce in the file kindeditor.js Documents and Js Code , Can be TextBox Control is set to KindEditor Online editor , The code is as follows :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src= "../kindeditor/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' , 'strikethrough' , 'removeformat' , '|' , 'image' ,
         'flash' , 'media' , 'advtable' , 'hr' , 'emoticons' , 'link' , 'unlink'
          ]
     });
</script>

among ,id by TextBox The control of ID,imageUploadJson: '/handler/upload_json.ashx' Picture upload can be set ( File upload settings are the same ),item To set whether each function on the editor toolbar displays , The corresponding words can be added or deleted manually as needed , If not required “HTML Code ” The function is deleted “'source',”;

4、 stay .aspx The first sentence of the page and Page Add... To the instruction validaterequest=”false”, prohibit .net Automatically block uploads Html Code ;

Such as :<%@ Page Language="C#" ValidateRequest="false"...

5、 Setup complete , The background can be directly through TextBox Of text Property to get the editor content ;

 

another : Set up KindEditor Image upload function of
1、 Just now .aspx Added to the page js Add in code imageUploadJson Parameters ,

Such as :imageUploadJson: '/handler/upload_json.ashx'
2、 Create a general handler page upload_json.ashx, This page is used to write file upload code , The downloaded source code is , stay asp.net in , Minor modifications , The code is as follows :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
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 add... Manually first LitJson.dll References to , stay asp.net\bin in
 
namespace  Yongbin.Shop.Web.handler
{
     /// <summary>
     /// upload_json Summary description of
     /// </summary>
     public  class  upload_json : IHttpHandler
     {
         // File save directory path
         private  String savePath = "/upload/"  + DateTime.Now.ToString( "yyyyMMdd" ) + "/" // Modify upload directory
         // File save directory URL( Displayed in the kindeditor The address in the editor )
         private  String saveUrl = "/upload/"  + DateTime.Now.ToString( "yyyyMMdd" ) + "/" ;
         // Define the file extensions allowed to upload
         private  String fileTypes = "gif,jpg,jpeg,png,bmp" ;
         // Maximum file size
         private  int  maxSize = 1000000;
 
         private  HttpContext context;
 
         public  void  Proce***equest(HttpContext context)
         {
             this .context = context;
 
             HttpPostedFile imgFile = context.Request.Files[ "imgFile" ];
             if  (imgFile == null )
             {
                 showError( " Please select a file ." );
             }
 
             String dirPath = context.Server.MapPath(savePath);
             if  (!Directory.Exists(dirPath))
             {
                 Directory.CreateDirectory(dirPath);  // The copied code is changed here , Automatically create directories
             }
 
             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( " Upload file size exceeds limit ." );
             }
 
             if  (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split( ',' ), fileExt.Substring(1).ToLower()) == -1)
             {
                 showError( " 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 ;
             }
         }
     }
}



3、 Configuration is successful


Two 、CkEditor( free )+CkFinder( charge )
Read an unofficial and informal about .net Survey on the use of online editors ,CkEditor Is used to do more , It belongs to the heavyweight editor , It's very powerful ;

CKEditor It's a new generation of FCKeditor, It's a redeveloped version .CKEditor It's one of the best online text editors in the world , Because of its amazing performance and scalability, it is widely used in major websites .

CKEditor No upload function , Integration required File manager CKFinder In order to realize the upload function .)

The version I use here is ckeditor_3.2 And ckfinder_aspnet_1.4.3

1、 download ckeditor_3.2 And ckfinder_aspnet_1.4.3, decompression ;

2、 Copy the downloaded two folders to the same folder in the website directory , Delete unnecessary files , Among them _sample and _source part , Language pack lang Keep in zh-cn.js,zh.js,en.js, Nothing else , In fact, what install.txt,license.txt,changelog.txt Can be deleted. No . Pictured :

 

3、 Crack CKFinder, open ckfinder/core/js/ckfinder_ie.js And chfinder_gecko.js, Search for   en.call(window,qo);  Delete the code ;

4、 Add references... To the project ckfinder/bin/release/CKFinder.dll( In the downloaded source file )

5、 Introduce... In the page or template page ckeditor.js and ckfinder.js file
6、 stay .aspx The first sentence of the page and Page Add... To the instruction validaterequest=”false”, prohibit .net Automatically block uploads Html Code ;

Such as :<%@ Page Language="C#" ValidateRequest="false"...

7、 stay .aspx Put... In the file TextBox Control , And set the control CssClass="ckeditor", or Html Control , Then add class="ckeditor" Add another id="xxx";

    Such as :<asp:TextBox ID="txtContent"   CssClass="ckeditor" extMode="MultiLine"  runat="server"></asp:TextBox>

    The backstage can be through txtContent.text To get the contents of the editor ;

8、 stay  ckeditor/config.js Configure the style of the editor in , Such as : 

 

CKEDITOR.editorConfig = function ( config )
{
 
     // stay CKEditor In the integration CKFinder, To configure CKFinder route , Start from the root of the website ,“..” Indicates the root directory of the website
     CKFinder.SetupCKEditor( null , '../admin/js/ckfinder/' );  // The main thing is to add this sentence , There is no need to add , The editor will be set by default
     
     
     
     config.skin = 'v2' ; // The skin
     //config.uiColor = '#FFF'; // Skin background color
     //config.resize_enabled = false;   // Cancel “ Drag to change size ” function   
     config.language = 'zh-cn' ; // Configuration language
     config.font_names = ' Song style ; Regular script _GB2312; NSimSun ; In black ; Official script ; Juvenility ; Microsoft YaHei ;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ; // typeface
     config.width = 771; // Width
     config.height = 300; // Height
 
     //config.toolbar = "Basic";  // Basic toolbar
     config.toolbar = "Full" // Omnipotent toolbar
     // Custom toolbar  
     config.toolbar_Full =
     [
         [ 'Source' , '-' , 'Preview' , '-' , 'Templates' ],
         [ 'Cut' , 'Copy' , 'Paste' , 'PasteText' , 'PasteFromWord' , '-' , 'Print' , 'SpellChecker' , 'Scayt' ],
         [ 'Undo' , 'Redo' , '-' , 'Find' , 'Replace' , '-' , 'SelectAll' , 'RemoveFormat' ],
         [ 'Form' , 'Checkbox' , 'Radio' , 'TextField' , 'Textarea' , 'Select' , 'Button' , 'ImageButton' , 'HiddenField' ],
         '/' ,
         [ 'Bold' , 'Italic' , 'Underline' , 'Strike' , '-' , 'Subscript' , 'Superscript' ],
         [ 'NumberedList' , 'BulletedList' , '-' , 'Outdent' , 'Indent' , 'Blockquote' , 'CreateDiv' ],
         [ 'JustifyLeft' , 'JustifyCenter' , 'JustifyRight' , 'JustifyBlock' ],
         [ 'Link' , 'Unlink' , 'Anchor' ],
           [ 'Image' , 'Flash' , 'Table' , 'HorizontalRule' , 'Smiley' , 'SpecialChar' , 'PageBreak' ],
         '/' ,
         [ 'Styles' , 'Format' , 'Font' , 'FontSize' ],
         [ 'TextColor' , 'BGColor' ],
         [ 'Maximize' , 'ShowBlocks' , '-' , 'About' ]
     ];
 
     config.toolbar_Basic =
     [
         [ 'Bold' , 'Italic' , '-' , 'NumberedList' , 'BulletedList' , '-' , 'Link' , 'Unlink' , '-' , 'About' ]
     ];
 
     
};

 

 

9、 modify ckeditor/config.ascx, To configure CKFinder File upload permission and directory :

Revise as follows :

/// <summary> Check the user's upload permission </summary>
/// <returns>true Upload... Can be used ,false No use </returns>
public  override  bool  CheckAuthentication()
{
     return  true ;
}
 
public  override  void  SetConfig()
{
 
     // Specify file upload path ,“~” Indicates the root directory of the website , Related folders are automatically created
     BaseUrl = "~/UploadFiles/ckfinderUpload/userfiles/" ;
     BaseDir = "" ;
     Thumbnails.Url = "" ;
     Thumbnails.Dir = "" ;
     // Mainly modify the above four sentences , Other defaults are OK
     
     // ......
}

 10、 Set permissions to allow IIS The user has write permission to upload the directory

11、 Configuration is successful

 
 
 
 
Please bring the original link to reprint ,thank
Similar articles

2021-06-04

2021-06-05

2021-06-13