jQuery で簡単リッチテキスト!CLEditor

Wordpress などの CMS でお馴染みのリッチテキスト編集。WYSIWYG ってやつ。それを jQuery を使って簡単に組み込むことができる。

まず必要なファイルを揃えて呼び出す。

<script src="/jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/jquery/js/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/jquery/CLEditor1_3_0/jquery.cleditor.css" />
<script type="text/javascript" src="/jquery/CLEditor1_3_0/jquery.cleditor.min.js"></script>

後は目的のテキストエリアに id を指定して javascript を3行ほど。

<textarea id="wysiwyg"></textarea>

<script type="text/javascript">
  $(document).ready(function() {
    $("#wysiwyg").cleditor({width:500, height:180, useCSS:true})[0].focus();
  });
</script>

これだけ。

かわのくんとは

Web系IT企業でプログラミングやマネジメントをしています。趣味で音楽を少々。

Youtubeでライブ動画配信中

Ustreamでライブ動画配信中

スマートフォン向けにPCサイトを自動変換(コンバート)する『CONV2SP』 CSS作成支援ツール『CSSツクール』