html - Vue 2 原始 HTML 绑定(bind)到文本区域

Question

我正在创建一个在线文本编辑器。我需要能够从 textarea 的标签中获取用户文本，操作此文本并将其绑定(bind)回 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>