TinyEditor is a simple and easy-to-use HTML WYSIWYG editor

A few days ago, I introduced to you a domestic xhtml editor . Today I want to recommend you TinyEditor, which is a simple and easy-to-use html WYSIWYG editor just released by the well-known foreign web design blog leigeber.com .

TinyEditor has the following features

• It is written in Javascript and does not depend on other libraries.
• This is a lightweight editor, the file to be called is only 8kb
• It can handle most HTML formatting needs, and has built-in functionality to keep the generated markup as concise as possible.
• The small icons used in the editor use CSS Sprite technology to reduce the number of http connections.
• Tested in major browsers
• Can be used in personal or commercial projects under the Creative Commons license

Here's how to use it:

1. Reference the js and css files provided by TinyEditor in the web page file
2. Add the tags required by the editor in the web page file, which is actually a textarea, as follows

    < textarea id = "input" style = "width:400px; height:200px" >< / textarea >

   Note that the length and width defined in the textarea are the size of the editor.

3. Initialize the editor through the script and configure various parameters as follows:

    new TINY. editor . edit ( 'editor' , {
   	id : 'input' , 
   // (Required) The id of the textarea defined in step 2 above
   	width : 584 , 
   // (optional) editor width
   	height : 175 ,
    // (optional) editor height
   	cssclass : 'te' ,
    // (optional) The class of the editor, used to control the style through CSS
   	controlclass : 'tecontrol' ,
    // (optional) class of the editor button
   	rowclass : 'teheader' ,
    // (optional) class for the editor button row
   	dividerclass : 'tedivider' , 
   // (optional) The style of the dividing line between editor buttons
   	controls : [ 'bold' , 'italic' , 'underline' , 'strikethrough' , '|' , 'subscript' , 'superscript' , '|' , 'orderedlist' , 'unorderedlist' , '|' , 'outdent' , 'indent' , '|' , 'leftalign' , 'centeralign' , 'rightalign' , 'blockjustify' , '|' , 'unformat' , '|' , 'undo' , 'redo' , 'n' , 'font' , 'size' , 'style' , '|' , 'image' , 'hr' , 'link' , 'unlink' , '|' , 'cut' , 'copy' , 'paste' , 'print' ] ,
    // (Required) Add button controls to the editor as needed, where '|' represents the vertical dividing line between function buttons, and 'n' represents the dividing line between button rows
   	footer : true , 
   // (Optional) Whether to display the bottom of the editor
   	fonts : [ 'Verdana' , 'Arial' , 'Georgia' , 'Trebuchet MS' ] ,  
   // (optional) fonts that can be selected in the editor
   	xhtml : true , 
   // (optional) Whether the editor generates xhtml or html tags
   	cssfile : 'style.css' , 
   // (optional) external css file to attach to the editor
   	content : 'starting content' , 
   // (optional) Set the initial content in the editor editing area
   	css : 'body{background-color:#ccc}' ,
    // (optional) Set the editor editing area background
   	bodyid : 'editor' , 
   // (optional) Set the edit area ID
   	footerclass : 'tefooter' , 
   // (optional) Set the editor bottom class
   	toggle : { text : 'Source code' , activetext : 'Visualization' , cssclass : 'toggle' } ,
    // (Optional) Set the source code browsing switch text and the switch button class
   	resize : { cssclass : 'resize' } 
   // (optional) Set the class of the editor resize button
   } ) ;

   It can be said that it is highly configurable, and the configuration items are relatively clear.

In the actual application of TinyEditor, it should be noted that before submitting the editor content, the instance.post() function must be called to ensure that the latest visual content in the editing area is converted into markup text.

See example: http://sandbox.leigeber.com/tinyeditor/
Download: TinyEditor source code and sample files