如何在TinyMCE 4中创建一个按钮,将字母间距增加1px

时间:2015-01-29 00:26:38

标签: tinymce-4

我尝试了How to create a button in TinyMCE 4 that increments font size答案中使用的相同方法,但这似乎不适用于字母间距。有没有人有办法让这项工作?

由于

1 个答案:

答案 0 :(得分:2)

将每个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>