Сделайте TinyMCE+JEditable отправить после нажатия Ctrl+ S

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

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

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

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

После нажатия Ctrl+S I попытался найти кнопку отправки и щелкнуть ее согласно вызову отмены на 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'
   });
});
Источник

3 ответа

Решение

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

Если вы не используете TinyMCE с JEditable, посмотрите на статью Армана П. " Вызовите кнопку JEdtiable Submit путем изменения плагина".

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

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

  });
Источник

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

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

// 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;
  }
}
Источник

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

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

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

Источник
Другие вопросы по тегам