VUE-COMPOSITION-API: почему ref не реагирует на contenteditable

После того, как я вставил изображение в contenteditable, я заметил, что ref() не может догнать вставленное изображение в текст.

  1. Перейдите по ссылке: https://codesandbox.io/s/zealous-ardinghelli-b05ph
  2. Поместите курсор в текст
  3. Нажмите кнопку ВСТАВИТЬ ИЗОБРАЖЕНИЕ МЕЖДУ ТЕКСТОМ.
  4. Обратите внимание на показанный ref() под кнопкой
const insertImgTag = () => {
      const image =
        '<img class="separator" src="/text-image.png" width="27px" height="19px">';

      let sel, range, node;
      if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
          range = window.getSelection().getRangeAt(0);
          node = range.createContextualFragment(image);
          range.insertNode(node);
        }
      } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(image);
      }
    };

введите описание изображения здесь

обратите внимание на изображение выше, показанный ref() по-прежнему считает <img> как один, а не два, как текст


javascript vue.js vue-composition-api
person mending3    schedule 19.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что я не получаю событие в компоненте. Это определенно не проблема с ref (). Но в любом случае универсальная пересылка событий полностью взломана с vue2 (вы заметите, что в contenteditable исходном коде я должен вручную пересылать все события ...)

Итак, два варианта:

  1. Я предлагаю вам попробовать с Vue3 (я прекратил дальнейшую разработку vue-contenteditable для Vue2, поддерживается только версия Vue3)

  2. Если вы действительно не можете перейти на vue 3, вы можете использовать этот хак, чтобы исправить свою проблему:

<div id="app">
    <contenteditable
+++   ref="ce"
      v-model="string"
      tag="p"
      class="text-data"
[...]
--- setup() {
+++ setup(props, {refs}) {
[...]
    const insertImgTag = () => {
      const image =
        '<img class="separator" src="/text-image.png" width="27px" height="19px">';

      let sel, range, node;
      if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
          range = window.getSelection().getRangeAt(0);
          node = range.createContextualFragment(image);
          range.insertNode(node);
        }
      } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(image);
      }
+++   string.value = refs.ce.current_content();
    };

https://codesandbox.io/s/lucid-glitter-8c4qp?file=/src/App.vue (примечание: {refs} в настройке - это взлом vue-Compositionapi, потому что способ vue3 не может быть реализован с vue2)

person hl037_    schedule 30.03.2021