Vue в сочетании с текстовым редактором ueditor (разделение скинов)

WebSocket Vue.js внешний фреймворк
Vue в сочетании с текстовым редактором ueditor (разделение скинов)

нужно

(На стороне ПК) Создайте компонент форматированного текста, который может использовать загрузку изображений, загрузку видео, функцию загрузки файлов, простое редактирование текста и функцию публикации, используя передачу через сокет,

упражняться

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

Эти редакторы были опробованы один раз и, наконец, отфильтрованы.

  • Vue-Quill-Editor: локальная загрузка видео не поддерживается
  • vue-froala-wysiwyg: все функции, которые я хочу, включают загрузку изображений и видео, а также дополнительную поддержку отзывчивости, но это платно.
  • udeditor: Функция очень полная, но стиль действительно уродливый, возможно, вам придется инкапсулировать ее самостоятельно.
  • Остальная часть редактора в основном либо маломощная, либо мобильная (преимущество в том, что она легкая)

Поскольку я никогда не разрабатывал форматированный текст, мне потребовался день, чтобы протестировать эти форматированные тексты.Позже я тщательно обдумал это и, наконец, использовал более консервативный способ, используя разработку ueditor, и, кстати, украсив его.

Представить редактора

Скачать адрес и документацию

  • import '../../static/UEditor/ueditor.config'
  • import '../../static/UEditor/ueditor.all.min'
  • import '../../static/UEditor/lang/zh-cn/zh-cn'

Мы собираемся изменить конфигурацию пути в файле ueditor.config.js.

Изменить стиль

После введения ueditor скрываем панель инструментов напрямую, а затем создаем новый div для имитации панелей инструментов.

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

Затем мы переходим непосредственно к div, затем даем ему гибкий макет и переходим кiconfontНекоторые из иконок выше для загрузки, но нам нужно настроить вебпак, чтобы он поддерживал пакетную обработку svg,Эталонная серия «Рука, касающаяся руки»

Сейчас он сильно изменился, и выглядит очень симпатично, ничем не отличается от современных редакторов.

Привязать событие клика к значку

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

    execCommand: function (name) {
      this.editor.execCommand(name)
    },

Я не использовал встроенные функции ueditor для операций вставки картинок, видео и файлов.Я сделал видео и папки в виде индикаторов выполнения и разместил их под редактором форматированного текста.После того, как картинки были успешно загружены, возвращаемое значение было возвращено.Соединены вместе, в соответствии с двусторонней привязкой, динамически создают изображения внутри компонента редактора, щелкните эти три значка, будет выбрано событие, поэтому вы можете использовать тот компонент загрузки, который вы хотите использовать, вы также можете использовать сокет для загрузки и т. д., поэтому, сын, компоненту редактора нужно только поддерживать html-текст редактора, ответственность едина, и его легко поддерживать позже

      editorData: {
        body: '',
        images: []
      },

функция локального сохранения

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

    autoSaveBody () {
      if (this.isAutoSaved && this.editorData.body) {
        let storage = {}
        Object.assign(storage, this.editorData)
        const pms = JSON.stringify(storage)
        this.isAutoSaved = false
        setTimeout(() => {
          localStorage.setItem(this.storageKey, pms)
          this.isAutoSaved = true
        }, 500)
      }
    }

Но есть ситуация, которую необходимо учитывать, будь то первая запись или модификация после публикации, поэтому при внешнем использовании вам нужно оперировать только свойством innerValue, а получить значение этого свойства можно через метод background (фон получает статус модификации), а дальше редактор представит какие данные, внутренняя реализация заключается в добавлении функции инициализации

    init: function () {
      // 外部有默认值
      if (this.value.body) {
        this.editor.setContent(this.value.body)
      } else {
        // 有本地缓存
        const storage = localStorage.getItem(this.storageKey)
        if (storage) {
          const storageJson = JSON.parse(storage)
          Object.assign(this.editorData, storageJson)
          if (this.editorData.body) {
            this.editor.setContent(this.editorData.body)
          }
        } else {
          // 没有本地缓存
          Object.assign(this.editorData, this.$options.data().editorData)
        }
      }
      this.autoSaveInterval = setInterval(() => {
        this.autoSaveBody()
      }, 5000)
    },

недостаток

Компонент слишком большой, сжатие по умолчанию 389к, а после включения gzip около 100к

преимущество

Мощные функции и итерируемые требования к продукту.

Пополнять

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

кодовый адрес

Категории