Question

我正在使用TinyMCE 4而我想添加一个按钮来增加所选段落的行高。如果我通过选择段落中的单词来选择段落，我就可以使用它。在这种情况下适用的代码是：

 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;
                   }
                 });

但是如果我通过三次点击选择段落，选择所有段落文本，上面的代码就不起作用，因为getNode（）返回包含所选段落的外部DIV，然后代码应用行高增加到DIV中的所有段落。

查看选择的lastRng，我看到endContainer是以下段落的P. getNode（）的文档说它＆＃34;返回当前选定的元素或范围的开始和结束的共同祖先元素＆＃34;所以在这种情况下，我似乎得到了所选P和下一个P的共同祖先。

当我三次单击一个段落时，如何修改范围，以便getNode（）带回所选段落的P而不是所选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返回“正常”。

请告诉我这是否解决了您的问题。

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

1 个答案: