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

使用方法

<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>

<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>
	

サンプル