3

CKEditor (DOM への AJAX 更新に関連する多くの不思議な問題が発生していました) を優れた Redactor に置き換えました。以前は、CKEditor プラグインを使用して、リッチ テキスト エディターの文字数を取得していました。Redactor で同じことを達成するにはどうすればよいですか? 何も組み込まれておらず、使用する「プラグイン」アーキテクチャもありません。

4

3 に答える 3

7

私はこれに刺されました。同じことを達成するためのより良い方法があると確信していますが、同じ修正で他の誰かにとって良いスタートになる場合に備えて投稿します.

次のコードは、クラス「richText」を持つテキストエリア フィールドにリッチ テキスト エディタを追加し、テキストエリアで maxlength 属性が使用されている場合にのみ文字数を追加します。

<textarea class="richText" maxlength="100"></textarea>

ここでは、JavaScript に CSS を含めました。実際には、これを別のcssファイルに取り出します。

var initRichText = function () {
    $("textarea.richText").redactor({
        buttons: ['bold', 'italic', '|', 'unorderedlist', 'orderedlist'],
        keyupCallback: function (obj, event) {
            var max = obj.$el.getEditor().next().attr("maxlength");
            if (typeof max !== "undefined") {
                var current = obj.$el.getCode().length;
                var $box = obj.$el.closest(".redactor_box");
                var $indicator = $(".indicator", $box);
                if ($indicator.size() === 0) {
                    $box.append($("<div class='indicator' style='position:absolute;z-index:30;top:7px;right:7px;'><span class='current'>" + current + "</span> of <span class='max'>" + max + "</span> characters remaining</div>"));
                } else {
                    $(".current", $indicator).text(current);
                    $(".max", $indicator).text(max);
                }
                if (current >= max) {
                    $box.css("border", "1px solid #ff0000");
                    $indicator.css("color", "#ff0000");
                } else {
                    $box.css("border", "1px solid #DDDDDD");
                    $indicator.css("color", "#000000");
                }
            }
        }
    });
};
$(function(){
    initRichText();
});

編集: MForMarlon が言うように、このコードを書いてから redactor.js が変更されました。非常に奇妙な偶然により、私たちは今日この作業に取り組んでいましたが、1 年以上触れていませんでした! 変。とにかく、これが Redactor v9.2.5 で動作する最新バージョンです。ユーザーが入力を開始したときではなく、リッチ テキスト エディターが最初に読み込まれたときに initCallback を使用して文字カウンターを適用していることに注意してください。また、「プレーン テキストとして貼り付け」モーダルを追加したため、keyupCallback の代わりに changeCallback を使用しています ( redactor.js pastePlainText を参照してください。代わりに html を貼り付けるにはボタンが必要です)。と同様に入力します。

$(".richText").redactor({
    shortcuts: false,
    buttons: ['bold', 'italic', '|', 'unorderedlist', 'orderedlist', '|', 'html', 'pasteAsPlainText'],
    plugins: ['pasteAsPlainText'],
    initCallback: function (event) {
        var max = this.$editor.next().attr("maxlength");
        if (typeof max !== "undefined" && max > 0) {
            var html = this.get();
            var current = html.length;
            var remaining = max - current;
            this.$box.append($("<div class='indicator' style='position:absolute;z-index:30;top:7px;right:7px;'><span class='current'>" + remaining + "</span> of <span class='max'>" + max + "</span> characters remaining</div>"));
        }
    },
    changeCallback: function (event) {
        var max = this.$editor.next().attr("maxlength");
        if (typeof max !== "undefined" && max > 0) {
            var html = this.get();
            var current = html.length;
            var remaining = max - current;
            var $indicator = $(".indicator", this.$box);
            $(".current", $indicator).text(remaining);
            $(".max", $indicator).text(max);
            if (current >= max) {
                this.$box.css("border", "1px solid #ff0000");
                $indicator.css("color", "#ff0000");
            } else {
                this.$box.css("border", "1px solid #DDDDDD");
                $indicator.css("color", "#000000");
            }                
        }
    }
});
于 2012-09-14T10:52:04.900 に答える
1

obj.$el は元のテキストエリアの jQuery 要素です。

obj.$el.getCode().length は、追加される HTML 要素を考慮に入れるため、予期しない結果をもたらします。

これを行うより正確な方法は、「.redactor_editor」をターゲットにしてテキストの長さを取得することだと思います

新しい keupCallback メソッド:

keyupCallback: function (obj) {
    var max = obj.$el.getEditor().next().attr("maxlength");
    if (typeof max !== "undefined") {
        var $box = obj.$el.closest(".redactor_box")
            ,current = $box.find('.redactor_editor').text().length
            ,$indicator = $(".indicator", $box);

        if ($indicator.size() === 0) {
            $box.append($("<div class='indicator' style='position:absolute;z-index:30;top:7px;right:7px;'><span class='current'>" + current + "</span> of <span class='max'>" + max + "</span></div>"));
        } else {
            $(".current", $indicator).text(current);
            $(".max", $indicator).text(max);
        }
        if (current >= max) {
            $box.css("border", "1px solid #ff0000");
            $indicator.css("color", "#ff0000");
        } else {
            $box.css("border", "1px solid #DDDDDD");
            $indicator.css("color", "#000000");
        }
    }
}
于 2014-01-27T19:24:31.107 に答える