在 contenteditable div 中编辑 v-model / 在 div 中突出显示文本

Question

我正在处理的组件在完成后应该是一个 textarea 或 contenteditable div，其中文本后跟一个井号标签会突出显示/或类似芯片。

目前我正在使用 contenteditable div，周围是另一个建议关键字的组件。在那个组件中有一个 v-model

我的目标是将文本放在# 之后，在一个跨度中。

<template>
    <at :ats=['#'] v-model="vmodel">
        <div contenteditable @keypress.enter="highlight"></div>
    </at>
<template>

这不是我想要的，因为它在 div 的开头添加了文本。所以例如当我写的时候： “你好#Something” 我明白了： “#Something Hello”

<script>
import At from 'vue-at'
export default {
components: { At },
   data() {
     return { vmodel: '', };
   },
methods: {
   highlight(){
      this.vmodel = this.vmodel.replace(/\B#([^ ]+)/g,"<span class='highlight-Text'>$&</span>")
   }
}
</script>

如何操作 vmodel，例如在键入时向文本添加一个跨度，它不会输出乱码？

Answer 1

我认为你的问题是正则表达式。您将整个比赛 ($&) 放在跨度内。这包括哈希。我不确定您希望它如何完成，但这会将散列放回原来的位置，并将散列后面的部分放在跨度内。

new Vue({
  el: '#app',
  components: {
    at: {
      props: ['value'],
      template: '<div>{{value}}<slot></slot></div>'
    }
  },
  data() {
    return {
      vmodel: 'Something#-else',
    };
  },
  methods: {
    highlight() {
      this.vmodel = this.vmodel.replace(/(#\B)([^ ]+)/g, "$1<span class='highlight-Text'>$2</span>");
      console.log("New vmodel", this.vmodel);
    }
  }
});

.highlight-Text {
  border-radius: 5px;
  color: black;
  background-color: #5297f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <at v-model="vmodel">
    <div contenteditable @keypress.enter="highlight">editable stuff</div>
  </at>
</div>