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

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

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

当我保存文档时成为

<p>
some text
</p>

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

最佳答案

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

补丁的应用方式取决于您，要获得长期支持，最好分叉ContentEdit和ContentTools库，对CoffeeScript进行更新并构建ContentTools库的自定义版本，这样至少您可以轻松地合并在将来的更新中（这是一个年轻的图书馆，因此我们会经常进行更新）。

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

我将在此处描述所需的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的调用，该调用将删除字符串中的所有空白字符（包括<br>元素）。

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

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);
};

就是这样，很抱歉，现在没有更简单的解决方案，如果您想为辩论做出贡献，那么以前的here话题已经有一些讨论。

关于javascript - 使用ContentTools之前或之后没有内容时如何保留多个<br>，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36883079/