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

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

本文关键字：保留 br ContentTools 何使用 或之后      更新时间：2023-09-26

我注意到ContentTools（一个所见即所得的编辑器）在<p>的开头或结尾删除了多个<br>标签，当<br>之前或之后没有内容时。

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

在保存文档时变成

<p>
some text
</p>

我想保留所有<br>标签，以允许用户垂直对齐其内容。怎么做？

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

如何应用补丁取决于您，为了长期支持，最好分叉 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);

这告诉字符串保留空格，并且我们删除了对修剪的调用，这将从字符串中删除所有空格字符（包括<br>元素）。

然后我们需要修改 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的调用。字符串现在将保留空格字符。

最后我们需要修改将 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);
};

应该就是这样，很抱歉现在没有更简单的解决方案，如果你想为辩论做出贡献，之前已经有一些关于这个问题的讨论。

尝试：

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

这会在每个中断之间添加一个空格。

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

相关文章：