たちまちメモる

開発中に気になったことをメモしてます。

ミニマルHTMLエディタ(ブラウザアプリ)

f:id:hamkiti:20141204190322p:plain

―ただ管理用画面からサイト上のお知らせ情報を更新するために
色を変えたり、太字にしたり…HTMLでちょこっとだけ装飾できれば、それでいい。

後は、(バグの元になるので)何もいらない。(笑)


もっというと本当は『タグの部屋』でも全然よかったんだけど
あの手のツールで出力されるソースはFONTタグ(HTML5非推奨)だったりするので使うのはあきらめた。


そ・こ・で・

入力用UIで欲しいのは、『TinyMCE』のようなクオリティ
出力で得たいのは、『タグの部屋』レベルのシンプルなコード

をコンセプトにこんなものをとりあえず作っちゃいました。

↓コレ
ミニマルなHTMLエディタ


編集したHTMLのソースコードは左端のボタンを押すと表示されます。
f:id:hamkiti:20141204191110p:plain

ソース解説

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/