TinyMceの紹介と使用心得

TinyMCEは、JavaScriptによって書かれたブラウザベースの軽量レベルのご覧のエディタです.IE 6+とFirefox 1に対して5+はすべてとても良い支持を持っています.機能面では最強とは言えませんが、ほとんどのサイトのニーズを絶対に満たすことができ、機能配置が柔軟で簡単です.もう1つの特徴は、ロード速度が非常に速いことです.サーバが採用しているスクリプト言語がPHPであれば、さらに最適化することができます.最も重要なのは、TinyMCEがLGPL licenseに基づいて発表されたフリーソフトウェアであり、ビジネスアプリケーションに使用することができます.
上にはTinyMCEの例がありますが、自分の使用心得に基づいてインストール構成を紹介します.
また最新リリースのTinyMCE_によると2.0.3_RC 1(2006.2.13)は、TinyMCE中国語の簡略版を作成し、中国語の表示を美化し、余分な言語パッケージを削除し、UTF 8コードの中国語パッケージを追加しました.具体的な修正説明は圧縮パッケージの説明ファイルを参照してください.
ダウンロード:TinyMCE中国語版
1、まずTinyMCEを解凍し、以下のディレクトリ構造を構築する.

/tinymce/
/tinymce/docs/
/tinymce/docs/zh_cn/
/tinymce/examples/
/tinymce/examples/zh_cn/
/tinymce/jscripts/
/tinymce/jscripts/tiny_mce/
/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/plugins/
/tinymce/jscripts/tiny_mce/plugins/
/tinymce/jscripts/tiny_mce/themes/
/tinymce/jscripts/tiny_mce/themes/advanced/
/tinymce/jscripts/tiny_mce/themes/default/
/tinymce/jscripts/tiny_mce/themes/simple/

docs/ディレクトリの下にはTinyMCEの説明ドキュメントがあり、examples/ディレクトリの下には4つのインスタンスページがあり、jscripts/ディレクトリの下には本当のJSファイルがあります.実際に使用する場合は、jscripts/ディレクトリをサーバにアップロードするだけです.
2、それからTinyMCEを使う必要があるページに次のJSコードを入れます.

	tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		language :"zh_cn"
	});

ここでは、ページがjscripts/と同じディレクトリの下にあると仮定します.そうしないと、コードのパスを変更してください.
ページ内のすべてのtextarea要素がTinyMCEインスタンスとしてレンダリングされます.
3、初期化構成の紹介:

tinyMCE.init({
	mode : "exact",
	elements : "example_textarea",
	theme : "advanced",
	language :"zh_cn",
	plugins : "flash,emotions,paste",
	theme_advanced_buttons1 : "bold,italic,underline,
		strikethrough, separator, forecolor,backcolor,
		fontselect,fontsizeselect",
	theme_advanced_buttons2_add_before: "cut,copy,
		pastetext,separator",
	theme_advanced_buttons2 : "undo,redo,separator,hr,
		link,unlink,image,flash,separator",
	theme_advanced_buttons2_add :"code,emotions,charmap",
	theme_advanced_buttons3 : "",
	theme_advanced_toolbar_location : "bottom",
	theme_advanced_toolbar_align : "center",
	relative_urls : false,
	remove_script_host : false
});

modeはelementsと組み合わせて使用され、elementsでのレンダーnameのHTML要素をTinyMCEエディタ(DIVまたはTextarea)として指定します.たとえば、mode:“exact”、elements:“example_textarea”はmode:“textareas”を単独で使用することもでき、ページ内のすべてのTextarea要素がレンダーされます.

themeは、advancedまたはsimple(機能によって制限される)であってもよいし、トピックをカスタマイズしてもよい.

language一般的な選択は、en,zh_cn,zh_cn_utf8,zh_tw,zh_tw_utf 8(言語パッケージ名に対応)

pluginsは、特定の機能

を提供するために、対応するプラグインのロードを指定するために使用される.

theme_advanced_buttonsの後ろの数字はツールバーの何行目かを指定するために使用されます.最初の3行は書かなくてもいいです.システムは自動的にデフォルトのアイコンで前の3つのツールバーに記入します.前の3行を表示したくない場合は、例のように書くことができます.theme_advanced_buttons3 : "",_add_before接尾辞は、デフォルトのツールバーの前にアイコンを付けることを指します.add接尾辞とは、デフォルトのツールバーの後ろにアイコンを付け、各ボタン資料がドキュメント(/docディレクトリ)を表示できることを意味します.

theme_advanced_toolbar_locationとtheme_advanced_toolbar_alignは簡単で、見るだけで分かります.

relative_urls : false,remove_script_host:falseは一般的にペアで使用されます.TinyMceは自動的にローカルリンクを相対リンクの形式に変更します.例えば、絶対パスをhttp://www.leexuan.com/2006/03/abc.html相対経路/2006/03/abcに変更する.html.上のコードを付けると自動的に書き換えられません.

この単純な構成は一般的なウェブサイトの応用に適しており,TinyMCEのより強力な機能についてはDOCドキュメントを検討することができる.以上は私のいくつかの心得で、もし間違いがあれば指摘を歓迎します!
後記:
デフォルトのボタン
bold
italic
underline
strikethrough
justifyleft
justifycenter
justifyright
justifyfull
bullist
numlist
outdent
indent
cut
copy
paste
undo
redo
link
unlink
image
cleanup
help
code
hr
removeformat
formatselect
fontselect
fontsizeselect
styleselect
sub
sup
forecolor
backcolor
charmap
visualaid
anchor
newdocument
separator
Pluginsのボタン:
save
emotions
flash
iespell
preview
print
zoom
fullscreen
advhr
fullpage
呼び出し:
tinyMCE.init({
theme : "advanced",
mode : "textareas",
plugins : "print",
theme_advanced_buttons3_add : "print"
});