如何强制CKEditor内联小部件保留尾随空格

正如我在本文中所报告的，CKEditor（4.7.0）中的内联小部件不保留尾随空格，从而导致显示问题

以以下简单小部件为例：

CKEDITOR.plugins.add('spanwidget', {
    requires: 'widget',
    init: function (editor)    {
        editor.widgets.add('spanwidget', {
            editables: {
                content: {
                    selector: 'span'
              }
            },
            upcast: function (element) {
                return element.name == 'span';
            }
        });
    }
});

加载以下数据时，

lorem ipsum

，您会在输出中看到此文本：

loremipsum

（请注意缺少的空格）

这是可以看到的

---

我如何解决这个问题（我不控制在CKEditor中加载哪些数据）？

我找到了一个解决方法来强制保留最后一个尾随空间。我们的想法是在向上投射小部件元素时，用

替换最后一个空格，然后在向下投射之前将其删除：

CKEDITOR.replace('ck', {
  allowedContent: true,
  extraPlugins: 'spanwidget'
});

CKEDITOR.plugins.add('spanwidget', {
    requires: 'widget',
    init: function (editor) {
      editor.widgets.add('spanwidget', {
        editables: {
          content: { selector: 'span' }
        },
        upcast: function (element) {
          // Matches?
          if (element.name == 'span') {
            // Ends with text?
            var children = element.children,
              childCount = children.length,
              lastChild = childCount && children[childCount - 1];
            if (lastChild instanceof CKEDITOR.htmlParser.text) {
              // Replace the last space with a non breaking space
              // (see https://github.com/ckeditor/ckeditor-dev/issues/605)
              lastChild.value = lastChild.value.replace(/ $/, ' ');
            }
            // Match!
            return true;
          }
          // No match
          return false;
        },
        downcast: function (element) {
          // Span with class "targetinfo"?
          if (element.name == 'span') {
            // Ends with text?
            var children = element.children,
              childCount = children.length,
              lastChild = childCount && children[childCount - 1];
            if (lastChild instanceof CKEDITOR.htmlParser.text) {
              // Ends with a non breaking space?
              var match = lastChild.value.match(/ $/i);
              if (match) {
                // Replace the non breaking space with a normal one
                lastChild.value = lastChild.value.replace(/ $/i, ' ');
                // Clone the element
                var clone = element.clone();
                // Reinsert all the children into that element
                for (var i = 0; i < childCount; i++) {
                  clone.add(children[i]);
                }
                // Return the clone
                return clone;
              }
            }
          }
        }
    });
  }
});

CKEDITOR.replace（'ck'{
允许内容：正确，
外部插件：“spanwidget”
});
CKEDITOR.plugins.add（'spanwidget'{
需要：'widget'，
init：函数（编辑器）{
editor.widgets.add（'spanwidget'{
可编辑内容：{
内容：{选择器：'span'}
},
上行：功能（元素）{
//火柴？
如果（element.name=='span'）{
//以文本结尾？
var children=element.children，
childCount=childs.length，
lastChild=childCount&&childCount[childCount-1]；
if（CKEDITOR.htmlParser.text的最后一个子实例）{
//将最后一个空格替换为非中断空格
//（见https://github.com/ckeditor/ckeditor-dev/issues/605)
lastChild.value=lastChild.value.replace（/$/，“”）；
}
//比赛！
返回true；
}
//没有对手
返回false；
},
下行：函数（元素）{
//“targetinfo”类的跨度？
如果（element.name=='span'）{
//以文本结尾？
var children=element.children，
childCount=childs.length，
lastChild=childCount&&childCount[childCount-1]；
if（CKEDITOR.htmlParser.text的最后一个子实例）{
//以不间断的空格结束？
var match=lastChild.value.match（/$/i）；
如果（匹配）{
//将不间断空间替换为正常空间
lastChild.value=lastChild.value.replace（/$/i，”）；
//克隆元素
var clone=element.clone（）；
//将所有子元素重新插入该元素
对于（变量i=0；i

---

请参阅。

根据票据，这应该在CKEditor 4.8中修复