什么代码会强制重新选择 TinyMCE 4.6？

Question

我在使用 TinyMCE 4.6 时遇到问题。我已经实现了一个自定义按钮，它可以改变所选文本的字体大小：

ed.addButton('finc', {
           image: '/tinymce/plugins/zackel/button_images/big.png',
           title: '+ font size',
           id : 'finc',
           onclick:function(editor,url) {
             console.log("************ In finc: ", ed);

             var delta;
             var currentFontSize = new Number($(ed.selection.getNode()).css('font-size').replace('px',''));
             console.log("************ finc: currentFontSize = " + currentFontSize);


             var node = ed.selection.getNode();  // <======= LINE 565
             var nodeName = node.nodeName;  // for example 'DIV ' or 'P'
              console.log("************ finc: node is ", node, "nodeName = " + nodeName);

             if (currentFontSize >= 24) {
                 delta = 2;
             }
             else {
                 delta = 1;
             }

             currentFontSize =  currentFontSize + delta;
              console.log("************ finc: New font size = " + currentFontSize);
             ed.formatter.register('incfont', {
                 inline : 'span',
                 styles : {'font-size' : currentFontSize + 'px'}
              });
              ed.formatter.apply('incfont');
              console.log("********** finc: posting to val box  " +  currentFontSize);
              $("div#px_val button").text(currentFontSize + 'px');  // show value in value box
           }
        });

如果文本最初位于 P 中，则按钮可以正常工作，但完成后会将文本放入 P 内的范围内。如果我再次按下按钮，它会失败，因为它带回第 565 行的节点仍然是 P，它仍然具有原始字体大小。因此，如果他的初始字体大小为 16，则它变为 17，但此后的每个碰撞都保持在 17。如果我在碰撞后取消选择文本并重新选择它，第 565 行将获得跨度并且碰撞每次都有效。

如何从我的代码中强制重新选择，以便 565 第二次找到跨度而不是 P，而无需我取消选择并重新选择文本？

谢谢

Answer 1

在我看来，我理解你的问题，但我相信每次应用格式时都不应该重新选择文本 - 仅在 TinyMCE 添加新的 SPAN 的情况下。

这是我的提议：

var delta;
var currentFontSize = new Number($(ed.selection.getNode()).css('font-size').replace('px',''));
var node = ed.selection.getNode();
var nodeName = node.nodeName;  // for example 'DIV ' or 'P'
if (currentFontSize >= 24) {
    delta = 2;
}
else {
    delta = 1;
}
currentFontSize =  currentFontSize + delta;
ed.formatter.register('incfont', {
    inline : 'span',
    styles : {'font-size' : currentFontSize + 'px'}
});

var cnt = ed.selection.getContent({format : 'html'});
var lenBefore = $(cnt).length;

ed.formatter.apply('incfont');

var cnt = ed.selection.getContent({format : 'html'});
var lenAfter = $(cnt).length;

if(lenAfter > lenBefore) {
    var newText = ed.selection.selectedRange.startContainer;
    var rng = ed.dom.createRng();
    rng.setStart(newText, 0);
    rng.setEnd(newText, newText.nodeValue.length);
    ed.selection.setRng(rng);
    ed.nodeChanged();
}

解释：

当您第一次应用格式化程序时，TinyMCE 会添加 SPAN，您会在类型 text 的 ed.selection.selectedRange.startContainer 节点中找到新选择。这与新插入的SPAN的第一个text类型的子节点相同。后续动作无需重新选择。

此外，恕我直言，我觉得在鼠标点击中更改字体大小有点不寻常，我更喜欢一个标准的插件按钮，它只适用于已经存在的文本选择（但这取决于你）：

当然，重选的主要问题已经解决了，而且通过使用插件按钮，该插件将在随后的鼠标点击中重复工作。

以防万一，如前所述，您也可以在最上面查看是否有以下内容：

var hasContent = ed.selection.getContent({format : 'text'}.length > 0);
if(!hasContent) return;

所以我相信所有的东西都应该可以完成工作，但无论如何，我觉得还有一些改进的余地，例如，如果你还需要减小字体大小，那么你也需要删除已经现有 - 但不再需要 - SPAN 其中包含格式。

什么代码会强制重新选择 TinyMCE 4.6？

What code will force a reselection in TinyMCE 4.6?

tinymce-4