ミニマルHTMLエディタ(ブラウザアプリ)
―ただ管理用画面からサイト上のお知らせ情報を更新するために
色を変えたり、太字にしたり…HTMLでちょこっとだけ装飾できれば、それでいい。
後は、(バグの元になるので)何もいらない。(笑)
もっというと本当は『タグの部屋』でも全然よかったんだけど
あの手のツールで出力されるソースはFONTタグ(HTML5非推奨)だったりするので使うのはあきらめた。
そ・こ・で・
入力用UIで欲しいのは、『TinyMCE』のようなクオリティ
出力で得たいのは、『タグの部屋』レベルのシンプルなコード
をコンセプトにこんなものをとりあえず作っちゃいました。
↓コレ
ミニマルなHTMLエディタ
編集したHTMLのソースコードは左端のボタンを押すと表示されます。
ソース解説
javascript
TinyMCEを呼び出します。
デフォルトだとリッチすぎるのでオプション設定でシンプルなコードを吐き出すようにデチューンしてます。
ものぐさな人のためによく使いそうな書式も
style_formatsオプションを記述することで追加しています。
※2014/12/08 pluginsでlinkオプションを付け忘れていたので修正しました。
tinymce.init({ selector: "textarea#minimal_html_editor", height:600, forced_root_block : '', //外側の囲みタグはいらない force_p_newlines : false, //<p>タグで囲まない force_br_newlines : true, //<br>タグで改行する font_formats:'', menubar : false,//メニューバーもいらない statusbar:false,//ステータスバーもいらない style_formats: [ {title:'黒字', inline: 'span',styles:{color: '#000000'}}, {title:'赤字', inline: 'span', styles: {color: '#ff0000'}}, {title:'緑字', inline: 'span', styles: {color: '#009900'}}, {title:'青字', inline: 'span', styles: {color: '#0000ff'}}, ], plugins: [ "textcolor paste fullscreen code link" ], toolbar: "code | styleselect | forecolor backcolor bold italic underline strikethrough | link | fullscreen ", paste_as_text: true //ペーストはプレーンテキスト。 });
HTML
textareaタグの部分がエディタになります。
<h1>ミニマルなHTMLエディタ</h1> <!-- Place this in the body of the page content --> <form method="post"> <textarea id="minimal_html_editor"></textarea> </form>
後はCSSをちょっといじって調整しただけで完成。
【参考リンク】
タグの部屋
http://tagnoheya.com/
(ガラケーサイトをやっていた時はよくお世話になっていました。)
TinyMCE
http://www.tinymce.com/