TinyEditor el editor HTML WYSIWYG simple y fácil de usar

Hace unos días, le presenté un editor de XHTML nacional. Hoy quiero recomendarte TinyEditor. Es un editor HTML WYSIWYG simple y fácil de usar que recién lanzado por Leigeber.com, un conocido blog de diseño web extranjero.

• Está escrito en JavaScript y no depende de otras bibliotecas
• Este es un editor liviano, y los archivos a llamar son solo 8 kb
• Puede manejar la mayoría de los requisitos de formato HTML, y las funciones incorporadas hacen que las etiquetas generadas sean lo más simples posible
• El pequeño icono utilizado en el editor utiliza la tecnología CSS Sprite, reduciendo las conexiones HTTP
• Pase de prueba en los navegadores convencionales
• Se puede utilizar en proyectos personales o comerciales, siguiendo la licencia Creative Commons

1. Referencia a los archivos JS y CSS proporcionados por ThinyEditor en archivos de página web
2. Agregar las etiquetas requeridas por el editor al archivo de la página web es en realidad un textAREA, como sigue

    <TextArea id = Input Style = Width: 400px; Altura: 200px> </textarea>

   Tenga en cuenta que la longitud y el ancho definidos en TextAREA son del tamaño del editor.

3. Inicialice el editor a través de scripts y configure varios parámetros de la siguiente manera:

    nuevo tiny.editor.edit ('editor', {id: 'input', // (debe) el IDWIDTH: 584 del textAREA definido en el segundo paso anterior, // (opcional) Ancho de ancho de editor: 175, // (opcional) Altura del editor CSSSClass: 'TE', // (Clase de opción) del editor, utilizado para controlar el estilo de estilo: 'Teconcontrol', // (opcional) (opcional) (opción) (opcional) (opcional) (opcional) 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', ',', /, / Hr ',' Link ',' Unlink ',' '|', 'Cut', 'Copy', 'Paste', ',', ', / Hr', '. 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 Área de edición IDFooterClass: 'tefooter', // (opcional) Establezca el editor inferior classtoggle: {text: 'código de origen', activetext: 'visualization', cssclass: 'toggle'}, // (opcional) Estable clase});

   Se puede decir que es altamente configurable, y los elementos de configuración son relativamente claros.

En la aplicación real de TinyEditor, debe tenerse en cuenta que antes de enviar el contenido del editor, la función instancia.post () debe llamarse para garantizar que el último contenido visual en el área de edición se convierta en texto de etiqueta.

Ver ejemplo: http://sandbox.leigeber.com/tinyeeditor/