Мобильный текстовый редактор на базе Vue vue-quill-editor в действии

Vue.js

Существует множество отличных текстовых редакторов, таких как: UEditor, wangEditor и т. д., но не все из них могут хорошо работать на мобильных устройствах.

Не будем обсуждать, действительно ли мобильный терминал нуждается в форматированном тексте, раз такая потребность есть, давайте ее реализуем.

неудачная попытка

Правильный выбор — это начало успеха, и перед разработкой необходимо провести некоторые исследования.

С помощью различных сборов данных было выявлено несколько альтернатив:UEditor,vue-quill-editor,wangEditor,vue-html5-editor,tinymce.

UEditorЭто старый богатый текстовый редактор Baidu, но интерфейс имеет ощущение прошлого века.Последние новости на официальном сайте от 2016-05-18. Официально не поддерживается уже много лет, но есть много народных обучающих материалов, так что пробуйте как последний, а остальные уже не исправишь.UEditor.

wangEditorОн действительно привлекает внимание, говоря официальными словами, он легкий, лаконичный, простой в использовании, с открытым исходным кодом и бесплатный. Думаю, это хорошо, сначала попробуйте это в проекте. печальная находкаwangEditorПроизводительность на мобильной стороне немного разочаровывает.Например, я хочу настроить заголовок H1, иногда он не работает, иногда его можно установить успешно, иногда нет, в большинстве случаев это не не работает, я не знаю, проблема ли это в моей работе.

попробуй дальшеvue-html5-editor, введение довольно хорошо. После выполнения инструкций некоторое время редактор не появился на странице, как ожидалось... После долгих исследований я не смог найти проблему. Забудьте об этом... К счастью, есть и другие варианты.

наконец-то нашел тебя

тогда попробуй использоватьvue-quill-editor, причина, по которой я не использовал его сначала, заключается в том, что документы все на английском языке... В конце концов, английские документы не так удобны, как китайские, поэтому сначала попробуйте фреймворк с китайскими документами. Кто когда-либо думал, что другие несколько были слишком неудовлетворительны, поэтому им пришлось использовать это. Эффект на мобильной стороне на удивление хорош, взгляните на реальный эффект:

Он отлично поддерживает различные текстовые эффекты, а также умеет вставлять картинки.Внешний вид редактора тоже очень красивый, вот и все!

использовать в проекте

Для быстрой интеграции в проект необходимы два документа:домашняя страница github vue-quill-editorа такжеОфициальный сайт Quill.

Основное использованиеvue-quill-editorЕсть введения, если вы хотите сделать какую-то персонализированную конфигурацию, вам нужно увидетьОфициальный сайт QuillДокументация по различным свойствам исчезла.

Вот шаги для моей интеграции:

1. Установите редактор vue-quill

npm install vue-quill-editor —save

2. Глобальный импорт

существуетmain.jsгенерал-лейтенантvue-quill-editorимпортировать проект

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, /* { default global options } */)

вVue.use(VueQuillEditor, /* { default global options } */)Второй параметрQuillКонфигурация. Здесь я только что изменил по умолчаниюplaceholderПодскажите, поэтому последняя строка должна быть:

Vue.use(VueQuillEditor, {
  placeholder: '请输入内容',
});

Для получения подробной информации о настройке см.Официальный сайт Quill

3. Использование в коде

Использовать напрямую<quill-editor>Просто пометить

<template>
  <!-- bidirectional data binding（双向数据绑定） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>
 </template>

полный код

Код вышеуказанного эффекта выглядит следующим образом:

<template>
  <div class="wrapper">
    <div class="title" v-html="title"></div>
    <div class="input-wrapper" v-for="(option,index) in options">
      <div class="sub-title">{{'(' + option.item + ').'}}</div>
      <quill-editor class="editor"
                    v-model="messages[index]"
                    ref="myQuillEditor"
                    @blur="onEditorBlur"
                    @focus="onEditorFocus"
                    @ready="onEditorReady">
      </quill-editor>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    props: {
      item: {
        type: Object,
        required: true
      },
      index: {
        type: Number,
        required: true
      },
    },
    data() {
      return {
        messages: [],
      }
    },
   
    methods: {

      onEditorBlur() {
        console.log('blur',this.messages)
      },

      onEditorFocus(){
        console.log('focus',this.messages)
      },

      onEditorReady(){
        console.log('ready',this.messages)
      }
  }
</script>

<style lang="scss">

  .wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .title {
      font-size: $font-size-large;
      color: $text-main;
      padding-bottom: px2rem(6);
      line-height: 150%;
    }

    .input-wrapper {
      display: flex;
      flex-direction: row;
      width: 100%;
      margin: px2rem(5) 0;
      box-sizing: border-box;

      .editor{
        width: 100%;
        height: px2rem(200);
      }

      .sub-title {
        font-size: $font-size-normal;
        color: $text-normal;
      }

      .field {
        flex: 1;
        border: 1px solid $border-third;
      }
    }
  }

  div.ql-container.ql-snow{
    height: px2rem(100);
  }

  div.ql-editor.ql-blank{
    height: px2rem(50);
  }

</style>

Некоторые данные и интерфейсы, тесно связанные с бизнесом компании, были удалены.

Следует отметить два момента:

  1. Высота поля ввода по умолчанию в редакторе очень велика, что приводит к перекрытию поля ввода другим содержимым. Высота поля ввода может быть изменена двумя последними стилями.

  2. На странице может отображаться несколько полей ввода форматированного текста. В этом примере поля ввода размещаются вv-forв цикле. Как отличить значение каждого поля ввода? только при привязкеv-model="messages[index]"использоватьindexПривяжите соответствующее расположение массива.

Вышеупомянутоеvue-quill-editorиспользовать в реальных проектах.

Категории