Tinymce为自定义样式添加快捷方式

时间:2014-01-23 11:43:57

标签: javascript tinymce

在我的初始化中,我使用了我的预测样式

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标签中,并为其添加特定的类; styles example 但现在我需要添加提供相同功能的快捷键(热键)

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

(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 中找到任何有用的信息来实现我的自定义样式的快捷方式

有人可以帮我解决如何实现此功能吗? 我试着做

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

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

但它不起作用。

1 个答案:

答案 0 :(得分:4)

我使用此链接(http://www.tinymce.com/tryit/custom_formats.php)来寻找解决方案。

除了

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

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

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

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

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

或有一些改进

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