TinyEditor The simple and easy-to-use html WYSIWYG editor

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

• It is written in Javascript and does not depend on other libraries
• This is a lightweight editor, and the files to be called are only 8kb
• It can handle most html formatting requirements, and the built-in functions make the generated tags as simple as possible
• The small icon used in the editor uses CSS Sprite technology, reducing http connections
• Test pass in mainstream browsers
• Can be used in personal or commercial projects, following creative commons license

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

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

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

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

    new TINY.editor.edit('editor',{id:'input', // (must) the idwidth:584 of the textarea defined in the second step above, // (optional) Editor width height:175, // (optional) Editor height cssclass:'te', // (optional) Editor class, used to control style controlclass:'tecontrol', // (optional) Button classrowclass:'teheader', // (optional) Editor button line classdividerclass:'tedivider', // (optional) Editor button style controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|', 'outdent', 'indent', '|', 'leftalign', 'centerign', '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 split line between function buttons, and 'n' represents the split line between button lines footer:true, // (Optional) Whether to display the bottom fonts of the editor:['Verdana','Arial','Georgia','Trebuchet MS'], // (Optional) Selectable fonts in the editor xhtml:true, // (Optional) The editor generates xhtml or html tag cssfile:'style.css', // (Optional) External css file to be attached 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 editing area IDfooterclass:'tefooter', // (optional) Set the editor bottom classtoggle:{text:'source code', activetext:'visualization',cssclass:'toggle'}, // (optional) Set the source code browsing toggle text and toggle button classresize:{cssclass:'resize'} // (optional) Set the editor size adjustment button class});

   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 tag text.

View example: http://sandbox.leigeber.com/tinyeeditor/