久々に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タグで任意に変更してやればよい。

ファイルロード

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

markItUp Download central

markItUp実行

ここでの「mySettings」は、set.jsで定義されたもの。 [JScript] mySettings = { onShiftEnter: {keepDefault:false, replaceWith:'
\n'}, onCtrlEnter: {keepDefault:false, openWith:'\n

', closeWith:'

\n'}, onTab: {keepDefault:false, openWith:' '}, markupSet: [ {name:'Heading 1', key:'1', openWith:'<h1(!( class="[![Class]!]")!)>', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 2', key:'2', openWith:'<h2(!( class="[![Class]!]")!)>', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 3', key:'3', openWith:'<h3(!( class="[![Class]!]")!)>', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 4', key:'4', openWith:'<h4(!( class="[![Class]!]")!)>', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 5', key:'5', openWith:'<h5(!( class="[![Class]!]")!)>', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 6', key:'6', openWith:'<h6(!( class="[![Class]!]")!)>', closeWith:'', placeHolder:'Your title here...' }, {name:'Paragraph', openWith:'<p(!( class="[![Class]!]")!)>', closeWith:'

' }, {separator:'---------------' }, {name:'Bold', key:'B', openWith:'(!(|!|)!)', closeWith:'(!(|!|)!)' }, {name:'Italic', key:'I', openWith:'(!(|!|)!)', closeWith:'(!(|!|)!)' }, {name:'Stroke through', key:'S', openWith:'', closeWith:'' }, {separator:'---------------' }, {name:'Ul', openWith:'

\n', closeWith:'

\n' }, {name:'Ol', openWith:'

\n', closeWith:'

\n' }, {name:'Li', openWith:'

', closeWith:'

' }, {separator:'---------------' }, {name:'Picture', key:'P', replaceWith:'' }, {name:'Link', key:'L', openWith:'', closeWith:'', placeHolder:'Your text to link...' }, {separator:'---------------' }, {name:'Clean', className:'clean', replaceWith:function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } }, {name:'Preview', className:'preview', call:'preview' } ] } [/JScript]

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