投稿エディタ(TinyMCE等)のカスタマイズ
※[ ]内は各プラグインのID名
TinyMCE関連
- TinyMCE(英語)
TinyMCEの公式サイト - TinyMCEのショートカット一覧【2018/02/03変更】
動作 | 4.x | 3.5.x |
---|---|---|
<p>が挿入されて改行 | Enter | |
<br>が挿入されて改行 | Shift+Enter | |
ブロックをh1~h6に変換 | Shift+Alt+[1-6] | Ctrl+[1-6] |
ブロックを<p>に変換 | Shift+Alt+7 | Ctrl+7 |
ブロックを<div>に変換 | Shift+Alt+8 | Ctrl+8 |
ブロックを<address>に変換 | Shift+Alt+9 | Ctrl+9 |
太字にする | Ctrl+B | |
斜体にする | Ctrl+I | |
下線を付ける | Ctrl+U | |
リンクの挿入/編集 | Ctrl+K | |
すべてを選択 | Ctrl+A | |
カット | Ctrl+X | |
コピー | Ctrl+C | |
ペースト | Ctrl+V | |
テキスト形式で貼り付け | Ctrl+Shift+V | |
元に戻す | Ctrl+Z | |
やり直す | Ctrl+YまたはCtrl+Shift+Z | |
検索 | Ctrl+F | |
メニューバーにフォーカス | Alt+F9 | - |
ツールバーにフォーカス | Alt+F10 | - |
TinyMCE4関連
※2017/09/03更新のver1.20.0よりTinyMCE4が同梱されるようになりました。
- freoにTinyMCE4を導入する(Web Liberty&freoカスタマイズ集)【2013/07/19追加】
- TinyMCE4をカスタマイズする(Web Liberty&freoカスタマイズ集)【2013/07/19追加】
TinyMCE4の主なカスタマイズ - freoでTinyMCE4をカスタマイズしてみる(虹色ミツバチ/freoTIPS)【2017/09/26追加】
1.20.0時点でのTinyMCE4設定のカスタマイズ方法(テキストエリアの指定、ボタンの追加、ツールバーの追加、カスタマイズ例)
追加プラグイン関連
- TinyMCE4でTinyMCE3.xのプラグインを使用する(Web Liberty&freoカスタマイズ集)【2013/09/30追加】
TinyMCE4にrubyタグ入力プラグインを導入⇒↓TinyMCE4用rubyタグ入力プラグインで対応 - TinyMCE4用rubyタグ入力プラグイン(Web Liberty&freoカスタマイズ集)【2017/09/26追加】
TinyMCE4用のrubyタグ入力プラグイン(ルビタグ変換プラグイン用の入力プラグインもあり) - TinyMCE4用ネタバレ入力プラグイン(Web Liberty&freoカスタマイズ集)【2017/09/26追加】
TinyMCE4用のネタバレ文入力プラグイン
TinyMCE3.x設定関連
- TinyMCE3.xの概要オプションのドキュメント(TinyMCEの公式サイト、英語)【2016/05/05追加】
js/admin.jsのTinyMCE設定方法を解説 - TinyMCEで登録編集画面の本文の文字が小さくなってしまうのを解消するには(Web Liberty&freoカスタマイズ集)
js/common.jsの設置パスとcss/common.cssの位置関係が正しくないから起きる現象の模様。Ver 1.10.0以降でセットアップを一からやりなおすと自動的に設置パスが書き換わる(サーバによってはできないがパスの書き方は教えてくれる)のでこの現象は起きない(と思う) - freoに付属しているTinyMceのボタンのカスタマイズWeb Liberty&freoカスタマイズ集)
- TinyMce:ボタンやプラグインの追加方法(freo&WebDiaryProメモ)【2014/12/08追加】
- ページ・エントリー登録時のタグ挿入について(freo.jpサポート)【2016/05/05追加】
タグの追加やdivやspanに特定のクラスやスタイル名が入ったタグを入れる方法など - freoでの記事投稿(TinyMCE)を便利にする小技集(海月屋敷)
段落と改行の操作を逆転させる、水平線<hr>を挿入するためのボタンを表示させる、不要ボタンを消去し、配置も変更して1行配列にする、コードタグを追加する、「書式」ドロップダウンリストをスクロールさせず全表示させる - freoでTinyMCEのアイコンを増やしてみた(Arcadia Elysium)
- TinyMceのフォントサイズ選択ボックスを追加する(Web Liberty&freoカスタマイズ集)
- TinyMCEにフォント選択欄を追加する(CROSSROAD lab)※リンク切れ
※TinyMCEにフォント選択欄を追加するにはTinyMCE3.xのドキュメントのtheme_advanced_fonts(英語)を参照すること【2016/05/05追加】 - freoで絵文字を使うには(Web Liberty&freoカスタマイズ集)
TinyMCE付属の絵文字プラグインの導入方法 - 編集画面で複数のテキストエリアをHTMLエディタに変更する方法(虹色ミツバチ/freoTIPS)【2015/07/20追加】
オプションでテキストエリアを増やした時など、編集画面内にある複数のテキストエリアをHTMLエディタに変更する方法 - TinyMCEのテンプレートにメディア管理のファイルを使う(Web Liberty&freoカスタマイズ集)
エントリーやページの登録に使えるテンプレートとしてメディア管理で作成・編集したファイルをTinyMCEのテンプレートプラグインで使う - プラグインの編集画面のテキストエリアをHTMLエディタに変更する方法(虹色ミツバチ/freoTIPS)【2015/07/20追加】
プラグインの編集画面でもHTMLエディタを利用する方法 - TinyMCEをHTML5に対応させるための設定(Web Liberty&freoカスタマイズ集より抜粋)
js/admin.jsのtinyMCE.init({以降の部分に
schema: "html5",
を追加。
- freoのカスタマイズ(FireFoxを使うとコピペができない)(みさきる!)
FireFoxでコピペを使う方法
追加プラグイン関連
- TinyMce:選択文字列をpre,codeで囲むボタン(freo&WebDiaryProメモ)【2014/12/08追加】
文字を選択した状態でボタンを押すとPreとCodeタグで2重に囲むプラグインと導入方法 - TinyMce:[$FILE○]オプションファイル挿入ボタン(freo&WebDiaryProメモ)【2015/01/31追加】
押すと本文テキストエリアのカーソルの位置に[$FILE○]が入るようにするボタン - TinyMCEにネタバレボタンを追加する方法(Web Liberty&freoカスタマイズ集)
あくまでも簡易的 - TinyMce:選択文字列をネタバレタグで囲むボタン(freo&WebDiaryProメモ)【2015/04/14追加】
押すと本文テキストエリアのカーソルの位置に<div class="hidearea">と</div>が入るようにするボタン - freo でシンタックスハイライト(10press)※リンク切れ
SyntaxHighlighterまたはgoogle-code-prettifyの導入方法⇒※syntaxhlプラグインを導入する模様 - YouTube動画を貼り付けるTinyMCEプラグイン(colorboxで表示)(Web Liberty&freoカスタマイズ集)
- YouTube動画を貼り付けるTinyMCEプラグイン(埋め込み表示)(Web Liberty&freoカスタマイズ集)
- [freo向け]ブログに貼りまくったYouTubeを軽くする(みさきる!)⇒トップページ関連
- freo向け?ニコニコ動画 外部プレイヤータグ生成(みさきる!)
ニコニコ動画のURLを入れるとTinyMCEのHTMLソースに貼り付けるタグを作成するphpスクリプト - TinyMCEにrubyタグ入力プラグインを導入する(Web Liberty&freoカスタマイズ集)
※ルビを振る方法としては、上記以外にSmartyのプラグイン機能を使ってルビの表示を置換してみる(龍の棲む場所/freoTIPS)もある - TinyMCEにTypePadの絵文字パレットを導入するプラグイン(愛知県豊川市の工務店 りんぐりんぐの家スタッフブログ)
改行処理・自動整形関連
- 記事本文での改行について(freo.jp)
- 要素をXHTMLモードからHTMLモードにするための設定(Web Liberty&freoカスタマイズ集より抜粋)
<br />が&<br>になるとか...。デフォルトはXHTMLモード
js/admin.jsのtinyMCE.init({以降の部分に
element_format : "html",
を追加。
- 【注意】freoのエントリーギャラリー表示のメディアファイルを限定する(Web Liberty&freoカスタマイズ集)を導入している場合にHTMLモードにすると、メディア挿入した画像のタグが<img ~ />にならないためにエントリーギャラリー表示プラグインでメディア挿入した画像が表示されない問題があるので、上記記事に記載の修正をすること。【2013/06/12追加⇒2016/06/16修正】
- TinyMCE 編集データに追加されるPタグを無効にする(MT Systems)
- 本文のHTMLソースに を入れない方法(freo.jpサポート)
- TinyMCEでspanが挿入されるのを防ぐ(しぐれづき)
- TinyMCEにおける自動整形の問題(freo.jpサポート)【2014/04/05追加】
TinyMCEのHTML編集画面で<br />の後で改行して表示させる - 自動整形で消されてしまうタグを残す(freo&WebDiaryProメモ)【2014/12/08追加】
VIDEOやSOURCEなど、TinyMceの自動整形で勝手に消されてしまうタグを残す - altを設定しないとalt=""と勝手になるのを防ぐ(【freo】Web Liberty総合2【Web Diary Pro】@2ch)【2016/06/26追加】
markItUp!関連
- markItUp! Universal Markup jQuery Editor(英語)
markItUp!の公式サイト - WYSIWYGではないHTMLエディタを導入する(freo.jp)
markItUp!の導入方法
- markItUp!のタグボタンを追加する(青空のドン底は)
blockquoteタグボタンを追加 - markItUp!にカラーパレットボタンをつける(青空のドン底は)【2013/08/18追加】
- markItUp!のプレビューにサイトデザインのCSSを適用する(青空のドン底は)【2013/11/29追加】
- markItUp!のカスタマイズ(輝け!はっさく)【2015/11/29追加】
markItUp!の投稿画面のカスタマイズ(投稿時に使いたいタグをメニューに増やす) - 画像の下にコメントを出す(輝け!はっさく)【2015/11/29追加】
markItUp!でどこから画像追加しても、pタグに囲まれたimgタグとクラスimgのspanタグを出力させる - 手入れをいくつか(輝け!はっさく)【2015/11/29追加】
markItUp!でのネタバレボタン作成実装&メニュー用画像 - 【markItUp!】YouTubeのサムネイル用テーブルボタン追加(那由他屋)【2016/06/26追加】
サムネイル+リンク形式のYouTube動画をmarkItUp!のボタンで貼り付ける方法 - 【markItUp!】後日追記用の日付挿入ボタン追加メモ (那由他屋)【2016/06/26追加】
markItUp!のDate of the dayアドオンで表示される日時のフォーマットの改変メモ - 【markItUp!】HTML文字実体(数値)参照変換ボタンをつくる (那由他屋)【2018/12/30追加】
markItUp!のEscape Html special charsアドオンを使わずにHTML文字実体(数値)参照に変換する
markItUp!関連プラグイン
- markitup!でpタグとbrタグを自動挿入できるようにしてみる(タグ付与プラグイン)[tag_convert](龍の棲む場所/freoTIPS)
その他のエディタ関連
- freoにMarkdown記法を導入してみました(metal-mad.com)※リンク切れ
PHP Markdownの導入方法
freoにMarkdownを導入する方法(kirsche*)にて超簡易メモ的に掲載【2016/06/26追加】 - PageDown-Bootstrapで管理ページ作成(metal-mad.com)※リンク切れ
PageDown-Bootstrap(pagedownとTwitter Bootstrapを使用したMarkdownエディター)を使用
※一部、管理画面(admin)のカスタマイズとデータ登録関連の「エントリー・ページ登録/編集関連のプラグイン」に移動しました。
※ここに載っていない情報が何かあれば...情報を追加・編集する
※編集は面倒・やり方が分からない場合は、コメント欄に書いていただければ有志の方で編集します。
- 最終更新:2018-12-30 18:22:48