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タグで囲むコードを挿入できます。