Vue 2 原始 HTML 绑定到 textarea

Question

我正在创建一个在线文本编辑器。我需要能够从 textarea 的标记中获取用户文本，操作此文本并将其绑定回 textarea，但其中包含 HTML。

例子：

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

哪里someText设置为：

someText: '<b>bold</b>.. not bold'

并应显示为： 粗体.. 不粗体

代替： <b>bold</b>.. not bold

我有一种感觉，这是不可能的textarea标签，但有什么方法可以做到这一点？

Answer 1

通常你会使用v-html，但你是对的，里面<textarea>的值将是原始的，而不是经过处理的（不会是粗体）。

为了实现您想要的，也许您可​​以利用该contenteditable属性来创建一个<html-textarea>，如下所示。

Vue.component('html-textarea',{
  template:'<div contenteditable="true" @input="updateHTML"></div>',
  props:['value'],
  mounted: function () {
    this.$el.innerHTML = this.value;
  },
  methods: {
    updateHTML: function(e) {
      this.$emit('input', e.target.innerHTML);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    message: 'H<b>ELLO</b> <i>editable</i> Vue.js!'
  }
});

div[contenteditable] { border: 1px solid lightblue; }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <html-textarea v-model="message"></html-textarea>
  <hr>
  <div>
    Raw message: 
    <pre>{{ message }}</pre>
  </div>
</div>