Tinymce为自定义样式添加快捷方式 [英] Tinymce adding shortcuts for custom styles

问题描述

在我的初始化中，我使用我的预定义样式

In my tinymce initialization i use my predifined styles

style_formats : [ 
    {title : 'Date', inline : 'span', classes : 'date'},
    {title : 'Trend UP', inline : 'span', classes : 'trend_up'},
    {title : 'Trend DOWN', inline : 'span', classes : 'trend_down'},
    {title : 'Trend NO', inline : 'span', classes : 'trend_no'}
]

这种预先设定的样式将选定的内容包装到span标签中，并为其添加特定的类;

但是现在我需要添加快捷方式（热键）来提供相同的功能

This predifined styles wraps selected content into span tag and adds specific class for it; But now i need to add shortcuts (hotkeys) that will provide the same functionality

为此，我创建了一个插件，我的热键将被定义

for that purpose i've created plugin where my hotkeys will be defined

(function(){

    tinymce.create('tinymce.plugins.MyShortcuts', {
        init : function(ed, url) {
            ed.addShortcut('ctrl+e','Format Blockquote', ['FormatBlock', false, 'blockquote'], this);
        }
    });

    // Register plugin with a short name
    tinymce.PluginManager.add('my_shortcuts', tinymce.plugins.MyShortcuts);
})();

它适用于blockquote。但我在 tinymce documentation中找不到任何有用的信息 为我的自定义样式实现快捷方式。

And it works fine for blockquote. But i didn't find any useful information for me in tinymce documentation to implement shortcuts for my custom styles.

有人可以帮助我实现此功能吗？
我试图做

Can somebody help me how to implement this functionality? I tried to do

ed.addShortcut('ctrl+e','Format Trend UP', ['FormatBlock', false, 'Trend UP'], this);

和

ed.addShortcut('ctrl+e','Format Trend UP', ['StylesBlock', false, 'Trend UP'], this);

但它不起作用。

推荐答案

我使用了这个链接（ http://www.tinymce .com / tryit / custom_formats.php ）找到解决方案。

I used this link (http://www.tinymce.com/tryit/custom_formats.php) to find solution.

除了

style_formats : [ 
    {title : 'Date', inline : 'span', classes : 'date'}
]

我已将格式添加到初始化：

I've added format to initalization:

formats: { mydateformat: {inline: 'span', classes : 'date'}}

之后插件中的代码非常简单：

After that code in plugin was very simple:

  ed.addShortcut('ctrl+alt+3', 'Date format', function(){
    ed.formatter.apply('mydateformat');
  });

或有一些改善

ed.addShortcut('ctrl+alt+3', 'Date format', ['FormatBlock', false, 'mydateformat'], this);

这篇关于Tinymce为自定义样式添加快捷方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！