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

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

sponsors

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

記事作成:
記事URL:

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