icon markItUp (2011/01/25)
久々にHTMLネタ。
今更ながら、jQueryでリッチテキストエディタを見つけたので。

markItUp home
世の中のCMS、Blogソリューションにも多く導入されているので信頼性は高いようだ。

まず大きく3つに分類される。

メインスクリプト

markitup/jquery.markitup.js

設定

markitup/sets/set.js

スキン

markitup/skins/markitup/style.css
markitup/skins/markitup/images/

パスはhtmlタグで任意に変更してやればよい。

ファイルロード

    <link rel="stylesheet" type="text/css" href="stylesheets/markitup/skins/markitup/style.css" /> 
    <link rel="stylesheet" type="text/css" href="stylesheets/markitup/sets/html/style.css" /> 

    <script type="text/javascript" src="javascripts/jquery/jquery.js"></script> 
    <script type="text/javascript" src="javascripts/jquery/markitup/jquery.markitup.js"></script> 
    <script type="text/javascript" src="javascripts/jquery/markitup/sets/html/set.js"></script> 

ここでは、別途「Basic Html set」を公式ページからダウンロードして利用しました。
Add-onsも用意されているので、機能拡張も可能です。

markItUp Download central

markItUp実行

<script type="text/javascript"> 
<!--
$(document).ready(function()	{
   $('#markItUp').markItUp(mySettings);
});
-->
</script>
ここでの「mySettings」は、set.jsで定義されたもの。
mySettings = {
	onShiftEnter:	{keepDefault:false, replaceWith:'<br />\n'},
	onCtrlEnter:	{keepDefault:false, openWith:'\n<p>', closeWith:'</p>\n'},
	onTab:			{keepDefault:false, openWith:'	 '},
	markupSet: [
		{name:'Heading 1', key:'1', openWith:'<h1(!( class="[![Class]!]")!)>', closeWith:'</h1>', placeHolder:'Your title here...' },
		{name:'Heading 2', key:'2', openWith:'<h2(!( class="[![Class]!]")!)>', closeWith:'</h2>', placeHolder:'Your title here...' },
		{name:'Heading 3', key:'3', openWith:'<h3(!( class="[![Class]!]")!)>', closeWith:'</h3>', placeHolder:'Your title here...' },
		{name:'Heading 4', key:'4', openWith:'<h4(!( class="[![Class]!]")!)>', closeWith:'</h4>', placeHolder:'Your title here...' },
		{name:'Heading 5', key:'5', openWith:'<h5(!( class="[![Class]!]")!)>', closeWith:'</h5>', placeHolder:'Your title here...' },
		{name:'Heading 6', key:'6', openWith:'<h6(!( class="[![Class]!]")!)>', closeWith:'</h6>', placeHolder:'Your title here...' },
		{name:'Paragraph', openWith:'<p(!( class="[![Class]!]")!)>', closeWith:'</p>' },
		{separator:'---------------' },
		{name:'Bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' },
		{name:'Italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)' },
		{name:'Stroke through', key:'S', openWith:'<del>', closeWith:'</del>' },
		{separator:'---------------' },
		{name:'Ul', openWith:'<ul>\n', closeWith:'</ul>\n' },
		{name:'Ol', openWith:'<ol>\n', closeWith:'</ol>\n' },
		{name:'Li', openWith:'<li>', closeWith:'</li>' },
		{separator:'---------------' },
		{name:'Picture', key:'P', replaceWith:'<img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" />' },
		{name:'Link', key:'L', openWith:'<a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Your text to link...' },
		{separator:'---------------' },
		{name:'Clean', className:'clean', replaceWith:function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } },
		{name:'Preview', className:'preview', call:'preview' }
	]
}

各ボタンの機能をオブジェクトとして追加するが、name、openWith、closeWith
といったプロパティやコールバック関数が用意されている。