Вызовите кнопку JEdtiable Submit, изменив плагин - PullRequest
Новая
       24

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

1 голос
/ 06 мая 2011

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

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

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

Если вы используете TinyMCE, то метод Arman P.s к сожалению не работает. 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();
       }
    });

1 Ответ

1 голос
/ 11 мая 2011

Эй, @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 (любая ссылка), я смогу вам в этом помочь.

...