Blog
2010 26 Mar

Un Editor JavaScript WYSIWYG – TinyEditor

editor

TinyEditor este o simplu editor JavaScript WYSIWYG care este de dimensiuni mici (8KB) cat şi independent. Acesta poate fi cu uşurinţă personalizat pentru a se integra in orice site cu ajutorul CSS-ului si a multitudinii de parametri.

Suporta cele mai des folosite formatari de text cat si mijloace de a mentine sursa ca se poate de curata. Icoanele sunt create de `famfamfam` şi au fost combinate intr-un sprite deci sunt doar cateva cereri HTTP pentru editor. Exista planuri de includere a unor unelete de control pentru culoarea fontului, un modul pentru full screen, precum si o optiunea paste from word.

Pentru a iniţializa script utilizati urmatoarele:

new TINY.editor.edit('editor',{
id:'input', // (required) ID of the textarea
width:584, // (optional) width of the editor
height:175, // (optional) heightof the editor
cssclass:'te', // (optional) CSS class of the editor
controlclass:'tecontrol', // (optional) CSS class of the buttons
rowclass:'teheader', // (optional) CSS class of the button rows
dividerclass:'tedivider', // (optional) CSS class of the button diviers
 // (required) options you want available, a '|' represents a divider and an 'n' represents a new row
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'],

footer:true, // (optional) show the footer
fonts:['Verdana','Arial','Georgia','Trebuchet MS'], // (optional) array of fonts to display
xhtml:true, // (optional) generate XHTML vs HTML
cssfile:'style.css', // (optional) attach an external CSS file to the editor
// (optional) set the starting content else it will default to the textarea content
content:'starting content',

css:'body{background-color:#ccc}', // (optional) attach CSS to the editor
bodyid:'editor', // (optional) attach an ID to the editor body
footerclass:'tefooter', // (optional) CSS class of the footer
// (optional) toggle to markup view options
toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},
resize:{cssclass:'resize'} // (optional) display options for the editor resize
});



Primul parametru luat de TINY.editor.edit este numele folosit pentru instantierea obiectului. Ţineţi minte că înainte de a posta, va trebui apelata instance.post () funcţie ce asigura că cele mai recente modificări din WYSIWYG, sunt transferate în zona de text. Acest script a fost testat în toate browserele de baza şi este disponibil gratuit pentru proiecte personale sau comerciale sub licenta Creative Commons.

scris de