ユーティリティ

2018年04月

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 - - - - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freo用markItUp!拡張版の配布

導入したらこんな感じに

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

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

導入の方法

  1. あらかじめ、freo公式サイトからmarkItUpをダウンロードして導入します。
  2. こちら から拡張用のファイルをダウンロードします。
    ファイル構成
    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行の場合)。

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)