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>，如下所示。

＆＃13;

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!'
  }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我已经这样做了。

{{1}}

Vue 2原始HTML绑定到textarea

2 个答案: