Como adicionar atalho de teclado TinyMCE

4

A documentação mais completa que eu posso encontrar de como adicionar um novo atalho de teclado para o TinyMC está nesta página: enlace

Envolve adicionar este código ao arquivo principal do TinyMCE, tiny_mce_src.js (e recompactar):

t.addShortcut([keyboard command], [shortcut name], [command name]);

Existe uma maneira de adicionar um atalho sem invadir o núcleo / TinyMCE?

  

Atualização: Especificamente, quero adicionar atalhos para aplicar h2 / h3 / h4 ou outras ações de botão do TinyMCE ao texto selecionado no TinyMCE.

    
por supertrue 10.11.2011 / 18:28

2 respostas

2

Última vez eu adicionei um atalho de teclado que estava usando jQuery. Dê uma olhada no jquery.hotkeys plugin que permite que você ative os atalhos de teclado com um simples forro :

$(document).bind('keydown', 'ctrl+a', fn);

atualização

se você quiser verificar se o editor TinyMCE está ativo e tem um texto selecionado, então aqui estão as funções que você precisa:

function isTinyMCEactive(){ //check if editor is active
    is_tinyMCE_active = false;
    if (typeof(tinyMCE) != "undefined") {
        if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
            is_tinyMCE_active = true;
        }
    }
    return is_tinyMCE_active;
}

function tinyMCEhotkeys(tag){
    if (isTinyMCEactive()){
        var selected_content = '';
        selected_content = tinyMCE.activeEditor.selection.getContent();
        if (selected_content != '' || selected_content != null){ //check if editor has selection
            tinyMCE.activeEditor.execCommand("mceInsertContent", 0, '<' + tag + '>' + selected_content + '</' + tag + '>');
        }
    }
}

agora, depois de ter essas funções, o resto é fácil:

$(document).bind('keydown', 'ctrl+1', tinyMCEhotkeys('h1'));
$(document).bind('keydown', 'ctrl+2', tinyMCEhotkeys('h2'));
$(document).bind('keydown', 'ctrl+3', tinyMCEhotkeys('h3'));
$(document).bind('keydown', 'ctrl+4', tinyMCEhotkeys('h4'));
    
por Bainternet 10.11.2011 / 21:57
1

Eu tive esse problema. E percebi isso. Espero que ainda ajude (alguém) #Threadnecro

em functions.php eu adiciono um plugin tinyMCE:

function mce_button_js( $plugin_array ) {
  $plugin_array['notes'] = get_template_directory_uri() . '/js/tinymce.js';
  return $plugin_array;
}
add_filter( 'mce_external_plugins', 'mce_button_js' );

o arquivo /js/tinymce.js tem:

(function() {
  tinymce.create('tinymce.plugins.Notes', {
    init: function(ed, url) {
      ed.addButton('code', {
        title: 'Code',
        cmd: 'code'
      });

      // here I add the shortcut.
      ed.addShortcut('ctrl+k', 'description', 'code');
      ed.addCommand('code', function() {
        var selected_text = ed.selection.getContent(),
          $node = jQuery(ed.selection.getStart()),
          return_text = '';

        if (selected_text !== "") {
          return_text = '<code>' + selected_text + '</code>';
        }
        ed.execCommand('mceInsertContent', 0, return_text);
      });
    }
  });
  // Register plugin
  tinymce.PluginManager.add('notes', tinymce.plugins.Notes);
})();

Isso adiciona um botão de código ao editor wysiwyg . E mapeia ctrl+k como tecla de atalho para essa ação.

Fontes

por janw 20.10.2013 / 18:02

Tags