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で定義されたもの。 [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:'', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 2', key:'2', openWith:'', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 3', key:'3', openWith:'', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 4', key:'4', openWith:'', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 5', key:'5', openWith:'', closeWith:'', placeHolder:'Your title here...' }, {name:'Heading 6', key:'6', openWith:'', closeWith:'', placeHolder:'Your title here...' }, {name:'Paragraph', openWith:'', 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:'[![Alternative text]!]' }, {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 といったプロパティやコールバック関数が用意されている。
    Cloud9 を起動する -初心者編-
    gcloud で GCEインスタンスを起動してみる
    AWS CLI と jq でインスタンス一覧を整形して表示
    React と Laravel7 のプロジェクトを作成する
    Homebrewインストール-2020年版
    3直線で囲まれた範囲塗りつぶし
    PuLP で線形最適化問題を解く
    カスタムのペジネーションを作る
    node-sass を使って sass をコンパイルする
    Log ファサードでSQLログを分離して書き出す
    いちから始める Docker - 複数のコンテナを使う - (2020年)
    いちから始める Docker - docker-compose を使う - (2020年)
    AWS ECR を使ってみる
    Laravel7 でマルチ認証
    Mac に AWS Client を設定する
    Laravel 7 リリース
    v-html でHTML表示する
    Laravel で Vue コンポーネントを使う
    Laravel で Nuxt.js を使ってみる(Docker環境)
    いちから始める Docker -コンテナをビルド- (2020年)
    いちから始める Docker -起動してみる- (2020年)
    Mac で MySQL(8系)
    composer で vendor がインストールできない
    Eloquent の日付を Carbon で扱う
    webpack 4 入門(npm編)
    [Mac]容量を減らす
    DIコンテナはじめ
    freee SDKを Laravel で使ってみる
    freee API を使ってみる
    Segueを利用しない画面遷移
    Xcode11.3 で XVim2 を利用する
    Codable で JSONを読み込み
    Webpack入門(yarn編)
    MacからLaradock PostgreSQLで接続エラー
    Dockerで不要なコンテナ・イメージを削除
    Mac で Laradock の構築
    Composer インストール
    yarn インストール&プロジェクト作成
    Laravel 6.x 構築(Homestead編)
    nvm インストール
    npm install が Mac でエラー
    HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
    DI(依存性注入)
    [Ubuntu]Let's Encryptで無料の証明書を利用する
    [Apache]Apache2.4のアクセス制限が変更
    [Ubuntu]rootのログインとsudo権限追加
    タミヤ マイコンロボット工作セットをMacに接続してみた
    pgAdimn4 でブラウザで開けなくなる
    Java8 を HomebrewとjEnvで構築
    Android Studio環境構築 2019