※Web関連のプログラム等を作成の備忘録的なものになります。
今回はブログなどの入力で使用されていますリッチテキストの設定等についてです。
リッチテキストは色々ありますが、今回は商用・非商用にかかわらず利用できる『elRTE』というオープンソースを使用します。
http://elrte.org/jp/
からダウンロードして
/materials/
に解凍フォルダ（elrte-1.3）ごとコピーします。
※環境に合わせて変更してください。
※例ではIDを「editor」としています。
後はなどに
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script src="/materials/elrte-1.3/js/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script><script src="/materials/elrte-1.3/js/jquery-ui-1.8.13.custom.min.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="/materials/elrte-1.3/css/smoothness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" charset="utf-8"><script src="/materials/elrte-1.3/js/elrte.min.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="/materials/elrte-1.3/css/elrte.min.css" type="text/css" media="screen" charset="utf-8"><script src="/materials/elrte-1.3/js/i18n/elrte.jp.js" type="text/javascript" charset="utf-8"></script><script src="/materials/elrte-1.3/src/elrte/js/elRTE.options.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8"> $().ready(function() { var opts = { cssClass : 'el-rte', lang : 'jp', height : 450, toolbar : 'customs',//[src/elRTE.options.jp]のtoolbars辺りでアイコン表示／非表示 cssfiles : ['/materials/elrte-1.3/css/elrte-inner.css'] } $('#editor').elrte(opts); })</script> |
表示をするところに
1 | <div id=”editor”></div> |
と入力します。
※「/elrte-1.3/src/elrte/js/」などを変更することで表示を調整することもできます（必要のないアイコンを消したりもできます）
入力情報を次のページに持っていくには
1 | <input type=”hidden” name=”editor_data” id=”editor_data_id”> |
など入れ物を用意して
1 | <input type=”button” value=”登録” onclick=”document.getElementById (‘editor_data_id’).value=$(‘#editor’).elrte (‘val’);submit ();”> |
などとすることで情報を持っていくことができます
※「$(‘#editor’).elrte (‘val’)」で入力情報を取得できます
上記の方法は一例になります
