Question

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

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

在我保存文档时成为

<p>
some text
</p>

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

Answer 1

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

这告诉字符串preserve white space我们删除了对trim的调用，这将删除字符串中的所有空白字符（包括 元素）。

然后我们需要修改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。

Answer 2

尝试：

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

这会在每次休息之间增加一个空格。

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

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

2 个答案: