Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

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

ComfortableMexicanSofaのリッチテキストエディタは、デフォルトでTinyMCEを使用していますが、マウスで選択した部分にpreタグを挿入しようとするとページ全体に挿入してしまいます。
 
TinyMCEを単独でインストールして動作確認を行ったりもしたのですが、うまく選択した部分にpreタグを挿入できません。
 
そこでckeditorを使ってブログのコンテンツを作成する事にしました。
 
ComfortableMexicanSofaのリッチテキストエディタをデフォルトのTinyMCEから他のエディタに変更する手順もあるのですが、うまく設定できなかったので、暫定対応としてローカル環境にckeditorを導入して作成したコンテンツのソースをコピペする事にしました。
 
1)ckeditorをダウンロード
 
2)ローカルのWebサーバー内の任意のディレクトリにコピー
 
3)オンラインマニュアルの下記サンプルコードをコピーし、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>

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