TinyEditor ialah html WYSIWYG editor_HTML/Xhtml_pengeluaran halaman web yang ringkas dan mudah digunakan

Beberapa hari lalu saya memperkenalkan anda kepada editor xhtml domestik TinyEditor ialah html WYSIWYG editor_HTML/Xhtml_pengeluaran halaman web yang ringkas dan mudah digunakan yang saya ingin cadangkan kepada anda hari ini ialah blog reka bentuk web asing yang terkenal leigeber.com<.>Editor HTML WYSIWYG yang ringkas dan mudah digunakan baru dikeluarkan.

TinyEditor ialah html WYSIWYG editor_HTML/Xhtml_pengeluaran halaman web yang ringkas dan mudah digunakan mempunyai ciri berikut

Ia ditulis dalam Javascript dan tidak bergantung pada perpustakaan lain
Ini adalah editor ringan, fail yang akan dipanggil hanya 8kb
Ia boleh mengendalikan kebanyakan keperluan pemformatan HTML, dan fungsi terbina dalam menjadikan penanda yang dijana sesingkat mungkin
Ikon kecil yang digunakan dalam editor menggunakan teknologi CSS Sprite untuk mengurangkan sambungan http
Diuji dan diluluskan dalam penyemak imbas arus perdana
Boleh digunakan dalam projek peribadi atau komersial di bawah
• lesen creative commons

Begini cara menggunakannya:

Rujuk fail js dan fail css yang disediakan oleh TinyEditor ialah html WYSIWYG editor_HTML/Xhtml_pengeluaran halaman web yang ringkas dan mudah digunakan dalam fail halaman web
Tambahkan teg yang diperlukan oleh editor dalam fail halaman web, yang sebenarnya adalah kawasan teks, seperti berikut

2. <span style="COLOR: #009900"><<span style="FONT-WEIGHT: bold; COLOR: #000000">textarea</span> <span style="COLOR: #000066">id</span><span style="COLOR: #66cc66">=</span><span style="COLOR: #ff0000">"input"</span> <span style="COLOR: #000066">style</span><span style="COLOR: #66cc66">=</span><span style="COLOR: #ff0000">"width:400px; height:200px"</span>><<span style="COLOR: #66cc66">/</span><span style="FONT-WEIGHT: bold; COLOR: #000000">textarea</span>></span>

   Perhatikan bahawa panjang dan lebar yang ditakrifkan dalam kawasan teks juga adalah saiz editor.

Mulakan editor melalui skrip dan konfigurasikan pelbagai parameter, seperti berikut:

3. <span style="FONT-WEIGHT: bold; COLOR: #003366">new</span> TINY.<span style="COLOR: #660066">editor</span>.<span style="COLOR: #660066">edit</span><span style="COLOR: #009900">(</span><span style="COLOR: #3366cc">'editor'</span><span style="COLOR: #339933">,</span><span style="COLOR: #009900">{</span>
   	id<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'input'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (必须)上面第二步中定义的textarea的id</span>
   	width<span style="COLOR: #339933">:</span><span style="COLOR: #cc0000">584</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器宽度</span>
   	height<span style="COLOR: #339933">:</span><span style="COLOR: #cc0000">175</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器高度</span>
   	cssclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'te'</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器的class，用来通过css控制样式</span>
   	controlclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'tecontrol'</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器上按钮的class</span>
   	rowclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'teheader'</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器按钮行的class</span>
   	dividerclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'tedivider'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器按钮间分割线的样式</span>
   	controls<span style="COLOR: #339933">:</span><span style="COLOR: #009900">[</span><span style="COLOR: #3366cc">'bold'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'italic'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'underline'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'strikethrough'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'subscript'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'superscript'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'orderedlist'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'unorderedlist'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span> <span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'outdent'</span> <span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'indent'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'leftalign'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'centeralign'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'rightalign'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'blockjustify'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'unformat'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'undo'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'redo'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'n'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'font'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'size'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'style'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'image'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'hr'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'link'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'unlink'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'|'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'cut'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'copy'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'paste'</span><span style="COLOR: #339933">,</span> <span style="COLOR: #3366cc">'print'</span><span style="COLOR: #009900">]</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (必须) 要根据需要在编辑器上添加按钮控件, 其中'|'代表功能按钮间的竖分割线，'n'代表按钮行间的分割线</span>
   	footer<span style="COLOR: #339933">:</span><span style="FONT-WEIGHT: bold; COLOR: #003366">true</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 是否显示编辑器底部</span>
   	fonts<span style="COLOR: #339933">:</span><span style="COLOR: #009900">[</span><span style="COLOR: #3366cc">'Verdana'</span><span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'Arial'</span><span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'Georgia'</span><span style="COLOR: #339933">,</span><span style="COLOR: #3366cc">'Trebuchet MS'</span><span style="COLOR: #009900">]</span><span style="COLOR: #339933">,</span>  
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器中可选择的字体</span>
   	xhtml<span style="COLOR: #339933">:</span><span style="FONT-WEIGHT: bold; COLOR: #003366">true</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 编辑器生成xhtml还是html标记</span>
   	cssfile<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'style.css'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 要为编辑器附加的外部css文件</span>
   	content<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'starting content'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器编辑区域中的初始内容</span>
   	css<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'body{background-color:#ccc}'</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器编辑区域背景</span>
   	bodyid<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'editor'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑区域ID</span>
   	footerclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'tefooter'</span><span style="COLOR: #339933">,</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器底部class</span>
   	toggle<span style="COLOR: #339933">:</span><span style="COLOR: #009900">{</span>text<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'源代码'</span><span style="COLOR: #339933">,</span>activetext<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'可视化'</span><span style="COLOR: #339933">,</span>cssclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'toggle'</span><span style="COLOR: #009900">}</span><span style="COLOR: #339933">,</span>
    <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置源代码浏览切换文字，及切换按钮的class</span>
   	resize<span style="COLOR: #339933">:</span><span style="COLOR: #009900">{</span>cssclass<span style="COLOR: #339933">:</span><span style="COLOR: #3366cc">'resize'</span><span style="COLOR: #009900">}</span> 
   <span style="COLOR: #006600; FONT-STYLE: italic">// (选填) 设置编辑器大小调整按钮的class</span>
   <span style="COLOR: #009900">}</span><span style="COLOR: #009900">)</span><span style="COLOR: #339933">;</span>

   Boleh dikatakan ia sangat boleh dikonfigurasikan, dan item konfigurasi agak jelas.

Dalam aplikasi sebenar TinyEditor ialah html WYSIWYG editor_HTML/Xhtml_pengeluaran halaman web yang ringkas dan mudah digunakan, perlu diingatkan bahawa sebelum menyerahkan kandungan editor, fungsi instance.post() mesti dipanggil untuk memastikan kandungan visual terkini dalam kawasan penyuntingan ditukar kepada teks bertanda.

Lihat contoh: http://sandbox.leigeber.com/tinyeditor/
Muat turun: Kod sumber TinyEditor ialah html WYSIWYG editor_HTML/Xhtml_pengeluaran halaman web yang ringkas dan mudah digunakan dan fail sampel