- お知らせ -
  • 当wikiのプログラムコードの表示を直してみました(ついでに長い行があると全体が下にぶっ飛ぶのも修正)。不具合があればBBSまでご連絡下さい。

Ruby/Ruby on Rails/FCKEditor

はじめに Edit

WYSIWYGのエディタを組み込めるJavaScriptライブラリ『FCKEditor』にて、エディタ欄を空にして送信してもFirefox 3.6では<br/>が挿入されたり、 Chromeでは&nbsp;(見た目は空白)などが挿入されてしまう仕様バグの解決方法について(IE8では問題ない様子)

けっこう既知の問題っぽくてあちこちで議論を見かけます。

実際にRailsで使用する際だと以下のような問題があるかと思います。

  • ユーザーはテキストエリアを空にして削除したつもりでも、DBに<br/>や&nbsp;等の文字列が書き込まれてしまう
  • フィールドに空を入れると削除する処理を入れていても、空にならないので削除されない
  • モデルでvalidates_presence_ofを指定して値があることをvalidationで検証しているつもりでも、それをすり抜けて中身のない投稿がされてしまう(ように見える。実際はタグが追加されているので当たり前ですけど)

問題の確認環境

  • Windows XP SP3, Windows Vista SP2
  • Firefox 3.6.3: 「ソース」に切り替えたり、送信すると<br />が挿入される
  • Chromium 5.0.393: 同上、 が挿入される
  • FCKEditor ver 2.6.4
  • FCKConfigの関係ありそうな設定は以下の通り:
    FCKConfig.EnterMode = 'br' ;		// p | div | br
    FCKConfig.ShiftEnterMode = 'br' ;	// p | div | br
    
    FCKConfig.IgnoreEmptyParagraphValue = true;
    FCKConfig.FillEmptyBlocks = false;
    

アドホックな解決方法 Edit

../Easy FCKEditorの場合はpublic/javascripts/fckcustom.js)fckconfig.jsに以下のコードを追加すると、HTMLに変換するタイミングでFCKEditorを組み込んだテキストエリアの最後の<br />や&nbsp;、<p>&nbsp;</p>(これはFCKConfig.EnterMode='p';のとき用)を削除するようになります。

動かない場合はブラウザのキャッシュを削除してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// Fixed following issues.
// * At Firefox 3.6, automatically added <br/> at last.
// * At Chrome 5.0, added &nbsp; in empty.
// * IE8 has no problem.
//
// This code maybe fixed for this issue.
// #1660 (<br type="_moz"> and <p>&#160;</p> in empty source) ? CKEditor
// http://dev.fckeditor.net/ticket/1660
//
// * referenced web pages
// patch for Drupal
// Tags like <p>&nbsp;</p> or <br /> added to empty textareas | drupal.org
// http://drupal.org/node/550428
// http://drupal.org/files/issues/wysiwyg-550428.4.patch
// test case ?
// http://dev.fckeditor.net/browser/FCKeditor/tags/2.6.4/_test/automated/tests/fckdataprocessor.html
// Components/DataProcessor &#8211; CKEditor
// http://dev.fckeditor.net/wiki/Components/DataProcessor
//
// for Debug "Realtime JavaScript Evaluator""
// http://www.teria.com/~koseki/memo/javascript/realtime_eval.html

(function(){
    // removes last <p>&nbsp;</p> or <br/> or &nbsp; on blank html
    removeLastBlankTags = function(content) {
        return content.replace(/(?:<p>(?:&nbsp;|\s*)<\/p>|<br(?:\s?\/)?>)|(?:&nbsp;)*$/i, '');
    }

    var MyDataProcessor = function() {};
    MyDataProcessor.prototype = new FCKDataProcessor();
    MyDataProcessor.prototype.ConvertToDataFormat = function(rootNode, excludeRoot, ignoreIfEmptyParagraph, format)
    {
        // call original converter
        var data = FCKDataProcessor.prototype.ConvertToDataFormat.call(this, rootNode, excludeRoot, ignoreIfEmptyParagraph, format);
        // remove tags for blank
        return removeLastBlankTags(data);
    }
    FCK.DataProcessor = new MyDataProcessor();
})();

この方法の短所:

  • FCK.DataProcessorを書き換えるFCKEditorのpluginに対応していない
    (そのまま置き換えているので)→チェーンみたいに処理をつなげばたぶん対応出来る
  • 問答無用で最後の該当文字列を削除するので、最後に該当文字列を残したい場合はこの方法は使えない(例えば、<br />や&nbps;だけの投稿や最後にそれを許す場合)。

[TODO]:そのうち本家にフィードバックしたい…。


No comment. Comments/Ruby/Ruby on Rails/FCKEditor/FirefoxやChromeにて空で投稿しても<br>や&nbsp;などが追加される不具合?

Name:

Front page   Edit Freeze Diff Backup Upload Copy Rename Reload   New Pages Search Recent changes   Help   RSS of recent changes
Last-modified: 2010-05-12 Wed 18:37:57 JST (2746d)