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

Question

我实现了一个 TinyMCE 按钮来增加 http://fiddle.tinymce.com/Z9eaab/31 处的字母间距。如果您在底部的文本区域中输入单词 "some text"，然后输入 select "some" 并多次点击 "Increase letter spacing" 按钮，字母间距只会在第一次增加。如果你 select 第二个单词，每次你按 "Increase letter spacing." 时，"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>（随后你正在检查它当前的 letter-spacing CSS 值，它不会有）。

要更正此问题，在应用格式后，抓取范围（以前创建的或新添加的），并将当前选择设置为它。您可以使用 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

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 按钮增加字母间距不起作用

Custom TinyMCE 4.x button to increase letter spacing not working

tinymce-4