Сделать отправку TinyMCE+JEditable после нажатия ctrl+s

Обновлено: 13 мая 2011 г.

Пожалуйста, найдите решение в моем ответе ниже.

Обновлено: 5 мая 2011 г.

Итак, проблема, с которой я столкнулся, заключается в том, что я хочу вызвать кнопку отправки JEdtiable после нажатия Ctrl + S. Великий Тариама показал часть Ctrl+S для TinyMCE, так что теперь мне нужно выяснить, как заставить JEditable отправляться.

После нажатия Ctrl+SI попытался найти кнопку отправки и щелкнуть ее в соответствии с вызвать отмену на jeditable . Не работает.

Вот мой соответствующий код для инициализации JEditable:

    //Edit Note
$(function(){
   $(".edit").editable('ajax/save.php?editnotetext', {
      type : 'mce',
      submit : '<button class="save_button">Save</button>',
      cancel: 'Cancel',
      event: 'dblclick',
      indicator : 'Saving...',
      tooltip : 'Doubleclick to edit...',
      onblur: 'ignore',
      width : '700px',
      height : '100px'
   });
});

И вот мой код для попытки отправить его

var receiveShortCutEvent = function(e) {
  if (e.ctrlKey){
        //console.log('e.keyCode:',e.keyCode);
        var handled = true; // default case set this to false which lets the browser execute a browsershortcut if existent
        switch (e.keyCode){   // be careful that keyCode may differ in browsers sometimes 
          case 83 : 
              $('.edit').find('.save_button').click();
              break;

          default : handled = false;
        }
    }
};

Любые мысли будут приветствоваться!

28 апреля 2011 г.

Использование TinyMCE с JEditable (согласно http://sam.curren.ws/index.cfm/2008/6/12/jEditable-TinyMCE-Plugin). После редактирования моего контента я хочу отправить его, нажав Ctrl+S. К сожалению, ничего не отправляется, и у меня остается исходный контент. Это работает, если я нажму кнопку отправки.

Я пробовал:

$(function(){
    $(".edit").keypress(function(event) {
        if ((event.which == 115 && event.ctrlKey)){
            alert("you pressed ctrl-s!");
            $(this).submit();
        }
    });


   $(".edit").editable('ajax/save.php?editnotetext', {
      type : 'mce',
      submit : 'save',
      cancel: 'cancel',
      indicator : 'Saving...',
      tooltip : 'Click to edit...',
      onblur: 'ignore',
      width : '500px',
      height : '100px'
   });
});

javascript events jquery tinymce jeditable
person Kamil Sindi    schedule 20.04.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Взгляните на эти плагины jquery для создания сочетаний клавиш. Это может быть то, что вы ищете.

горячие клавиши

горячие клавиши js

person locrizak    schedule 20.04.2011
comment
Привет локризак. Это может помочь, но, к сожалению, реальная проблема заключается в TinyMCE/JEditable, поскольку я точно не знаю, что происходит в сценариях, и у меня недостаточно технических возможностей для ее решения. Например. как вообще привязать Ctrl+S к кнопке отправки, созданной JEditable? - person Kamil Sindi; 20.04.2011
comment
Это выглядит довольно мило, я собираюсь тайно добавить его в проект, чтобы взорвать им мозги! - person locrizak; 06.05.2011

arrow_upward
1
arrow_downward

Это несколько особая вещь для достижения. Проблема здесь в том, что tinymce (и каждый могучий rte) использует iframe для редактирования контента. Это приводит к тому, что iframe будет «перехватывать» все события клавиатуры, когда iframe имеет фокус. Я покажу вам, что я делаю, чтобы решить эту проблему

В вашей инициализации tinymce (или одном из ваших плагинов) вам нужно установить следующее

// 83 instead of 73 as keyCode here !!!!!!!!
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) {
    setTimeout(function(){
      var e = { type : 'keydown'};
      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);
  }
 });
},

в html-документе (или включенном js-файле) вам нужно установить это

// init in the main document
// Keydown events on the main document will call receiveShortCutEvent
$(document).bind('keydown', function(e)
{
    var handled = receiveShortCutEvent(e); 
    return !handled;
});

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

var receiveShortCutEvent = function(e)
{
  if (e.ctrlKey){
    //console.log('e.keyCode:',e.keyCode);
    var handled = true; // default case set this to false which lets the browser execute a browsershortcut if existent
    switch (e.keyCode){   // be careful that keyCode may differ in browsers sometimes 
      case 83 : 
          alert("you pressed ctrl-s!");
          break;

      default : handled = false;
  }
}
person Thariama    schedule 21.04.2011
comment
Спасибо, Тариама. У меня проблемы с последней частью. Могу ли я просто поставить его после второго кода? Мой js не работает, если я делаю. - person Kamil Sindi; 22.04.2011
comment
Я также пробовал $(document).ready( function receiveShortCutEvent(e) {. Все остальные javascript работают, а Ctrl+S нет. - person Kamil Sindi; 22.04.2011
comment
Вы поместили предупреждение внутри функции receiveShortCutEvent, чтобы узнать, вызывается ли функция? - person Thariama; 26.04.2011
comment
я отредактировал свой пост, похоже, у меня все еще был старый keyCode (72 вместо 83) - person Thariama; 28.04.2011
comment
Привет Тариама. Таким образом, предупреждение теперь вызывается, но ничего не отправляется. Есть ли строка кода, которую я должен раскомментировать? Спасибо за всю вашу помощь, кстати. - person Kamil Sindi; 28.04.2011
comment
попробуйте предупредить (консоль с firebug лучше) параметр e и скажите мне, что в нем - person Thariama; 28.04.2011
comment
это хорошо, вы также можете попытаться предупредить (e.keyCode), вы должны что-то сделать в receiveShortCutEvent в зависимости от свойств e (есть и e.ctrlKey) - person Thariama; 28.04.2011
comment
Я думаю, что проблема, с которой я столкнулся сейчас, связана с отправкой с помощью JEditable. Я подробно описал свое положение выше. - person Kamil Sindi; 05.05.2011

arrow_upward
0
arrow_downward

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

Если вы не используете TinyMCE с JEditable, посмотрите сообщение Армана П. по адресу Вызвать кнопку отправки JEdtiable, изменив плагин.

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

Как указывает Тариама, 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();
       }
     });
   }

  });
person Kamil Sindi    schedule 11.05.2011