超过字符限制时如何使用 <em> 标签在 contenteditable 中换行答案

【问题标题】：How to wrap text within contenteditable with <em> tag when exceeding the character limit超过字符限制时如何使用 <em> 标签在 contenteditable 中换行
【发布时间】：2017-11-02 23:14:38
【问题描述】：

尝试处理由 contenteditable 驱动的响应式表单控件的内容，并借助 github.com/KostyaTretyak/ng-contenteditable 指令。

请查看 StackBlitz where I'm at currently。

<div class="textarea"
    formControlName="description"
    contenteditable="true">
</div>

contenteditable div 非常适合作为表单控件使用，我在输入时拥有它的内容：

this.form.controls['description'].valueChanges.subscribe(
    data => {
        console.log(data)
    })

如何将超过字符限制的输入内容用<em> 包装成与 Twitter 的推文框版本完全相同？

更新：

这是一些 sudo 逻辑，我将在用户键入时应用到 contenteditable 内容

characters = 'Lorem ipsum dolor... ' (about 200 characters for testing)

inLimit = characters.substring(0, 140);
outLimit = characters.substring(141);
tagged = '<em>' + outLimit + '</em>';
final = inLimit + tagged;
console.log(final); // over the limit characters wrapped in <em> tag

【问题讨论】：

标签： javascript angular contenteditable angular-reactive-forms

【解决方案1】：

这很有趣 :) 查看结果 https://stackblitz.com/edit/angular-b4mzej 。它仍然有一些奇怪的错误，在第一次应用程序和字符计数后跳转光标，一旦你添加了值然后清除它并尝试从剩下 0 个字符的点开始再次添加，但是当我调试它时，我意识到 stackblitz 本身会稍微改变代码，所以我相信它在正常条件下应该可以正常工作。

主要技巧是使用正确的 propValueAccessor，参见 https://github.com/KostyaTretyak/ng-contenteditable#options

【讨论】：

与propValueAccesor="innerHTML" 的出色工作没有我打印出em 标记...您所说的错误在实施时存在。似乎一旦达到限制就会发生模糊......有什么想法吗？
我在想这样的事情。 stackoverflow.com/questions/6249095/…
我尝试过 .blur() 然后 .focus() 立即，但它停留在开头。最好继续使用 Range。你也可以尝试 .blur() 然后 setTimeout(() => .focus());但它很脏，并且由于下一个滴答声可能会导致一些 UI 滞后 .focus()
我明白了，光标不会“进入”em 标记文本.. 嗯
如果你能分享你的回购，我可以在真实情况下调查它。我可以创建我自己的分支，然后如果它有效，你可以合并它

【解决方案2】：

使用ng-contenteditable 是不可能的。

您应该分叉这个库并扩展它以支持大小限制和自动插入/删除 DOM 节点（callOnChange 方法）。

参见Insert html at caret in a contenteditable div，它提供了纯JS示例http://jsfiddle.net/jwvha/1/。

【讨论】：

【解决方案3】：

您可以将您的内容可编辑区域包含在一个 css 类（比如 .break_word）下，然后指定一个具有类样式_的 css 代码

 .break_word em {word-break : break-all}

试试看能不能帮到你。

【讨论】：