ComfortableMexicanSofaのリッチテキストエディタでpreタグが挿入出来ない

wp-admin

3年前

ComfortableMexicanSofaのリッチテキストエディタは、デフォルトでTinyMCEを使用していますが、マウスで選択した部分にpreタグを挿入しようとするとページ全体に挿入してしまいます。
　
TinyMCEを単独でインストールして動作確認を行ったりもしたのですが、うまく選択した部分にpreタグを挿入できません。
　
そこでckeditorを使ってブログのコンテンツを作成する事にしました。

ComfortableMexicanSofaのリッチテキストエディタをデフォルトのTinyMCEから他のエディタに変更する手順もあるのですが、うまく設定できなかったので、暫定対応としてローカル環境にckeditorを導入して作成したコンテンツのソースをコピペする事にしました。
　
１）ckeditorをダウンロード
　
２）ローカルのWebサーバー内の任意のディレクトリにコピー
　
３）オンラインマニュアルの下記サンプルコードをコピーし、ckeditorのファイルのパスの部分を環境に合わせて設定
　
http://docs.ckeditor.com/#!/guide/dev_installation-section-unpacking

<!DOCTYPE html>
<html>
  <head>
      <title>A Simple Page with CKEditor</title>
      <!-- Make sure the path to CKEditor is correct. -->
      <script src="../ckeditor.js"></script>
  </head>
  <body>
      <form>
          <textarea name="editor1" id="editor1" rows="10" cols="80">
              This is my textarea to be replaced with CKEditor.
          </textarea>
          <script>
              // Replace the <textarea id="editor1"> with a CKEditor
              // instance, using default configuration.
              CKEDITOR.replace( 'editor1' );
          </script>
      </form>
  </body>
</html>

　
４）insertpreプラグインをダウンロード
http://ckeditor.com/addon/insertpre
　
５）解凍してpluginsフォルダに配置
　
６）ckeditorの設定ファイル（config.js）に下記設定を追加
　
config.extraPlugins = ‘insertpre’;
　
７）”Insert code snippet”ボタンが追加されている事を確認
　
指定した位置でこのボタンを押下するとサブウィンドウが開き、preタグで囲むコードを挿入できます。