TinyEditor's simple and easy-to-use html WYSIWYG editor _ HTML/Xhtml _ webpage Creation

I have introduced a Chinese-made xhtml editor several days ago. I would like to recommend TinyEditor to you today, leigeber.com is a simple and easy-to-use html WYSIWYG editor released by leigeber.com.

I have introduced a Chinese-made xhtml editor several days ago. I would like to recommend TinyEditor to you today, leigeber.com is a simple and easy-to-use html WYSIWYG editor released by leigeber.com.

TinyEditor has the following features:

• It is written in Javascript and does not depend on other class libraries.
• This is a lightweight editor. The file to be called is only 8 KB.
• It can handle most html formatting requirements, and the built-in functions make the generated tags as concise as possible
• Small icons used in the editor use CSS Sprite technology to reduce http connections
• Passed tests in mainstream browsers
• It can be used in personal or commercial projects and complies with the creative commons license.

The following describes how to use it:

1. Reference js and css files provided by TinyEditor in Webpage files
2. Add the tags required by the editor to the webpage file. They are actually textarea, as shown below:

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

3. Initialize the editor by using a script and configure parameters as follows:

   New TINY. editor. edit ('editor', {id: 'input', // (required) The idwidth: 584, // (optional) width of the textarea defined in step 2 above. height: 175, // (optional) height of the editor cssclass: 'te', // (optional) class of the editor, used to control the style controlclass: 'tecontrol' through css, // (optional) classrowclass: 'tehead' for buttons in the editor, // (optional) classpiderclass: 'tepiider 'For the row of the editor button, // (optional) style of line separation between Editor buttons controls: ['bold ', 'italic', 'underline', 'strikethangout', '|', '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 in the editor as needed. '|' indicates the vertical split line between function buttons, and 'n' indicates the split line between buttons footer: true, // (optional) whether to display the fonts at the bottom of the Editor: ['verdana ', 'arial', 'Georgia', 'trebuchet MS '], // (Optional) Select the font xhtml in the editor: true, // (optional) whether the editor generates xhtml or html-marked cssfile: 'style.css ', // (optional) the external css file content to be appended to the Editor: 'starting content ', // (optional) set the initial content css in the editor editing area: 'body {background-color: # ccc} ', // (optional) set the editor editing area background bodyid: 'editor', // (optional) set the IDfooterclass in the editing area: 'tefooter ', // (optional) set the classtoggle: {text: 'source', activetext: 'visualization', cssclass: 'toggle '}, // (optional) set the source code to browse and switch the text, and the classresize: {cssclass: 'resize'} // (optional) set the class} of the editor size adjustment button });

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

In the practical application of TinyEditor, you must note that you must call instance before submitting the editor content. post () function to ensure that the latest visual content in the editing area is converted to markup text.

View Example:Http://sandbox.leigeber.com/tinyeditor/
Download:TinyEditor source code and example files