CLEditorのkeyupを監視し、テキストの入力内容を即時反映する

あんまりうまいタイトルじゃないですが、やりたいことはCLEditorで
文字が入力されたり、スタイルが変更されたとき、別のdivタグ内の
内容をCLEditorで入力された内容で更新したい。

要するに、リアルタイムなプレビューがほしいわけです。



動画で



こんな感じのことがやりたい。


[広告 ] VPS





サンプル



まず、CLEditorでのKeyupイベントはこのように監視しました。


  1. $( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', refreshText);





これだけだと、ハイライトやフォントサイズを変更した時のイベントが取れないので、


  1. $( $(".cleditorMain iframe")[0].contentWindow ).focus(refreshText);



こんなふうに、テキスト入力部分にフォーカスが戻ってきとききも監視します。



上記2つのイベントが発生したとき、


  1. var refreshText = function() {
  2.     // cleditorを取得し、編集内容を一旦確定。
  3.     // 表示上、隠れているinputareaの内容を更新する。
  4.     var editor = $("#inputarea").cleditor()[0];
  5.     editor.updateTextArea();
  6.     // inputareaの内容を取得し、divに表示
  7.     var override_html = $("#inputarea").val();
  8.     $("#target").html(override_html);
  9. };



このように、一旦編集内容を確定して、表示上隠れているtextareaの内容を更新。
作成されたhtmlを取得し、divの内容を更新します。


ソース全体だとこんな感じ。


  1. <html>
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.     <title>CLEditorサンプル</title>
  5.     <link rel="stylesheet" type="text/css" href="./css/jquery.cleditor.css" />
  6.     <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
  7.     <script type="text/javascript" src="./js/jquery.cleditor.min.js"></script>
  8.     <script type="text/javascript">
  9.     $(document).ready(function() {
  10.         $("#inputarea").cleditor({
  11.          width:        450, // width not including margins, borders or padding
  12.          height:     177, // height not including margins, borders or padding
  13.          controls:     // controls to add to the toolbar
  14.                         "size color highlight removeformat | source",
  15.          colors:     // colors in the color popup
  16.                         "000 F00 FF0 FFF",
  17.          sizes:        // sizes in the font size popup
  18.                         "4,5,6,7",
  19.          useCSS:     false, // use CSS to style HTML when possible (not supported in ie)
  20.          docType:     // Document type contained within the editor
  21.                         '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
  22.          docCSSFile: // CSS file used to style the document contained within the editor
  23.                         "",
  24.          bodyStyle:    // style to assign to document body contained within the editor
  25.                         "margin:4px; font:14pt Arial,Verdana; cursor:text"
  26.         });
  27.         
  28.         
  29.         
  30.         var refreshText = function() {
  31.             // cleditorを取得し、編集内容を一旦確定。
  32.             // 表示上、隠れているinputareaの内容を更新する。
  33.             var editor = $("#inputarea").cleditor()[0];
  34.             editor.updateTextArea();
  35.             
  36.             // inputareaの内容を取得し、divに表示
  37.             var override_html = $("#inputarea").val();
  38.             $("#target").html(override_html);
  39.         };
  40.         
  41.         // keyupを取得し、文字入力が行われたタイミングで再描画
  42.         $( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', refreshText);
  43.         
  44.         // もうひとつ、テキストのハイライトなどが行われた時のイベントを取得するため、
  45.         // 入力領域にフォーカスが戻ってくるイベントも監視しておく
  46.         $( $(".cleditorMain iframe")[0].contentWindow ).focus(refreshText);
  47.         
  48.     });
  49.     </script>
  50. </head>
  51. <body>
  52.     <h3>CLEditorの編集内容 即時反映サンプル</h3>
  53.     <textarea id="inputarea" name="inputarea"></textarea>
  54.     <div>CLEditorでの入力を、下のdiv内に反映させる。</div>
  55.     <div id="target" style="font:14pt Arial,Verdana; width:452px; height:152px; border:1px solid gray;"></div>
  56.     <br />
  57.     <a href="index.html">戻る</a>
  58. </body>
  59. </html>




また、サンプルを以下のURLに置いておきます。

http://symfo.web.fc2.com/js-sample/gradients/sample5.html






参考URL



jQuery Cleditor get textarea value on keyup
http://stackoverflow.com/questions/7781404/jquery-cleditor-get-textarea-value-on-keyup

jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE
http://stackoverflow.com/questions/7864012/jquery-cleditor-wysiwyg-text-editor-keyup-works-in-webkit-browsers-but-not-fi




関連記事

コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
https://symfo.web.fc2.com/

PR

検索フォーム

月別アーカイブ