Question

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

我可以从第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>（随后您正在检查其当前{ {1}} CSS值，它不会拥有）。

要更正此问题，请在应用格式设置后，抓取范围（先前创建或新添加），并将当前选择设置为它。您可以使用selection.getStart()：

执行此操作

letter-spacing

在var spanNode = tinyMCE.activeEditor.selection.getStart(); tinymce.activeEditor.selection.select(spanNode);之后使用时，它将是正确的范围。

这是更新后的代码（我已经进行了许多其他格式更改）：

tinymce.activeEditor.formatter.apply()

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

Answer 2

对我来说，对上面的代码做了一些更改，这有效。

改变这个：

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

为此：

tinymce.activeEditor.formatter.register('mycustomformat', {
       inline: 'span',
       styles: {'letterSpacing': currentSpacing+'px'}
     });
tinymce.activeEditor.formatter.apply('mycustomformat');

完整脚本：

<script>
    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.register('mycustomformat', {
               inline: 'span',
               styles: {'letterSpacing': currentSpacing+'px'}
             });
            tinymce.activeEditor.formatter.apply('mycustomformat');
            
            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.register('mycustomformat2', {
               inline: 'span',
               styles: {'letterSpacing': currentSpacing+'px'}
             });
            tinymce.activeEditor.formatter.apply('mycustomformat2');
    
            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>

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

2 个答案: