使用v模型从textarea获取新行-VueJS

Question

我担心如何从textarea中获取字符串，但又如何通过按Enter键以及TAB空间来获取添加的每一行。优先事项是获取每个新行，因此我可以使用该字符串将其添加到段落中，但要尊重新行，TAB空间。

示例：

文本文本：http://prntscr.com/kvbbcv。

当我为段落添加价值时： http://prntscr.com/kvbbur

另一个示例：http://prntscr.com/kvhmca

解决此问题的最佳实践是什么？

代码：

<textarea v-model="comment"></textarea>

<p>{{ comment }}</p>

Answer 1

我找到了解决此问题的方法。

解决方案是使用<div contenteditable></div>并在<div>中更改其中的内容时从此@input="contentEditableChange()"获取值

该函数将值返回为HTML。但是，使用v-html可以将html字符串转换为html预览。

所以最终的解决方案代码是：

<div id="unique-element" @input="contentEditableChange()" contenteditable></div>

<p v-html="message"></p>

方法：

contentEditableChange() {
   this.message = document.getElementById("unique-element").innerHTML;
},

Answer 2

如果您使用ckeditor，可以尝试这样

<ckeditor v-model="comment"></ckeditor>    
<p v-html>{{comment}}</p>

因为ckeditor已自动添加了新行。或者如果您使用textarea，请手动添加一个<br>标签。