CODEWITHSUNDEEP
javascripttinymcekeyboard-shortcuts
MagTun
MagTun

Reputation: 6195

TinyMCE: How to add a shortcut to change font size

I would like to have a shortcut in my TinyMCE edictor to easily change the size of the text. From TinyMCE Website, there is the command FontSize with this description

Font size of the text. The value passed in should be the font size 1-7.

I tried adding this command to my list of others custom shortcuts like this 

ed.addShortcut('ctrl+shift+w', 'size_desc', FontSize(5));

But it didn't work. I also tried this but without success:

ed.addShortcut('ctrl+shift+w', 'size_desc', '["FontSize", 5]');

Also I am confused about the value: why can we only set 1 to 7 and not let say 12px?

Upvotes: 0

Views: 375

Answers (1)

Loly
Loly

Reputation: 83

Have you tried this?

ed.addShortcut('ctrl+shift+w', 'size_desc', '["FontSize", !1, "5px"]');

Also you can create a TinyMce plugin:

  1. go to your TinyMCE folder and open note.html
  2. In the list of plugins add fontsize_plugin and in the list of toolbar add fontsizeselect

  3. then add this line juste below toolbar:

    fontsize_formats: "8px 10px 12px 14px 16px 18px

  4. open the folder plugins and create in it a folder fontsize_plugin and in this filder create a file plugin.js in which you should copy paste this:

    tinymce.PluginManager.add('fontsize_plugin', function (editor, url) {

    editor.addCommand('fontsize_plugin_command', function () {

    var node = tinymce.activeEditor.selection.getNode();
    var fontsize = tinymce.activeEditor.dom.getStyle(node, 'font-size', true);

    fontsize = fontsize.split("p", 1)
        fontsize--;

    if (fontsize > 10 && fontsize <= 14) {
        fontsize = 10;
    } else if (fontsize <= 10) {
        fontsize = 18;
    } else {
        fontsize = 14;
    }
    fontsize = fontsize + "px";
    tinymce.activeEditor.execCommand('fontsize', false, fontsize);
    });
editor.addShortcut('ctrl+shift+w', 'fontsize_plugin_desc', 'fontsize_plugin_command');
});

Upvotes: 1

Related Questions