skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

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

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

sponsors

使用方法
導入は非常に簡単です。
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」サンプル

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:jQueryでループするスライダーを作る「loopedSlider」

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more