CODEWITHSUNDEEP
javascripttinymce
MagTun
MagTun

Reputation: 6195

changing fontsize from `10px` to `14px` to `18px` with a single shortcut

I am creating a plugin for TinyMCE5 that toggles the fontsize of the selected text between 10px, 14px and 18px. (The fontsize by defaut is 14px)

This is my try:

editor.addCommand('customfontsize_command', function () {
var content = tinymce.activeEditor.selection.getContent();
var node = tinymce.activeEditor.selection.getNode();
var fontsize = tinymce.activeEditor.dom.getStyle(node, 'font-size', true);

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

if (fontsize > 0 && fontsize <= 100) { // only work for first time
    switch (fontsize) {
        case 18:
            fontsize = 14;
            break;
        case 10:
            fontsize = 8;
            break;
        case 8:
            fontsize = 18;
            break;
        default:
            fontsize = 14;
    }

    fontsize = fontsize + "px";
    tinymce.activeEditor.execCommand('fontsize', false, fontsize);
}
}); // end customfontsize_command
editor.addShortcut('alt+a', 'customfontsize_command_desc', 'customfontsize_command');

But it only works for the first time I do my shortcut.

I also tried this but with the same result:

if (fontsize > 10 && fontsize <= 14) { 
    fontsize = 10;
} else if (fontsize <= 10) {
    fontsize = 18;
} else {
    fontsize = 14;
}

I can make this work with 2 different shorcuts like this, but I would prefer a single shortcut that toggles between the 3 sizes:

editor.addCommand('small_size', function () {
    var content = tinymce.activeEditor.selection.getContent();
    var node = tinymce.activeEditor.selection.getNode();
    var fontsize = tinymce.activeEditor.dom.getStyle(node, 'font-size', true);

    fontsize = fontsize.split("p", 1)
    fontsize = 10
    fontsize = fontsize + "px";
    tinymce.activeEditor.execCommand('fontsize', false, fontsize);

}); // end customfontsize_command


editor.addCommand('big_size', function () {
    var content = tinymce.activeEditor.selection.getContent();
    var node = tinymce.activeEditor.selection.getNode();
    var fontsize = tinymce.activeEditor.dom.getStyle(node, 'font-size', true);

    fontsize = fontsize.split("p", 1)
    fontsize = 18
    fontsize = fontsize + "px";
    tinymce.activeEditor.execCommand('fontsize', false, fontsize);

}); // end customfontsize_command

Upvotes: 2

Views: 40

Answers (1)

Jeya Suriya Muthumari
Jeya Suriya Muthumari

Reputation: 2021

Try this, 

fontsize = (fontsize <= 10) ? 18 : ((fontsize > 10 && fontsize <= 14) ? 10 : 14);

Upvotes: 2

Related Questions