How to create a button in TinyMCE 4 that increments font size

问题

Has anyone managed to create a button in TinyMCE 4 that will increment the font size of the selected text by, say, 1px?

The problem I'm having is getting ahold of the selected text, whether it's in a span already or not. I'm willing to modify the TinyMCE source.

Thanks for any ideas.

回答1:

You don't need to modify the source code, you can create a plugin.

Here is the documentation of how to create a plugin for TinyMCE: http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin

based on that you can create your own button (see working example) here is part of the code:

    var currentFontSize = new Number($(tinyMCE.activeEditor.selection.getNode()).css('font-size').replace('px','')); //remove the px part
        currentFontSize =  currentFontSize + 1; //increase font by one

        tinymce.activeEditor.formatter.register('mycustomformat', {
         inline : 'span',
        styles : {'font-size' : currentFontSize + 'px'} //this is the font size incremented by one
});

 tinymce.activeEditor.formatter.apply('mycustomformat'); //apply the format to the selected text

来源：https://stackoverflow.com/questions/27867298/how-to-create-a-button-in-tinymce-4-that-increments-font-size