Как передать данные в Редактор quasar tiptap из родительского компонента в vuejs?


Как передать данные в Редактор quasar tiptap из родительского компонента в vuejs?

21.10.2020 09:09:46 Просмотров 3 Источник

Я немного запутался, как использовать это в качестве компонента в моем приложении. В частности, я запутался, как правильно передать данные из моего родительского компонента в <quasar-editor /> из https://github.com/donotebase/quasar-tiptap.

Мой код ниже передаст данные из episode.keyLessons в моем родительском компоненте в Редактор. Однако, когда я пытаюсь ввести текст в Редакторе, клавиша пробела не регистрируется. Если курсор находится в разделе <h1> вверху и нажата какая-либо клавиша, курсор немедленно прыгает вниз в раздел <p> редактора без моего щелчка там.

Что я делаю не так?

Что я уже пробовал:

Редактор.Вью

<template>
  <div>
    <quasar-tiptap v-bind="options" @update="onUpdate" />
  </div>
</template>

<script>
import { QuasarTiptap, RecommendedExtensions } from "quasar-tiptap";
import "quasar-tiptap/lib/index.css";

export default {
  name: "Editor",
  props: ['value'],
  data() {
    return {
      options: {
        content: '',
        editable: true,
        extensions: [
          ...RecommendedExtensions
          // other extenstions
          // name string, or custom extension
        ],
        toolbar: [
          "add-more",
          "separator",
          "bold",
          // other toolbar buttons
          // name string
        ]
      },
      json: "",
      html: ""
    };
  },
  components: {
    QuasarTiptap
  },
  methods: {
    onUpdate({ getJSON, getHTML }) {
      this.json = getJSON();
      this.html = getHTML();
      this.$emit('update', this.html)
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.options.content = newVal;
        console.log(`value changed: ${newVal}`);
      },
      immediate: true
    }
  },
  mounted() {
    // set language dynamically
    this.$o.lang.set("en-us");
  }
};
</script>

Родителей.Вью

<template> 
   <Editor v-model="episode.keyLessons" @update="update" />
</template>

<script>
data: () => ({
   episode: {
      keyLessons: null,
   }
}),
methods: {
   update(value) {
         this.episode.keyLessons = value;
       },
}
</script>
У вопроса есть решение - Посмотреть?

Ответы - Как передать данные в Редактор quasar tiptap из родительского компонента в vuejs? / How to pass data into quasar tiptap editor from parent component in vuejs?

Является ответом!
Andreas

21.10.2020 10:08:33

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

Вот как я рекомендую вам это сделать:

export default {
  name: "Editor",
  props: ['value'],
  data() {
    return {
      valueChangedFromEditor: false,
      options: {
        content: '',
        editable: true,
        extensions: [
          ...RecommendedExtensions
          // other extenstions
          // name string, or custom extension
        ],
        toolbar: [
          "add-more",
          "separator",
          "bold",
          // other toolbar buttons
          // name string
        ]
      },
      json: "",
      html: ""
    };
  },
  components: {
    QuasarTiptap
  },
  methods: {
    onUpdate({ getJSON, getHTML }) {
      this.valueChangedFromEditor = true;
      this.json = getJSON();
      this.html = getHTML();
      this.$emit('update', this.html)
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        // Only update if the value changed from parent component.
        if (!this.valueChangedFromEditor) {
          this.options.content = newVal;
          console.log(`value changed: ${newVal}`);
        }
        this.valueChangedFromEditor = false;
      },
      immediate: true
    }
  },
  mounted() {
    // set language dynamically
    this.$o.lang.set("en-us");
  }
};
Помочь в развитии проекта:
Закрыть X