8

社内で開発された TinyMCE 用のファイル/画像/ドキュメント マネージャー プラグインがあり、これはまだ jQuery に移植されています。当面の間、これらの機能に依存する一部のプロジェクトでは、TinyMCE と jQuery.noConflict() のプロトタイプ ベースのバージョンを使用する必要があります。これは問題なく動作しますが、ASP.NET MVC 3 の控え目な検証では、TinyMCE の内容をフォーム フィールドにコピーするための TinyMCE コールバックがトリガーされる前に、送信時の検証が行われます。目立たない検証で事前検証イベントにフックすることは可能ですか?

4

2 に答える 2

14

送信ボタンを使用してフォームを投稿している場合は、次のことを試してください。

$("input[type='submit']").click(function () {
    tinyMCE.triggerSave();
});

送信ボタンを使用していない場合は、フォーム送信の直前に発生するイベントにフックして、tinyMCE.triggerSave（）を呼び出します。

于 2011-02-06T07:04:30.763 に答える
3

より詳細な制御を可能にする別の方法は、TinyMCE の初期化です。これは、1 つのケースを除いてうまく機能します。終了した最後の TinyMCE インスタンスは、TinyMCE 内で onDeactivate イベントをトリガーしません (別の TinyMCE インスタンスに移動したときにのみトリガーされます)。これを回避する方法は次のとおりです。これまでのところ、うまく機能しているように見えますが、YMMV.

注：これを受け入れられた回答と組み合わせて使用​​ します。このコードは、コンテンツが TinyMCE で編集されているときに検証をトリガーします。

tinyMCE.init({
    ...
    setup: ValidationTinyMceSetup
});

そして、私たちのセットアップ方法：

function ValidationTinyMceSetup(editor) {
    var $textarea = $('#' + editor.editorId);

    // method to use to save editor contents to backend input field (TinyMCE hides real input and syncs it up
    // with values on form submit) -- we need to sync up the hidden input fields and call the valid()
    // method from jQuery unobtrusive validation if it is present
    function save(editor) {
        if (editor.isDirty) {
            editor.save();
            var $input = $('#' + editor.editorId);
            if (typeof $input.valid === 'function')
                $input.valid();
        }
    }

    // Save tinyMCE contents to input field on key/up down (efficiently so IE-old friendly)
    var typingTimerDown, typingTimerUp;
    var triggerDownSaveInterval = 1000;     // time in ms
    var triggerUpSaveInterval = 500;        // time in ms

    editor.onKeyDown.add(function (editor) {
        clearTimeout(typingTimerDown);
        typingTimerDown = setTimeout(function () { save(editor) }, triggerDownSaveInterval);
    });

    editor.onKeyUp.add(function () {
        clearTimeout(typingTimerUp);
        typingTimerUp = setTimeout(function () { save(editor) }, triggerUpSaveInterval);
    });


    // Save tinyMCE contents to input field on deactivate (when focus leaves editor)
    // this is via TAB
    editor.onKeyDown.add(function (editor, event) {
        if (event.keyCode === 9)
            save(editor);
    });

    // this is when focus goes from one editor to another (however the last one never
    // triggers -- need to enter another TinyMCE for event to trigger!)
    editor.onDeactivate.add(function (editor) {
        save(editor);
    });
}

最後に、まったく関係のないボーナス アイテムです。JavaScript ソースに次の関数を含めることで、文字カウンターを追加できます。

function CharacterCountDisplay(current, max) {
    if (current <= max) {
        return current + ' of ' + max + ' characters max';
    }
    else {
        return '<span style="color: red;">' + current + '</span> of ' + max + ' characters';
    }
}

上記のValidationTinyMceSetupメソッドに以下を追加します。

// check for character count data-val
var character_max = $textarea.attr('data-val-lengthignoretags-max');
if (typeof character_max === 'undefined' || character_max === false) {
    character_max = $textarea.attr('data-val-length-max');
}
if (typeof character_max !== 'undefined' && character_max !== false) {
    var character_count = function (editor) {
        var currentLength = $(editor.getDoc().body).text().length;
        editor.dom.setHTML(tinymce.DOM.get(editor.id + '_path_row'), CharacterCountDisplay(currentLength, character_max));
    };

    // on load show character count
    editor.onInit.add(character_count);

    // while typing update character count
    editor.onKeyUp.add(character_count);
}

data-val-length-max="250"使用するには、テキストエリアタグまたは TinyMCE を使用しているものにa を追加するだけです!

于 2011-12-15T17:35:49.877 に答える