エントリー

freo用markItUp!拡張版の配布

【2018/06/10修正】
コメントに記載されているとおり、ダウンロードファイルmarkitup/sets/default/set.js の部分を修正しました。

導入したらこんな感じに

freoのHTMLエディタには、デフォルトでTinyMCEが添付されていますが、WYSIWYGではなく直接HTMLタグが打ちがしたいという方のために、別途markItUpも使えるよう配布されています。

しかし、表示が英語だったり使えるタグの機能が少なめなので、日本語にして機能を拡張したものを作成してみました。

導入の方法

  1. あらかじめ、freo公式サイトからmarkItUpをダウンロードして導入します。
  2. こちら から拡張用のファイルをダウンロードします(【2018/06/10修正】)。
    ファイル構成
    markitup_upgrade
    markitup
        ┗ setsdefaultimages(ボタン用画像)
                            ┣ set.js
                            ┗ style.css
  3. ダウンロードしたファイルを解凍して markitup フォルダをお使いのfreoの markitup ディレクトリにアップして上書きします。

拡張版の解説

拡張版を導入すると、markItUpのツールバーは以下のとおりになります。

102-2.jpg

各ボタンの使用方法について

丸数字は上記のツールバーの各ボタンの上にあるのと同じもので、赤字は今回追加した機能。

①色指定

ボタンにカーソルを合わせると、以下のようにパレットが表示されます。

102-3.jpg

パレットにある色見本から使用したい色を指定すると、

<span style="color:#xxxxxx"></span>

が挿入されます(ピンク字の部分は任意)。

ボタンをそのままクリックした場合は、色指定のダイヤログが表示されるので、色コード(#000000やカラー名など)を指定して「OK」ボタンを押すと、同様に設定可能です。

102-4.jpg

パレットにある色を変更したい場合は、markitup/sets/default/sets.js の22~44.行目あたりにある

{name:'黒色',  openWith:'<span style="color:#000000">',   closeWith:'</span>', className:"col1-1" },

緑字の部分を適宜変更して下さい。
また、markitup/sets/default/style.css の97~155行目あたりにある上記のピンク字のクラス名に該当する箇所の

.markItUp .colors .col1-1 a {
  background:#000000;
}

緑字の部分も上の変更に合わせて変更して下さい。

②太字(strong)

「alt」キーと同時にボタンを押すと、<strong></strong> ではなく、<b></b> が挿入可能です(元々使える機能)。

③打消(del)、④箇条書き(ul)、⑤番号付き箇条書き(ol)、⑥リスト(li)
⑦見出し4(h4)、⑧見出し5(h5)、⑨見出し6(h6)、⑩段落(p)

⑦~⑩では、「alt」キーを押しながらボタンを押すと、クラス名を入れるダイヤログが表示され、クラス名を追加することができます(元々使える機能)。

102-5.jpg

⑪リンク(a)、⑫画像(img)、⑬続きを読む(<!-- pagebreak -->)
⑭ネタバレ(freoのネタバレボタン対応)

ボタンを押すと、

<div class="hidearea">
<p>ここにネタバレ文...</p>
</div>

が挿入されます。

「alt」キーを押しながらボタンを押すと、「ボタンのタイトル」ダイヤログが表示され、タイトルを入力して「OK」ボタンを押すと、

<div class="hidearea" title="(入力したタイトル)">
<p>ここにネタバレ文...</p>
</div>

と挿入され、ネタバレボタンのタイトルを任意のものにすることができます。

⑮コードスタイル

ボタンにカーソルを合わせると、以下のとおりにメニューが表示されます。

102-6.jpg

コードを選ぶと <code></code>、整形を選ぶと <pre></pre>、引用を選ぶと <blockquote></blockquote> が挿入されます。コードと整形では「alt」キーを押しながらそれぞれのボタンを押すと、クラス名を入れるダイヤログが表示され、クラス名を追加することができます。

またシンタックスハイライト用にPrism.js用のコードも挿入できるようにしてあります。メニューを選ぶとcodeクラス名を入れるダイヤログが表示され(あらかじめ「language-」がダイヤログに設定済み)、導入したい種類のコード名(例:HTMLの場合markup)を追加して「OK」ボタンを押すと、

<pre class="line-numbers" data-line=""><code class="language-markup"></code></pre>

が挿入されます。highlight.jsなど別のシンタックスハイライト(設定に <pre><code></code></pre> を使用するもの)を使用するなど挿入するタグの中身を変更したい場合は、markitup/sets/default/sets.js の67行目あたりにある

{name:'Prism.jsコード', className:'precode', openWith:'<pre class="line-numbers" data-line=""><code class="[![codeクラス名:!:language-]!]">', closeWith:'</code></pre>\n'}

緑字の部分を適宜変更して下さい。

⑯HTML実体参照変換

選択した文字列内にある &<>をそれぞれ &amp;&lt;&gt; に変換します。

⑰タグ消去

選択した文字列内にあるHTMLタグを全て消去します。

⑱プレビュー

編集画面の下にプレビュー画面が表示されます。

⑲表作成

ボタンを押すと、「何列ですか?」とダイヤログが表示されるので、列の数を入れて「OK」ボタンを押します。

102-7.jpg

次に「何行ですか?」とダイヤログが表示されるので、行の数を入れて「OK」ボタンを押すと、

<table>
 <tr>
  <td>ここにテキスト...</td>
  <td>ここにテキスト...</td>
 </tr>
 <tr>
<td>ここにテキスト...</td>
<td>ここにテキスト...</td>
</tr>
</table>

が挿入されます(上記は2列×2行の場合)。

また、「alt」キーを押しながらボタンを押すと、「何行ですか?」とダイヤログの後に、各列のタイトルのダイヤログが表示され、各列の表題を設定することができます。

102-8.jpg

この場合は設定が終わると、

<table>
 <tr>
<th>タイトル</th>
<th>タイトル</th>
</tr>
<tr> <td>ここにテキスト...</td> <td>ここにテキスト...</td> </tr> <tr> <td>ここにテキスト...</td> <td>ここにテキスト...</td> </tr> </table>

が挿入されます(上記は2列×2行の場合)。

ページ移動

関連エントリー

コメント

kota

とっても便利なカスタムの配布をありがとうございます。
1点ご報告です。
set.jsの14行目
onCtrlEnter: {keepDefault:false, openWith:'\n</p>', closeWith:'<p>\n' },
で、</p>が前に来てるので使いづらく感じました。

  • 2018/06/07 13:58:17

ccc

kotaさんご指摘ありがとうございます。

1点ご報告です。
set.jsの14行目
onCtrlEnter: {keepDefault:false, openWith:'\n</p>', closeWith:'<p>\n' },
で、</p>が前に来てるので使いづらく感じました。

とのことですので、この部分を

onCtrlEnter: {keepDefault:false, openWith:'</p>\n<p>' },

から元の

onCtrlEnter: {keepDefault:false, openWith:'\n<p>', closeWith:'</p>\n' },

に修正して配布させていただきます。

  • 2018/06/10 13:39:46

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed