如何在超出字符限制时使用<em>标记包含文本

Question

尝试处理由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逻辑，我会在用户输入

时应用于可信内容

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

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

您应该分叉此库并将其扩展为支持大小限制和DOM节点的自动插入/删除（callOnChange方法）。

请参阅提供纯JS示例Insert html at caret in a contenteditable div的http://jsfiddle.net/jwvha/1/。

Answer 2

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

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

Answer 3

您可以将内容可编辑区域包含在css类（例如.break_word）下，然后指定具有类style_

的css代码

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

尝试它是否可以帮到你。