Tinyeditor Editor HTML WYSIWYG yang sederhana dan mudah digunakan

Beberapa hari yang lalu, saya memperkenalkan editor XHTML domestik kepada Anda. Hari ini saya ingin merekomendasikan TinyEditor kepada Anda. Ini adalah editor HTML Wysiwyg yang sederhana dan mudah digunakan yang baru saja dirilis oleh Leigeber.com, sebuah blog desain web asing yang terkenal.

• Itu ditulis dalam javascript dan tidak bergantung pada perpustakaan lain
• Ini adalah editor yang ringan, dan file yang akan dipanggil hanya 8kb
• Ini dapat menangani sebagian besar persyaratan pemformatan HTML, dan fungsi bawaan membuat tag yang dihasilkan sesederhana mungkin
• Ikon kecil yang digunakan dalam editor menggunakan teknologi CSS Sprite, mengurangi koneksi HTTP
• Uji pass di browser arus utama
• Dapat digunakan dalam proyek pribadi atau komersial, mengikuti lisensi Creative Commons

1. Referensi file JS dan CSS yang disediakan oleh TinyEditor di file halaman web
2. Menambahkan tag yang dibutuhkan oleh editor ke file halaman web sebenarnya adalah TextArea, sebagai berikut

    <TextArea ID = Gaya Input = Lebar: 400px; Tinggi: 200px> </textarea>

   Perhatikan bahwa panjang dan lebar yang didefinisikan dalam TextArea adalah ukuran editor.

3. Inisialisasi editor melalui skrip dan konfigurasikan berbagai parameter sebagai berikut:

    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) Tombol ClassRowClass: 'TeHeader', // (Opsional) Line Button Line ClassDividerClass: 'Tedivider', // (Opsional) Kontrol Gaya Tombol Editor: ['Bold', 'Italic', 'Underline', 'StrikeThrough', '|,' Subscript ',' Superscript ',', '| 'Outdent', 'indent', '|', 'leftalign', 'centerign', 'rightAlign', 'blockjustify', '|', 'un font font', '|', 'undo', 'redo', 'n', 'font', 'tautan', 'tidak ada' 'Tempel', 'Print'], // (Diperlukan) Tambahkan kontrol tombol ke editor sesuai kebutuhan, di mana '| Dalam editor xhtml: true, // (opsional) Editor menghasilkan xhtml atau tag html cssfile: 'style.css', // (opsional) file css eksternal untuk dilampirkan pada konten editor cs editor: 'body (opsional) (opsional. 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: 'Ubah Ubah'} // (Opsional) Setel Kelas Tombol Penyesuaian Ukuran Editor});

   Dapat dikatakan bahwa ini sangat dapat dikonfigurasi, dan item konfigurasi relatif jelas.

Dalam aplikasi aktual TinyEditor, perlu dicatat bahwa sebelum mengirimkan konten editor, fungsi instance.post () harus dipanggil untuk memastikan bahwa konten visual terbaru di area pengeditan dikonversi menjadi teks tag.

Lihat contoh: http://sandbox.leigeber.com/tinyeeditor/