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，您将在类型为ed.selection.selectedRange.startContainer的{{1}}节点内找到新选择。这与新插入的text的{{1}}类型的第一个子节点相同。对于后续行动，不需要进行任何重新选择。

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

当然，重新选择的主要问题已经解决，插件也可以通过使用插件按钮重复进行后续鼠标点击。

以防万一，如前所述，如果有任何内容，您也可以在最顶层查看：

text

所以我相信整个过程应该可以完成这项工作，但无论如何，我觉得仍然有一些改进空间，例如，如果你还需要减少字体大小，那么你还需要删除已经存在的东西 - 但不再需要 - SPAN包含格式。

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

1 个答案: