如何在使用 ContentTools 之前或之后没有内容时保留多个

Question

我注意到 ContentTools（所见即所得的编辑器）删除了  开头或结尾的多个   标签，而   之前或之后都没有内容].

<p>
<br><br><br><br>
some text
<br><br><br><br>
</p>

保存文档时变成

<p>
some text
</p>

我想保留所有   标签以允许用户垂直对齐他们的内容。如何做到这一点？

Answer 1

尝试：

<p>
<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>
some text
<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>
</p>

这会在每个分隔符之间添加一个空格。

用css解决垂直对齐不是更好吗？

Answer 2

ContentTools 默认行为是 trim 白色 space 来自标准文本元素（例如段落、标题等）。没有修改此行为的设置（至少目前没有），但如果您需要此行为，您可以修补库以实现此目的。

如何应用补丁由您决定，为了获得长期支持，最好分叉 ContentEdit 和 ContentTools 库，对 CoffeeScript 进行更新并构建 ContentTools 库的自定义版本，这样在至少你可以在未来的更新中轻松合并（它现在是一个年轻的库，所以我们经常更新）。

或者，如果您现在想要一个快速的解决方案，您可以修改 build 文件夹中的 content-tools.js（尽管您随后可能想要手动缩小它）。

我将在此处描述所需的 JS 更改（但对 CoffeeScript 进行更改同样容易（因为它们几乎相同）：

找到函数Text构造函数代码：

function Text(tagName, attributes, content) {
  Text.__super__.constructor.call(this, tagName, attributes);
  if (content instanceof HTMLString.String) {
    this.content = content;
  } else {
    this.content = new HTMLString.String(content).trim();
  }
}

并修改行

this.content = new HTMLString.String(content).trim();

到

this.content = new HTMLString.String(content, true);

这告诉字符串 preserve white space 并且我们删除了对 trim 的调用，这将从字符串中删除所有白色 space 字符（包括   元素).

然后我们需要修改HTML方法，找到Text元素的html函数：

Text.prototype.html = function(indent) {
  var content;
  if (indent == null) {
    indent = '';
  }
  if (!this._lastCached || this._lastCached < this._modified) {
    content = this.content.copy().trim();
    content.optimize();
    this._lastCached = Date.now();
    this._cached = content.html();
  }
  return ("" + indent + "<" + this._tagName + (this._attributesToString()) + ">\n") + ("" + indent + ContentEdit.INDENT + this._cached + "\n") + ("" + indent + "</" + this._tagName + ">");
};

并修改行

content = this.content.copy().trim();

到

content = this.content.copy();

这里我们再次删除对 trim 的调用。该字符串现在将保留白色 space 个字符。

最后我们需要修改将DOM个元素转换为ContentEdit.Text个实例的方法，找到fromDomElement方法：

Text.fromDOMElement = function(domElement) {
  return new this(domElement.tagName, this.getDOMElementAttributes(domElement), domElement.innerHTML.replace(/^\s+|\s+$/g, ''));
};

并将其替换为：

Text.fromDOMElement = function(domElement) {
  return new this(domElement.tagName, this.getDOMElementAttributes(domElement), domElement.innerHTML);
};

应该就是这样，很抱歉，目前没有更简单的解决方案，之前已经对此进行了一些讨论 here 如果您想为辩论做出贡献。

如何在使用 ContentTools 之前或之后没有内容时保留多个 <br>

How to preserve multiple <br> when no content before or after with ContentTools

javascript

html

wysiwyg