freoカスタマイズ集

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

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

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

導入の方法

1. あらかじめ、freo公式サイトからmarkItUpをダウンロードして導入します。
2. こちら から拡張用のファイルをダウンロードします（【2018/06/10修正】）。
   ファイル構成

   markitup_upgrade
    ┗ markitup
        ┗ sets ━ default ┳ images（ボタン用画像）
                           ┣ set.js
                           ┗ style.css

3. ダウンロードしたファイルを解凍して markitup フォルダをお使いのfreoの markitup ディレクトリにアップして上書きします。

拡張版の解説

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

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

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

①色指定

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

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

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

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

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

パレットにある色を変更したい場合は、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」キーを押しながらボタンを押すと、クラス名を入れるダイヤログが表示され、クラス名を追加することができます（元々使える機能）。

⑪リンク(a)、⑫画像(img)、⑬続きを読む(<!-- pagebreak -->)

⑭ネタバレ（freoのネタバレボタン対応）

ボタンを押すと、

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

が挿入されます。

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

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

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

⑮コードスタイル

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

コードを選ぶと <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実体参照変換

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

⑰タグ消去

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

⑱プレビュー

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

⑲表作成

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

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

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

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

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

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

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

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