Как заставить TinyMCE и Jquery работать вместе?

Question

Я использую jquery validate и jquery версию tinymce.

Я нашел этот фрагмент кода, который заставляет tinymce проверять себя каждый раз, когда в нем что-то меняется.

Привет

Я использую jquery validate с моим jquery tinymce, поэтому у меня есть это в моем коде

    // update validation status on change
    onchange_callback: function (editor)
    {
        tinyMCE.triggerSave();
        $("#" + editor.id).valid();
    },

Это работает, однако есть одна проблема. Если пользователь копирует что-то из слова, это приносит все эти ненужные стили, которые обычно превышают 50000 символов. Это намного больше моего количества символов, которые пользователь может вводить.

Так что мой метод проверки jquery перестает говорить мне, что они превысили лимит. В то же время, хотя tinymce вычистил этот беспорядок, и это стало возможно, теперь пользователь не превысил предел.

Все же сообщение все еще там.

Так есть ли лучший вызов функции, в который я могу это вставить? Может быть, сказать tinymce отложить валидацию, когда происходит вставка, или, может быть, другой обратный вызов?

У кого-нибудь есть идеи?

Answer 1

После нескольких часов размышлений о том, как получить проверку при работе с редактором TinyMCE, я, наконец, обнаружил, что необходимо указать плагину проверки, чтобы НЕ игнорировать скрытые поля (так как исходная текстовая область скрыта при инициализации tinyMCE). Таким образом, решение вкратце заключается в следующем:

$.validator.setDefaults({
    ignore: ''
});

Этот код сообщает плагину проверки jquery, чтобы он также проверял скрытые поля ... И тогда вы можете нормально ...

 onchange_callback: function (editor)
{
    tinyMCE.triggerSave();
    $("#" + editor.id).valid();
},

Это не прямой ответ на оригинальный вопрос - я знаю. Но так как эта страница заняла первое место в Google по "jquery validate tinymce", я думаю, что это хорошее место, чтобы упомянуть об этом здесь.

Данлудвиг упомянул об этом здесь: Невозможно заставить TinyMCE работать с ненавязчивой проверкой jQuery

Answer 2

О да, я тоже столкнулся с этой проблемой.

Итак, я исправил это, вызвав проверку события нажатия кнопки вместо этого.

$("#buttontosave").click(function() {
         tinyMCE.triggerSave();
         var status;
         status = $("#myform").valid(); //Validate again
         if(status==true) { 
             //Carry on
         }
         else { }
});

Это работает, попробуйте.

Для дополнительных ресурсов попробуйте

http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/

http://tinymce.moxiecode.com/punbb/viewtopic.php?id=21588

http://www.experts -exchange.com / Программирование / Языки / Scripting / JavaScript / Jquery / Q_23941005.html

Answer 3

Проблема заключается в том, что содержимое редактора еще не было скопировано в соответствующую текстовую область при запуске проверки. Решение, предложенное на http://rmurphey.com/blog/2009/01/12/jquery-validation-and-tinymce/, работает для меня. Я немного обобщил это, потому что в моем сценарии количество текстовых областей и их идентификаторов не было известно до времени выполнения.

Итак, в обработчике событий щелчка я копирую значения вручную для каждого редактора TinyMCE:

for (var i = 0; i < tinyMCE.editors.length; i++) {
    var textarea = tinyMCE.editors[i].getElement();
    var newText = tinyMCE.editors[i].getContent();      
    $(tinyMCE.editors[i].getElement()).text(newText);
}

Answer 4

См. Эту демонстрацию здесь для последней документации о jquery.validation и tinymce вместе: https://jqueryvalidation.org/files/demo/tinymce/

Есть несколько частей:

1. Даже несмотря на то, что текстовое поле tinymce скрыто, нам нужно добавить в белый список элемент, чтобы на нем можно было запустить валидатор.

   $.validator.setDefaults({
       ignore: ":hidden:not(.rich-text-editor)"
   });
   

2. Инициализировать tinymce, чтобы оно сохраняло свое значение в базовом textarea при изменении.

   tinymce.init({
       selector: 'textarea.rich-text-editor',
       init_instance_callback: function (editor) {
           // update validation status on change`
           editor.on("Change", function (e) {
               tinyMCE.triggerSave();
               $(editor.targetElm).valid();
           });
       }
   });
   

3. Сохраните основные textarea s перед отправкой любой формы.

   var forms = $("form");
   if (forms.length > 0) {
       var validator = forms.submit(function () {
           // update underlying textarea before submit validation
           tinyMCE.triggerSave();
       }).validate();
   

4. Обновление функции validator focusInvalid для обработки специальных текстовых областей Тинимса

       validator.focusInvalid = function () {
           // put focus on tinymce on submit validation
           if (this.settings.focusInvalid) {
               try {
                   var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
                   if (toFocus.is("textarea")) {
                       tinyMCE.get(toFocus.attr("id")).focus();
                   } else {
                       toFocus.filter(":visible").focus();
                   }
               } catch (e) {
                   // ignore IE throwing errors when focusing hidden elements
               }
           }
       }
   }
   

Примечание: Вы можете захотеть окружить свой код tinymce следующим блоком в случае, если есть проблема с загрузкой tinymce (или JS не включен в определенные страницы.)

if (typeof tinymce !== "undefined")

Answer 5

Спасибо Вильгельму, который дал мне идею (к сожалению, его код не работал, если в вашей форме было более одного текстового поля).

Это правильный способ сделать это:

    tinymce.init({
        setup: function(ed){
            ed.on("blur", function () {
                $("#" + ed.id).val(tinyMCE.activeEditor.getContent());
            });
        }
    }

Таким образом, нам вообще не нужно трогать код валидатора.

Answer 6

это работает для меня:

    var form = $('form').validate({ .... });

    tinyMCE.init({

        .....

        setup: function(ed){
            ed.on('blur', function() {
                $("textarea").html( tinyMCE.activeEditor.getContent() );
            });
        }
    });

Я надеюсь, что это работает и для вас

Answer 7

Это сработало для меня ... Я добавил значение крошечного поля к текстовой области

$(document).ready(function(){

    var form_validator = $("#form").validate({...});
});

function Valid()
{   
var content= tinyMCE.get('desc').getContent();
$('#desc').val(content);
    return false;
}

<form id='form' onSubmit='return Valid();'>
<textarea id='desc'></textarea>

Answer 8

В последнее время у меня возникли некоторые связанные с этим проблемы со временем запуска обработчиков событий, особенно с увеличением размера буфера символов, вставляемого из Word. Событие, которое меня интересовало, было ключевым: когда пользователь вводит поле заголовка (для записи в блоге), приложение обновляет автоматически созданное поле постоянной ссылки. Я закончил с подходом пояса и подтяжек: обработайте ключ и обработайте событие изменения, на всякий случай. Сокращенная версия моего кода:

hdlHeadlineChange = function (code) {

    //NOTES: The 'code' argument is for debugging purposes only: it helps you
    //figure out which event has fired.

    var headlineText = $(tinyMCE.selectedInstance.getBody()).text();

    //heuristically detect and ignore text with embedded Microsoft Word markup
    if (headlineText.match(/<!--/)) {
        return;
    }

    //as a backstop, trim excessively long text to fit database maximum lengths
    var truncateLength;    
    var semanticTitle = replaceSpecialCharactersInSemanticUrl(headlineText);

    //trim the permalink to fit the 255-character max in the database            
    truncateLength = 255 - $('#permalinkPreface').text().length;
    $('#permalinkSpan').text(semanticTitle.substring(0, truncateLength));
};

function setupHeadlineEventHandlers() {
    tinyMCE.get("headline").onKeyUp.add(function(ed, evt) {
        hdlHeadlineChange(evt.keyCode);
    });

    //NOTES: This handler is sort of a backstop.  Although the key-up handler may see text
    //with markup, we expect that the change handler will not.
    $('#headline').change(function () {
        hdlHeadlineChange(-1);
    });
}

Ключевым моментом является то, что я использовал .change () для активации обработчика событий, а не onchange_callback.