Vue реализует смешанный ввод изображений и текста🔥

Vue.js
Vue реализует смешанный ввод изображений и текста🔥

Знания заключаются в накоплении, чем больше наступишь на яму, тем сильнее станешь😎

предисловие

использовать большеJQuery, используемый для использования операций JQuery APIDOM,чуть не забыл нативную JS работу над DOM.Сегодня столкнулся с ситуацией когда в проекте перемешаны текст и картинки.Первый способ который приходит на ум это использоватьtextareaЯ понял, что не могу реализовать ввод изображений, и тогда я подумал о том, чтобы найти плагин для редактора форматированного текста. плагин.Наггетсфункцию точки кипения релиза, а затем имитировали ее практику, так что есть обмен этой статьей. Позвольте мне сначала показать вам окончательный результат 😋

Реализовать идеи

  • использоватьdivизcontenteditableатрибут, чтобы сделать div редактируемым
  • связыватьrefАтрибут для управления элементами поля ввода
  • Когда изображение нажато, получите адрес изображения и используйте его для преобразования адреса изображения.
  • Создайте тег img и назначьте адрес конвертированного изображения.
  • отrefsЭлемент поля ввода получается из объекта, а созданному тегу img присваивается

Процесс реализации

  • Объявите div редактируемым, прослушайте событие клавиши Enter, отключите проверку орфографии и привяжите ref, чтобы получить текущий элемент
    <div class="input-panel" ref="msgInputContainer" @keydown.enter.exact="sendMessage($event)"
     contenteditable="true" spellcheck="false"></div>
  • Привязать соответствующее событие к полю ввода выражения
    <div class="item-panel" v-for="item in this.emojiList" :key="item.info">
    <img :src="require(`../assets/img/emoji/${item.src}`)" :alt="item.info"
         @mouseover="emojiConversion($event,'over',item.src,item.hover,item.info)"
         @mouseleave="emojiConversion($event,'leave',item.src,item.hover,item.info)"
         @click="emojiConversion($event,'click',item.src,item.hover,item.info)">
</div>
  • Реализовать событие щелчка изображения коробки смайликов
    emojiConversion: function (event, status, path, hoverPath, info) {
    if (status === "over") {
        event.target.src = require(`../assets/img/emoji/${hoverPath}`);
    } else if (status === "click") {
        // 表情输入
        const imgSrc = require(`../assets/img/emoji/${hoverPath}`);
         /**
         * 不推荐的写法:
         *   无法获取焦点
         *   无法在当前焦点的位置插入元素
         */
        // const imgTag = document.createElement("img");
        // imgTag.src = imgSrc;
        // imgTag.alt = info;
        // this.$refs.msgInputContainer.appendChild(imgTag);
        
         /**
         * 推荐使用document暴露的execCommand 方法来操作此处
         *   可以在当前焦点处插入元素
         *   感谢评论区掘友的建议
         */
        const imgTag = `<img src="${imgSrc}" width="28" height="28" alt="${info}">`;
        document.execCommand("insertHTML", false, imgTag);
    } else {
        event.target.src = require(`../assets/img/emoji/${path}`);
    }
}

Побить пит-рекорд

  • Использовать напрямуюметод добавления()

    В проекте компании используется JQuery, и аналогичные требования добавляются напрямую, думая, что это метод, предоставляемый js, но здесь напрямую используется результат, ответ очевиден, а строка DOM вставляется непосредственно в поле ввода 🤣

  • Вручную внедрить строку в dom

    Я вручную реализую это сам. Я не знаю, если я написал это неправильно, и это не работает. Если вы найдете ошибку, пожалуйста, оставьте сообщение в области комментариев.

  • Правильный способ реализации

    Чтобы создать строку DOM, используйте метод execCommand, предоставляемый документом, для вставки созданной строки DOM.инструкции

    • Однако совместимость execCommand оставляет желать лучшего, и если вы не получите ответа, ваш браузер не поддерживает этот API. (картинка с мдн)

    • Если вы рассматриваете вопросы совместимости, вы можете использовать другой метод записи, упомянутый в тексте.
        // const imgTag = document.createElement("img");
    // imgTag.src = imgSrc;
    // imgTag.alt = info;
    // this.$refs.msgInputContainer.appendChild(imgTag);

адрес проекта

Эффект, достигнутый в этой статье, в моем open source проекте:chat-system-githubЕсли он используется, онлайн-адрес проекта:chat-system

напиши в конце

  • Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
  • Эта статья впервые появилась в Наггетс, если нужно перепечатать, укажите источник 💌
Категории