Kindeditor a handy HTML visual editor (Rich Text editor)

Kindeditor is written in JavaScript and can be seamlessly bonded to Java,. NET, PHP, ASP, and other programs. Kindeditor is ideal for use on Internet applications such as CMS, Mall, forum, blog, Wiki, e-mail, etc. Since its first release in July 2006, Kindeditor has been one of the most popular editors in the country, thanks to its excellent user experience and leading-edge technology to continuously expand its market share.

---The above content from Baidu Encyclopedia

How to use it?

1. 2. Download the Kindeditor website here
   4. After the download is complete, unzip and put into your project, directory structure
   5. Initialize the Kindeditor Rich Text editor
      • First import the following CSS and JS files (the path needs to be written according to the actual path of your project)
        • 　　

          1 <Linkrel= "stylesheet"href=".. /resources/kindeditor/themes/default/default.css " />2 <Linkrel= "stylesheet"href=".. /resources/kindeditor/plugins/code/prettify.css " />3 <ScriptCharSet= "Utf-8"src=".. /resources/kindeditor/kindeditor-all.js "></Script>4 <ScriptCharSet= "Utf-8"src=".. /resources/kindeditor/lang/zh-cn.js "></Script>5 <ScriptCharSet= "Utf-8"src=".. /resources/kindeditor/plugins/code/prettify.js "></Script>

      • Then initialize (textarea is the Rich Text Editor theme, script code initialization)
        • • 　　

            1<script type= "Text/javascript" >2          varEditor;3Kindeditor.ready (function(K) {4Editor = k.create (' textarea[name= ' your textareaid name "] ', {5Uploadjson: '. /resources/kindeditor/jsp/upload_json.jsp ',//Specifies the server-side program that uploads pictures. Default value: ... /.. /php/upload_json.php. 6Resizetype:1,//2 o'clock you can drag to change the width and height, 1 o'clock can only change the height, 0 o'clock cannot drag. 7Allowimageupload:true,//whether to support uploading pictures locally. 8Allowimageremote:false,//whether the network picture is supported. 9Afterupload:function(Url,data,name) {},//the file upload callback function, you can write in the method to adjust the image display size. TenItems: []//configures the Editor's toolbar, where "-" means line breaks, "|" Represents a separator character.  One             }); A         }); -</script>
            
            

            1 Items Default value:2[' Source ', ' | ', ' fullscreen ', ' undo ', ' Redo ', ' print ', ' cut ', ' copy ', ' Paste ',3' Plainpaste ', ' wordpaste ', ' | ', ' justifyleft ', ' justifycenter ', ' justifyright ',4' Justifyfull ', ' insertorderedlist ', ' insertunorderedlist ', ' Indent ', ' outdent ', ' subscript ',5' Superscript ', ' | ', ' selectall ', '-',6' title ', ' FontName ', ' fontsize ', ' | ', ' textcolor ', ' bgcolor ', ' bold ',7' Italic ', ' underline ', ' strikethrough ', ' Removeformat ', ' | ', ' image ',8' Flash ', ' media ', ' advtable ', ' hr ', ' emoticons ', ' link ', ' unlink ', ' | ', ' about ']

            Close with kindeditor upload picture I want to write a few words (*^▽^*)
            When developing in a JSP page, you need to change the 16th line in the Kindeditor\plugins\image\image.js file where the red callout is (default: ' php/upload_json.php ')

            1 ' jsp/upload_json.jsp '),

            1 //Editor Initialization Parameters2Width//the width of the editor, which can be set PX or%, is higher than the width of the TextArea input box style sheet. 3Height//the height of the editor can only be set PX, which is higher than the TEXTAREA input box style sheet. 4MinWidth//Specifies the minimum width of the editor, in PX. 5MinHeight//Specifies the minimum height of the editor, in PX. 6Items//configures the Editor's toolbar, where "/" means line wrapping, "|" Represents a separator character. 7Nodisableitems//when DesignMode is false, the toolbar icon to keep. 8FilterMode//true to filter HTML code according to Htmltags, false to allow any code to be entered. 9Htmltags//Specifies the HTML tags and attributes to keep. object's key is an HTML tag name, value is an array of HTML attributes, "." The starting property represents the Style property. TenWellformatmode//true to beautify the HTML data.  OneResizetype//2 or 1 or 0, 2 o'clock you can drag to change the width and height, 1 o'clock can only change the height, 0 o'clock cannot drag.  AThemetype//Specify the theme style, you can set "default", "simple", specify simple when you need to introduce simple.css.  -Langtype//Specify the language, you can set "en", "ZH-CN", you need to introduce lang/[langtype].js.  -DesignMode//visual mode or code mode theFullscreenmode//True when the editor is loaded into full-screen mode.  -BasePath//Specifies the root directory path of the editor.  -Themespath//Specifies the themes directory path for the editor.  -Pluginspath//Specifies the plugins directory path for the editor.  +Langpath//specifies the path to the Lang directory of the editor.  -Minchangesize//Undo/redo Text Input minimum change length, when the input text changes less than this length will not be added to the undo record.  +Urltype//change the local URL within the station, you can set "," "relative", "absolute", "domain". Null to not modify url,relative as a relative path, absolute is an absolute path, and domain is an absolute path with a domain name.  ANewlinetag//set the carriage return line label to set "P", "BR".  atPastetype//set Paste type, 0: No paste, 1: Plain text paste, 2:html paste -Dialogaligntype//set the alignment type for the PopOver (dialog), set "," page, specify when the page is centered on the current page, and specify to center by the editor when empty.  -Shadowmode//True when the popup layer (dialog) displays the shadow.  -ZIndex//Specifies the base z-index of the pop-up layer.  -Usecontextmenu//true when using the right-click menu, False when the right-click menu is masked.  -SyncType//The way to synchronize data, you can set the "", "form", the value of the form when the form is submitted automatically synchronized, empty will not automatically sync.  inIndentChar//when Wellformatmode is true, the HTML code indents characters.  -Csspath//Specifies the CSS file for the editor IFRAME document, which sets the style of the visual area.  toCssdata//Specifies the CSS data for the editor IFRAME document, which sets the style of the visualization area.  +Bodyclass//Specifies the classname of the editor IFRAME document body.  -Colortable//Specifies the color in the color picker.  theAftercreate//sets the callback function that is executed after the editor is created.  *AfterChange//the callback function that executes after the editor content has changed.  $Aftertab//the callback function that executes after the TAB key is pressed. Panax NotoginsengAfterfocus//The callback function that is executed when the editor focuses (focus).  -Afterblur//The callback function that is executed when the editor loses focus (Blur).  theAfterupload//the callback function to execute after uploading the file.  +Uploadjson//Specifies the server-side program that uploads the file.  AFilemanagerjson//Specifies the server-side program that browses remote pictures.  theAllowpreviewemoticons//True when the mouse is placed on the expression can preview the expression.  +Allowimageupload//Image upload button (whether local image upload is supported) -Allowflashupload//true when the Flash upload button is displayed.  $Allowmediaupload//True when the View Audio upload button is displayed.  $Allowfileupload//True when the File Upload button is displayed.  -Allowfilemanager//whether to display the Browse Remote server button -Fontsizetable//Specifies the text size. [' 9px ', ' 10px ', ' 12px ', ' 14px ', ' 16px ', ' 18px ', ' 24px ', ' 32px '] theImagetabindex//default display label index for the picture pop-up layer -Formatuploadurl//whether to automatically format the uploaded URL. WuyiFullscreenshortcut//False to disable the ESC fullscreen shortcut key.  theExtrafileuploadparams//upload images, Flash, AV, files, support to add other parameters to the server.  -Filepostname//Specifies the upload file form name.  WuFilldescafteruploadimage//True when the picture is uploaded successfully, switch to the picture edit label, False when the picture is inserted and then close the popup box.  -Afterselectfile//a callback function that executes after a file is selected from the picture space.  AboutPagebreakhtml//You can specify page break HTML.  $Allowimageremote//Show Network picture label (whether network picture is supported) -Autoheightmode//The value is true and the height is automatically adjusted when the Autoheight.js plug-in is introduced.  -Fixtoolbar//The value is true and the Fixtoolbar.js plug-in is introduced when the toolbar position is pinned.
            See here for details
            
            

      • When the above configuration, we open the page, we can appear their own configuration of rich text box (*^▽^*)

   1 <Linkrel= "stylesheet"href=".. /resources/kindeditor/themes/default/default.css " />2 <Linkrel= "stylesheet"href=".. /resources/kindeditor/plugins/code/prettify.css " />3 <ScriptCharSet= "Utf-8"src=".. /resources/kindeditor/kindeditor-all.js "></Script>4 <ScriptCharSet= "Utf-8"src=".. /resources/kindeditor/lang/zh-cn.js "></Script>5 <ScriptCharSet= "Utf-8"src=".. /resources/kindeditor/plugins/code/prettify.js "></Scri

　　　　　　　　　　

Kindeditor a handy HTML visual editor (Rich Text editor)