超过字符限制时，如何使用 <em> 标签将文本换行到 contenteditable 中

Question

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

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

contenteditable div 作为表单控件工作得很好，我在输入时得到了它的内容：

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

如何将超过字符限制的输入内容用 <em> 与 Twitter 的 tweet-box 版本完全一样？

更新：

这是一些 sudo 逻辑，我将在用户键入内容时将其应用于可编辑的内容

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

Answer 1

您可以在 css class（例如 .break_word）下包含您的内容可编辑区域，然后指定具有 class 的 css 代码风格_

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

试试看能不能帮到你。

Answer 2

使用 ng-contenteditable 无法做到这一点。

您应该分叉此库并扩展它以支持 DOM 个节点的大小限制和自动 inserting/removing（callOnChange 方法）。

参见Insert html at caret in a contenteditable div which provides pure JS example http://jsfiddle.net/jwvha/1/。

Answer 3

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

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

超过字符限制时，如何使用 <em> 标签将文本换行到 contenteditable 中

How to wrap text within contenteditable with <em> tag when exceeding the character limit

javascript

contenteditable

angular

angular-reactive-forms