如何在 TinyMCE 4 中创建一个按 1px 递增字母间距的按钮

Question

我尝试了在的答案中使用的相同方法，但这似乎不适用于字母间距。有没有人有办法让这个工作？

谢谢

Answer 1

将每个 font-size 替换为 letter-spacing，它将起作用：

http://fiddle.tinymce.com/Z9eaab/6

<script type="text/javascript">
tinymce.PluginManager.add('example', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('example', {
        text: 'Increment font size',
        icon: false,
        onclick: function() {

            var currentFontSize = new Number($(tinyMCE.activeEditor.selection.getNode())
.css('letter-spacing').replace('px','')); // <-------- here
            currentFontSize =  currentFontSize + 1;

            tinymce.activeEditor.formatter.register('mycustomformat', {
             inline : 'span',
            styles : {'letter-spacing' : currentFontSize + 'px'}
 });                     // ^-------- here

 tinymce.activeEditor.formatter.apply('mycustomformat');



        }
    });

    // Adds a menu item to the tools menu
    editor.addMenuItem('example', {
        text: 'Example plugin',
        context: 'tools',
        onclick: function() {
            // Open window with a specific url
            editor.windowManager.open({
                title: 'TinyMCE site',
                url: 'http://www.tinymce.com',
                width: 400,
                height: 300,
                buttons: [{
                    text: 'Close',
                    onclick: 'close'
                }]
            });
        }
    });
});

tinymce.init({
    selector: "textarea",
    plugins: "example",
    toolbar: "example undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

如何在 TinyMCE 4 中创建一个按 1px 递增字母间距的按钮

How to create a button in TinyMCE 4 that increments letter-spacing by 1px

tinymce-4