記事をビジュアルモードで記入していた際に、
その記事の文中に画像をはめ込んで、
その画像の説明を改行して文字による説明文を記載した時、
更新を押すと入力の時とは違って、
画像が前の文字の後ろに並んで表示されてしまう。
何度も修正しても直ったり直らなかったりして不都合がおきてしまった。
そうであれば、直接テキストモードでHTMLのタグ"<br/ >"を書き込んで直るかと思いきや、
エディターモードに戻ったり、更新したりすると、そのタグが消えてしまい、結局不都合が起きてしまうのです。
いろいろと調査した結果、標準のエディターにはまだまだ不都合な動作があるとわかり、
もう少し解決策を模索した結果、"TinyMCE Advanced"というプラグインで解決することがわかりました。
今回導入した"TinyMCE Advanced"について説明いたします。
TinyMCE Advancedのメリット
標準装備（デフォルト）のエディタはシンプルであり、
もっと効率よく記事を書きたい、もと色々な装飾をしてみたいという場合に、
"TinyMCE Advanced"をインストールすることにより、
編集ボタンを増やしたり、指定した操作のクリック1つで実行できたり、
そのほか表の挿入・編集、YouTube動画コードの挿入、画像周りの余白操作ができたりします。
TinyMCE Advancedの導入・設置方法
- 管理画面から[プラグイン][新規追加][おすすめ]のクリックで"TinyMCE Advanced"を探し、その中にある[今すぐインストール]をクリックします。
- 管理画面から[プラグイン]"TinyMCE・・・"[有効化]をクリックし[設定項目]となれば、設定可能となります。
- 一覧の[設定項目]または[設定][TinyMCE・・・]をクリックし"エディタ設定"画面にかわります。
ここで使用するボタンを選択することが可能です。
デフォルト機能で使用しないアイコンは下側に持っていって、アイコンの順番を並び替えたりして、自分好みの使いやすい様カスタマイズできます。 - 高度なオプションで必ず[段落タグの保持]を設定していただきたい。
冒頭にもあった段落の不都合を解消するためです。<p><br/>タグが削除されないように設定できます。
スポンサーリンク
TinyMCE Advancedのアイコンの説明
| アイコン | 説 明 |
 |
太字 |
 |
イタリック文字 |
 |
下線 |
 |
|
 |
左寄せ揃え |
 |
中央揃え |
 |
右寄せ揃え |
 |
両端揃え |
 |
切り取り |
 |
コピー |
 |
貼り付け |
 |
インデントを減らす |
 |
インデントを増やす |
 |
書式設定をクリア |
 |
下付きあ |
 |
上付きか |
 |
横ライン |
 |
画像の挿入/編集 |
 |
印刷 |
 |
アンカーリンクの挿入 |
 |
検索して置換する |
 |
ブロック（枠）を表示 |
 |
非表示文字を表示 |
 |
ソースコードを表示（編集時） |
 |
ソースコードを表示 （実行時） |
 |
フルスクリーン |
 |
日時を挿入 |
 |
動画を挿入/ 編集 |
 |
半角スペースの挿入 |
 |
左から右に文字入力（通常） |
 |
右から左に文字入力 |
 |
引用タグの挿入 |
 |
リストタグを挿入 |
 |
ナンバータグを挿入 |
 |
文字にリンクを挿入 |
 |
リンクを取消 |
 |
顔文字の挿入( 😥 ) |
 |
一つ前に取り消し |
 |
取消した操作を元に |
 |
文字の背景色 |
 |
ツールバー切替 |
 |
テキストとしてペースト |
 |
特殊な文字（∞） |
 |
続きを読むタグ挿入 |
 |
文字色の変更 |
 |
表作成 |
 |
段落～見出し６ |
 |
見出し、ブロック、インライン配置の設定 |
 |
8～36px の設定 |
 |
フォント変更 |
※下付き文字と上付き文字ですが、この編集画面では逆になりますが、表示は上は上下は下に表示されてます。