如何修改 TinyMCE 选择的选定范围？

Question

我正在使用 TinyMCE 4，我想添加一个按钮来增加 selected 段落的行高。如果我 select 通过在段落中 selecting 一个词来 select 段落，我可以正常工作。在这种情况下有效的代码是：

 ed.addButton( 'linc', { // line increment

                image: '/tinymce/plugins/zackel/button_images/line_spacing_up.png',  // root is www/zackel.com/
                title: 'increase  line spacing of selected paragraph',
                onclick:function(editor,url) {
                  console.log("ed.selection is ", ed.selection);
                   var node = ed.selection.getNode();
                   var nodeName = node.nodeName;  // for example 'DIV ' or 'P'
                   var text = ed.selection.getContent( { 'format' : 'text' } );  // get the text contents of the active editor
                   console.log("add line spacing: selected text = ", text, ",node = ", node, "nodeName = ", nodeName);
                   if (node && text) {
                       var lineht = $(node).css('line-height');
                       lineht = Number(lineht.replace(/px/,''));
                       lineht += 2;
                       lineht = lineht + "px";
                       $(node).css('line-height', lineht);

                   }
                   else {
                        alert('Please select text to adjust the line height for');
                   }
                   return false;
                   }
                 });

但是如果我 select 通过三次点击该段落， select 查看所有段落文本，上面的代码不起作用，因为 getNode() returns外部 DIV 包含 selected 段落，然后代码将行高增加应用到 DIV 中的所有段落。

查看 selection 的 lastRng，我发现 endContainer 是下一段的 P。 getNode() 的文档说 "returns the currently selected element or the common ancestor element for both start and end of the range" 所以在这种情况下，我似乎得到了 selected P 和下一个 P.

的共同祖先

当我三次单击一个段落时，如何修改范围，以便 getNode() 返回 selected 段落的 P 而不是 selected 的共同祖先P和后面的P？

感谢您对此的任何帮助。

Answer 1

我会简单地使用 NodeChange 事件来保留对最后选定段落的引用，因此我不需要以任何方式对原始代码进行猴子修补或调整。

这是一个完整且经过测试的示例：

        (function() {
          var lastText = "",
            lastP = "";
          tinymce.PluginManager.add('example', function(ed, url) {
            ed.addButton('example', {
              text: 'increase  line spacing of selected paragraph',
              icon: true,
              onclick: function() {
                var node = ed.selection.getNode();
                var nodeName = node.nodeName; // for example 'DIV ' or 'P'
                if (nodeName == 'DIV') {
                  node = lastP;
                }
                var text = lastText; // get the text contents of the last selected text, if any
                console.log("add line spacing: selected text = ", text, ",node = ", node, "nodeName = ", nodeName);
                if (node && text) {
                  var lineht = $(node).css('line-height');
                  if (lineht == "normal") {
                    var calculation_content = $('<span id="calculation_content" style="line-height:inherit;display:none;">&nbsp;</span>');
                    $('body').append(calculation_content);
                    lineht = $('#calculation_content').height() + "px";
                    $(calculation_content).remove();
                  }
                  lineht = Number(lineht.replace(/px/, ''));
                  lineht += 2;
                  lineht = lineht + "px";
                  $(node).css('line-height', lineht);

                } else {
                  alert('Please select text to adjust the line height for');
                }
                return false;
              }
            });
          });

          tinymce.init({
            setup: function(ed) {
              ed.on('NodeChange', function(e) {
                var node = ed.selection.getNode();
                var nodeName = node.nodeName; // for example 'DIV ' or 'P'
                if (nodeName == 'P') {
                  lastP = node;
                  lastText = ed.selection.getContent({
                    'format': 'text'
                  });
                }
              });
            },
            selector: "textarea",
            plugins: "example",
            toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | example"
          });
        })();

作为奖励，当根本没有行高格式时，我添加了一个小的更改以获取以 px 为单位的行高，并且 CSS 返回 "normal"。

如果这能解决您的问题，请告诉我。

如何修改 TinyMCE 选择的选定范围？

How to modify a selected range for a TinyMCE selection?

tinymce-4