Вызовите кнопку JEdtiable Submit, изменив плагин

Question

РЕШЕНИЕ 1: НЕ ИСПОЛЬЗОВАТЬ TINYMCE

Если вы не используете TinyMCE с JEditable, посмотрите на пост Армана П. ниже.

РЕШЕНИЕ 2: ИСПОЛЬЗОВАНИЕ TINYMCE

Если вы используете TinyMCE, то метод Arman Ps, к сожалению, не работает. Tinymce использует iframe для редактирования контента. Это приводит к проблеме, заключающейся в том, что iframe "ловит" все события клавиатуры, когда iframe имеет фокус. Таким образом, вам нужно изменить настройки tinymce.

Сначала идет инициализация JEditable, но вы даете кнопке сохранения класс, который мы будем называть "save_button":

    $(".edit").editable('ajax/save.php?editnotetext', {
        type : 'mce',
        submit : '<button class="save_button">Save</button>',
        ...
    });

При инициализации TinyMCE вы должны создать установку, которая ловит Ctrl+S и передает кнопки класса save_button:

   tinyMCE.init({
    ...
    setup : function(ed) {
     ed.onKeyDown.add(function(ed, evt) {
        // catch crtl+s, use receiveShortCutEvent in the html-document
        if (evt.keyCode == 83 && evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
           evt.preventDefault();
           $('.save_button').submit();
       }
     });
   }

  });

---

Я хочу вызвать submit, когда пользователь нажимает Ctrl+S (используя TinyMCE, так что это наиболее логично для пользователя). У меня было сообщение Сделать TinyMCE+JEditable отправить после нажатия Ctrl+S, который пытался решить эту проблему, но проблема, я думаю, с JEditable, а не TinyMCE.

Я думаю, что лучший подход - это слегка изменить плагин, чтобы форма отправлялась при нажатии Ctrl+S.

К сожалению, то, что я пробовал до сих пор, не работает. Предупреждение ниже даже не вызывается. Я думаю, что проблема связана с настройкой tinyMCE, потому что встроенная опция в JEditable, где можно выполнить сброс с помощью Esc, не работает.

КОД (jquery.tinymcehelper.js)

    $.fn.tinymce = function(options){
       return this.each(function(){
          tinyMCE.execCommand("mceAddControl", true, this.id);
       });
    }

    function initMCE(){
       tinyMCE.init({
            mode : "none",
            theme : "advanced",
            plugins: "save, table, tinyautosave, imagemanager, spellchecker, autoresize",
            theme_advanced_buttons1_add_before : "tinyautosave, code, separator, delete_table",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,search,replace,|,bullist,numlist,|,outdent,indent,blockquote",
            theme_advanced_buttons2 : "undo,redo,link,unlink,code,|,forecolor,backcolor,|,insertimage,spellchecker",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            content_css : "css/tinymce.nebula.css",
            width : "700"
            ,
            setup : function(ed) {
             ed.onKeyPress.add(function(ed, evt) {
                // catch crtl+s, use receiveShortCutEvent in the html-document
                if (evt.keyCode == 83 && evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
                   setTimeout(function(){
                    var e = {type : 'keypress'};
                    e.charCode = e.keyCode = e.which = 83;
                    e.shiftKey = e.altKey = e.metaKey = false;
                    e.ctrlKey = true;
                    window.parent.receiveShortCutEvent(e); // !!! delegate created event object
                  }, 1);
               }
               });
           }

          });
    }

    initMCE();

    $.editable.addInputType('mce', {
       element : function(settings, original) {
          var textarea = $('<textarea id="'+$(original).attr("id")+'_mce"/>');
          if (settings.rows) {
             textarea.attr('rows', settings.rows);
          } else {
             textarea.height(settings.height);
          }
          if (settings.cols) {
             textarea.attr('cols', settings.cols);
          } else {
             textarea.width(settings.width);
          }
          $(this).append(textarea);
             return(textarea);
          },
       plugin : function(settings, original) {
          tinyMCE.execCommand("mceAddControl", true, $(original).attr("id")+'_mce');
          },
       submit : function(settings, original) {
    // BELOW IS MY BEST ATTEMPT. I THINK I HAVE TO HAVE SOMETHING HERE.I'VE COMMENTED OUT MY MODIFICATION
   //      input.keypress(function(e) {
   //         if ((e.ctrlKey) && (e.keyCode == 83)) {          
   //              alert("Ctrl+S pressed");
   //              e.preventDefault();
   //              tinyMCE.triggerSave();
   //              tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');    
    //         }
  //        }
 //         else {
          tinyMCE.triggerSave();
          tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
    //      }
          },
       reset : function(settings, original) {
          tinyMCE.execCommand("mceRemoveControl", true, $(original).attr("id")+'_mce');
          original.reset();
       }
    });

Answer 1

Привет, @Hydra. Я дам вам подсказку. Ниже вы можете найти фрагмент кода для захвата Ctrl+S в окне. Перепишите в свой контекст просто. Главное, на что нужно обратить внимание, - это то, что вы должны сначала явно запретить поведение по умолчанию для события.

отредактированный
И обязательно поймать keydown событие не keypress, keypress не является кросс-браузерным решением.

$(window).keydown(function(event) {
  if ((event.keyCode == 83 && event.ctrlKey)){
      alert("Ctrl+S pressed");
      event.preventDefault();
  }
});

Для jEditable найдите в исходном коде плагина следующий код:

input.keydown(function(e) {
  if (e.keyCode == 27) {
    e.preventDefault();
    //self.reset();
    reset.apply(form, [settings, self]);
  }
});

и добавить еще if утверждение в этой функции

if (e.keyCode == 83 && e.ctrlKey) {
  e.preventDefault();
  form.submit();
  //alert("Ctrl+S Pressed!");  // Alert only here, after 2 previous lines
}

Проверено! - За работой.

В вашем случае вы используете tinyMce, и если в этом случае jEditable не создает input тогда это может быть создание textareaВы можете попытаться захватить это событие на textarea. Если вы предоставите мне рабочий пример jEditable с tinyMce (любая ссылка), я смогу помочь вам в дальнейшем.