自定义TinyMCE 4.x按钮增加字母间距不起作用

Question

我实现了一个TinyMCE按钮来增加字母间距http://fiddle.tinymce.com/Z9eaab/31。如果在底部的文本区域中输入“some text”字样，然后选择“some”并多次点击“增加字母间距”按钮，字母间距只会在第一次增加。如果选择第二个单词“文本”，则每次点击“增大字母间距”时，间距都会增加。正如它应该。

我可以从第9行的console.log看到，当它不工作时，这是因为当前的间距读取并不反映最后一次增加，所以它只是重做第一次。

<script type="text/javascript"> 
    tinymce.PluginManager.add('example', function(editor, url) { 
    // Add a button that opens a window 
    editor.addButton('example1', { 
     text: 'Increase letter spacing', 
     icon: false, 
     onclick: function() { 
     var currentSpacing = new Number($(tinyMCE.activeEditor.selection.getNode()).css('letter-spacing').replace('px', '')); 
     console.log("spacing read is" + currentSpacing); 
     currentSpacing = currentSpacing + 1; 

     tinymce.activeEditor.formatter.register('increaseSpacing', { 
      inline: 'span', 
      styles: { 
      'letter-spacing': currentSpacing + 'px' 
      } 
     }); 

     tinymce.activeEditor.formatter.apply('increaseSpacing'); 
     } 
    }); 

    editor.addButton('example2', { 
     text: 'Decrease letter spacing', 
     icon: false, 
     onclick: function() { 
     var currentSpacing = new Number($(tinyMCE.activeEditor.selection.getNode()).css('letter-spacing').replace('px', '')); 
     currentSpacing = currentSpacing - 1; 

     tinymce.activeEditor.formatter.register('decreaseSpacing', { 
      inline: 'span', 
      styles: { 
      'letter-spacing': currentSpacing + 'px' 
      } 
     }); 

     tinymce.activeEditor.formatter.apply('decreaseSpacing'); 
     } 
    }); 

    // 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: "example1 example2 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> 

有谁知道这是怎么回事？

Answer 1

您正在使用selection.getNode()，它找到选择的开始点和结束点的公共父节点。这是而不是当前选择的节点。

在你的情况下，你希望你创建的<span>，但你实际要求的是它的封闭<p>（随后你正在检查它当前的letter-spacing CSS值，它不会有）。

要改正这一点，在应用格式化后，抓住span（先前创建的或新添加的），并将当前选择设置为它。您可以使用selection.getStart()做到这一点：

var spanNode = tinyMCE.activeEditor.selection.getStart(); 
tinymce.activeEditor.selection.select(spanNode); 

当tinymce.activeEditor.formatter.apply()后使用，这将是正确的跨度。

下面是更新后的代码（我做了一些其他的格式更改）：

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

     var currentSpacing = 0; 
     var $selectedContent = $(tinyMCE.activeEditor.selection.getContent({'format': 'html'})); 

     if ($selectedContent.is("span") && $selectedContent.css('letter-spacing')) { 
      currentSpacing = +($selectedContent.css('letter-spacing').replace('px', '')); 
     } 

     currentSpacing += 1; 

     tinymce.activeEditor.formatter.apply('letterSpacing', { 
      value: currentSpacing + 'px' 
     }); 

     var spanNode = tinyMCE.activeEditor.selection.getStart(); 
     tinymce.activeEditor.selection.select(spanNode); 

     } 
    }); 

    editor.addButton('example2', { 
     text: 'Decrease letter spacing', 
     icon: false, 
     onclick: function() { 

     var currentSpacing = 0; 
     var $selectedContent = $(tinyMCE.activeEditor.selection.getContent({'format': 'html'})); 

     if ($selectedContent.is("span") && $selectedContent.css('letter-spacing')) { 
      currentSpacing = +($selectedContent.css('letter-spacing').replace('px', '')); 
     } 

     currentSpacing -= 1; 

     tinymce.activeEditor.formatter.apply('letterSpacing', { 
      value: currentSpacing + 'px' 
     }); 

     var spanNode = tinyMCE.activeEditor.selection.getStart(); 
     tinymce.activeEditor.selection.select(spanNode); 

     } 
    }); 

    // 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: "example1 example2 undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
    formats: { 
     'letterSpacing': { 
     inline: 'span', 
     styles: { 
      'letter-spacing': '%value' 
     } 
     } 
    } 
    }); 
</script> 

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

演示：http://fiddle.tinymce.com/wYfaab/2