TinyMCE 4.xボタンを押して文字の間隔を広げようとしました

Question

TinyMCEボタンを使って文字の間隔をhttp://fiddle.tinymce.com/Z9eaab/31に増やしました。一番下のテキスト領域に "some text"という単語を入力し、 "some"を選択して "Increase letter spacing"ボタンを複数回押すと、文字間隔は初めて増加します。 2番目の単語「テキスト」を選択すると、「文字間隔を広げる」を押すたびに間隔が広がります。それはすべきだ。

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>作成しましたが、あなたが実際にのために求めてきましたが、そのは、（その後、あなたはそれがありません、現在のletter-spacing CSS値を、チェックしている）<p>を囲むされたいあなたの場合は

。

これを修正するには、書式設定を適用した後で、前に作成した、または新しく追加したスパンを取得し、現在の選択範囲を設定します。あなたは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