редактировать v-модель в contenteditable div / выделять текст в div - PullRequest
Новая
       6

редактировать v-модель в contenteditable div / выделять текст в div

0 голосов
/ 11 февраля 2019

Компонент, над которым я работаю, должен по окончании быть текстовой областью или условным дивидендом, где текст, за которым следует хэштег, выделяется / или в чем-то вроде чипа.

В настоящий момент я 'я работаю с contenteditable div , окруженным другим компонентом, который предлагает ключевые слова.В этом компоненте есть v-модель

Моя цель - поместить текст после # в промежутке .

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

Это не то, что я хочу, так как он добавляет текст в начале div.Например, когда я пишу : «Привет # что-то» Я получаю: «# Что-то привет» 

<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, например, добавить текст к тексту во время набора текста, чтобы он не выводил бред?

1 Ответ

0 голосов
/ 12 февраля 2019

Я думаю, что ваша проблема в регулярном выражении.Вы помещаете весь матч ($&) в промежуток.Это включает в себя хэш.Я не совсем уверен, как именно вы хотите, чтобы это было сделано, но это возвращает хеш туда, где он был, и помещает часть после хеша внутри диапазона. 

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