CLEditorのkeyupを監視し、テキストの入力内容を即時反映する
あんまりうまいタイトルじゃないですが、やりたいことはCLEditorで文字が入力されたり、スタイルが変更されたとき、別のdivタグ内の
内容をCLEditorで入力された内容で更新したい。
要するに、リアルタイムなプレビューがほしいわけです。
動画で
こんな感じのことがやりたい。
[広告 ] VPS
サンプル
まず、CLEditorでのKeyupイベントはこのように監視しました。
- $( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', refreshText);
これだけだと、ハイライトやフォントサイズを変更した時のイベントが取れないので、
- $( $(".cleditorMain iframe")[0].contentWindow ).focus(refreshText);
こんなふうに、テキスト入力部分にフォーカスが戻ってきとききも監視します。
上記2つのイベントが発生したとき、
- var refreshText = function() {
- // cleditorを取得し、編集内容を一旦確定。
- // 表示上、隠れているinputareaの内容を更新する。
- var editor = $("#inputarea").cleditor()[0];
- editor.updateTextArea();
- // inputareaの内容を取得し、divに表示
- var override_html = $("#inputarea").val();
- $("#target").html(override_html);
- };
このように、一旦編集内容を確定して、表示上隠れているtextareaの内容を更新。
作成されたhtmlを取得し、divの内容を更新します。
ソース全体だとこんな感じ。
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>CLEditorサンプル</title>
- <link rel="stylesheet" type="text/css" href="./css/jquery.cleditor.css" />
- <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
- <script type="text/javascript" src="./js/jquery.cleditor.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#inputarea").cleditor({
- width: 450, // width not including margins, borders or padding
- height: 177, // height not including margins, borders or padding
- controls: // controls to add to the toolbar
- "size color highlight removeformat | source",
- colors: // colors in the color popup
- "000 F00 FF0 FFF",
- sizes: // sizes in the font size popup
- "4,5,6,7",
- useCSS: false, // use CSS to style HTML when possible (not supported in ie)
- docType: // Document type contained within the editor
- '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
- docCSSFile: // CSS file used to style the document contained within the editor
- "",
- bodyStyle: // style to assign to document body contained within the editor
- "margin:4px; font:14pt Arial,Verdana; cursor:text"
- });
- var refreshText = function() {
- // cleditorを取得し、編集内容を一旦確定。
- // 表示上、隠れているinputareaの内容を更新する。
- var editor = $("#inputarea").cleditor()[0];
- editor.updateTextArea();
- // inputareaの内容を取得し、divに表示
- var override_html = $("#inputarea").val();
- $("#target").html(override_html);
- };
- // keyupを取得し、文字入力が行われたタイミングで再描画
- $( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', refreshText);
- // もうひとつ、テキストのハイライトなどが行われた時のイベントを取得するため、
- // 入力領域にフォーカスが戻ってくるイベントも監視しておく
- $( $(".cleditorMain iframe")[0].contentWindow ).focus(refreshText);
- });
- </script>
- </head>
- <body>
- <h3>CLEditorの編集内容 即時反映サンプル</h3>
- <textarea id="inputarea" name="inputarea"></textarea>
- <div>CLEditorでの入力を、下のdiv内に反映させる。</div>
- <div id="target" style="font:14pt Arial,Verdana; width:452px; height:152px; border:1px solid gray;"></div>
- <br />
- <a href="index.html">戻る</a>
- </body>
- </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
- 関連記事
-
- jQueryとCSSを使って、画像の一部を切り取り、表示する
- CLEditorのツールチップを日本語に変更する
- CLEditorのkeyupを監視し、テキストの入力内容を即時反映する
- xmlのENTITYを使用し、defineみたいなことを実現する
- HP ProLiant ML115 G5にインストールしたDebianをWake-on-LANで起動する
コメント