リッチなWYGIWYGシステムをお手軽に導入する「CKEditor」

ブログやCMSのほとんどには、見たままのものがそのまま表示されるWYGIWYGシステムが導入されています。
このWYGIWYGをお手軽に導入でき、かつリッチな「CKEditor」を紹介します。

使用方法

導入は非常に簡単です。
CKEditorからファイル一式をダウンロードします。
<script type="text/javascript" src="ckeditor.js"></script>
あとはtextareaにclassなどを振るだけです。
<textarea class="ckeditor" id="editor" name="editor" cols="80" rows="10"></textarea>

▼オプション
スキン:見た目を変えられます。

<form>
	<textarea cols="80" id="editor_office2003" name="editor_office2003" rows="10"></textarea>
</form>
<script type="text/javascript">
CKEDITOR.replace( 'editor_office2003',
	{
	skin : 'office2003' //そのほかv2もあります。
	});
</script>

インラインエディター:ダブルクリックでWYGIWYGになります。

<div class="editable">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
	semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
	rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
	nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
	eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
</div>
<script type="text/javascript">
window.onload = function(){
	if ( window.addEventListener )
		document.body.addEventListener( 'dblclick', onDoubleClick, false );
	else if ( window.attachEvent )
		document.body.attachEvent( 'ondblclick', onDoubleClick );
};
function onDoubleClick( ev ){
	var element = ev.target || ev.srcElement;
	element = element.parentNode;
	if ( element.nodeName.toLowerCase() == 'div' )
		replaceDiv( element );
}
var editor;
function replaceDiv( div ){
	if ( editor )
		editor.destroy();
	editor = CKEDITOR.replace( div );
}
	</script>
	

サンプル


SKIN:office2003

SKIN:v2

ダブルクリックで表示

Part 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.


Javascriptサンプルページ一覧
skuare.net