skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

リッチな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>

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

記事作成：2009年08月27日

前の記事：jQueryでtwitterタイムライン表示「Twit - Display Twitter Tweets on a Blog.」
次の記事：jQueryでループするスライダーを作る「loopedSlider」