CLEditorに背景画像を表示し、表示する内容をボタンで切り替える

CLEditorに、こんな感じで背景画像を指定できないか調べてみました。

49_001.png

※サンプルに使用する画像は、
http://www.a-kabe.com/rozenmaiden/1024768-xga/2009-11-27-1024768-82.php
こちらからお借りしました。






bodyのbackground-image



CLEditorを使うと、「cleditorMain」というクラス名が指定されたdivの中に
iframeが生成されます。

このiframeの中のbodyを取得し、そのbackground-imageに表示したい画像を
指定することにしました。

49_002.png



該当箇所の抜粋はこんな感じ。


  1. $( $(".cleditorMain iframe")[0].contentWindow.document.body ).css('background-image', 'url(images/cleditor_back.png)');




これでCLEditorの背景に指定した画像が表示されると思います。

49_003.png



ソース全体だと、このようになります。


  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.         
  11.         $("#inputarea").cleditor({
  12.          width:        450, // width not including margins, borders or padding
  13.          height:     177, // height not including margins, borders or padding
  14.          controls:     // controls to add to the toolbar
  15.                         "size color highlight removeformat | source",
  16.          colors:     // colors in the color popup
  17.                         "000 F00 FF0 FFF",
  18.          sizes:        // sizes in the font size popup
  19.                         "4,5,6,7",
  20.          useCSS:     false, // use CSS to style HTML when possible (not supported in ie)
  21.          docType:     // Document type contained within the editor
  22.                         '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
  23.          docCSSFile: // CSS file used to style the document contained within the editor
  24.                         "",
  25.          bodyStyle:    // style to assign to document body contained within the editor
  26.                         "margin:4px; font:14pt Arial,Verdana; cursor:text"
  27.         });
  28.         
  29.         // CLEditorにより生成されたiframe内のbodyを取得
  30.         // bodyのbackground-imageに表示したい画像を指定
  31.         $( $(".cleditorMain iframe")[0].contentWindow.document.body ).css('background-image', 'url(images/cleditor_back.png)');
  32.     });
  33.     </script>
  34. </head>
  35. <body>
  36.     <textarea id="inputarea" name="inputarea"></textarea>
  37. </body>
  38. </html>








表示する画像の切り替え



表示する画像を切り替えるには、素直にbackground-imageで指定する値を
変更しても良かったのですが、画像の表示位置を変更する「background-position」という
プロパティを見つけたので、一枚の画像を用意し表示位置を変更することで
切り替わっているように見せることにしました。

用意した画像はこれです。

49_004.png

0pxから表示すると上の画像。200pxから表示すれば下の画像が表示される仕組みです。



  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.         
  11.         $("#inputarea").cleditor({
  12.          width:        450, // width not including margins, borders or padding
  13.          height:     177, // height not including margins, borders or padding
  14.          controls:     // controls to add to the toolbar
  15.                         "size color highlight removeformat | source",
  16.          colors:     // colors in the color popup
  17.                         "000 F00 FF0 FFF",
  18.          sizes:        // sizes in the font size popup
  19.                         "4,5,6,7",
  20.          useCSS:     false, // use CSS to style HTML when possible (not supported in ie)
  21.          docType:     // Document type contained within the editor
  22.                         '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
  23.          docCSSFile: // CSS file used to style the document contained within the editor
  24.                         "",
  25.          bodyStyle:    // style to assign to document body contained within the editor
  26.                         "margin:4px; font:14pt Arial,Verdana; cursor:text"
  27.         });
  28.         
  29.         // 背景画像を指定
  30.         $( $(".cleditorMain iframe")[0].contentWindow.document.body ).css('background-image', 'url(images/cleditor_back.png)');
  31.         $( $(".cleditorMain iframe")[0].contentWindow.document.body ).css('background-repeat', 'no-repeat');
  32.         $( $(".cleditorMain iframe")[0].contentWindow.document.body ).css('background-position', '0px 0px');
  33.         
  34.         // 表示開始位置の垂直方向を0pxとし、上の画像を表示
  35.         $('#image_1').click(function() {
  36.             $( $(".cleditorMain iframe")[0].contentWindow.document.body ).css('background-position', '0px 0px');
  37.         });
  38.         
  39.         // 表示開始位置の垂直方向を-200pxとし、上の画像を表示
  40.         $('#image_2').click(function() {
  41.             $( $(".cleditorMain iframe")[0].contentWindow.document.body ).css('background-position', '0px -200px');
  42.         });
  43.     });
  44.     </script>
  45. </head>
  46. <body>
  47.     <h3>CLEditorの背景画像を変更</h3>
  48.     <input id="image_1" type="button" value="画像1"><input id="image_2" type="button" value="画像2">
  49.     <br/><br/><br/>
  50.     <textarea id="inputarea" name="inputarea"></textarea>
  51.     <br />
  52.     <a href="index.html">戻る</a>
  53. </body>
  54. </html>




これで、「画像1」のボタンを押したときは上の画像。

49_005.png


「画像2」のボタンを押したときは下の画像が表示されるようになりました。

49_006.png




動作サンプルを以下のURLに置いておきます。
http://symfo.web.fc2.com/js-sample/gradients/sample8.html







参考URL



スタイルシートリファレンス
background-position・・・・・背景画像の表示開始位置を指定する
http://www.htmq.com/style/background-position.shtml

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




関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ