Vue интегрированный редактор

предисловие

использоватьvue-cli3.0+element-ui+webpackКогда я работал над проектом, я столкнулся с требованием: добавить в управление статьями форматированный текстовый редактор (функция загрузки картинок еще не добавлена), я видел несколько форматированных текстовых редакторов на Baidu, и в итоге остановился на Baidu.Ueditor, может в основном удовлетворить все потребности. После многократного майнинга соответствующие функции были реализованы, и таким образом сделана запись.

1. Загрузите место хранения статических файлов, связанных с Ueditor.

Иди первымОфициальный сайт редактораЗагрузите соответствующие ресурсы (версия 1.4.3.3Jsp, загруженная в этой статье):

Здесь в основном дляvue-cli2а такжеvue-cli3дифференцировать.

vue-cli2

vue-cli2версия создастstaticПапка, используемая для размещения статических ресурсов, распаковать загруженный сжатый пакет и поместить его вstaticВ папке:

vue-cli3

vue-cli3Когда проект инициализируется,publicпапка(сценарии использования общих папок,publicФайлы в папке не будут запакованы и скомпилированы вебпаком, а просто скопированы в запакованныйdistпапка). Разархивируйте скачанный архив и переименуйте егоUEположить вpublicВ папке:

2. Связанная конфигурация после введения vue-uditor-wrap

Установить первымvue-ueditor-wrap, а затем ввести его в соответствующие компонентыvue-ueditor-wrap

npm i vue-ueditor-wrap -D

Зарегистрируйтесь и импортируйте в соответствующий компонент:

Основное внимание уделяетсяmyconfigПараметры конфигурации (подробные параметры конфигурации см.UE/ueditor.config.js),существуетvue-cli2а такжеvue-cli3немного отличается.

vue-cli2

Использование проектаvue-cli2построить иUEпапка скопирована вstaticв папке(как показано в первом пункте),UEDITOR_HOME_URLНастроен как:

Одновременно измените файл конфигурацииueditor.config.jsUEDITOR_HOME_URL в'/UE/'

vue-cli3

использоватьvue-cli3изUEDITOR_HOME_URLНастроен как:

Одновременно измените файл конфигурацииueditor.config.jsсерединаUEDITOR_HOME_URLдля'/static/UE/'

Если вышеуказанные шаги выполнены правильно, окончательный результат отображения должен быть таким:

3. Измените метод расчета длины форматированного текстового содержимого.

Длина содержимого в этом Ueditor (здесь только вvueНапример, двухсторонняя привязка) рассчитываются по длине 1 символа, например вставка смайлика для отображения длины 1:

На самом деле это должна быть длина в байтах с меткой, которую здесь нужно изменитьueditor.all.jsилиueditor.all.min.jsисходный код.

Исправлятьueditor.all.jsПуть

существуетueditor.all.jsглобальный поиск в файлахgetContentLength:

Закомментируйте выделенную часть, затем сожмите и запутайте файл и замените егоueditor.all.min.jsфайл

Исправлятьueditor.all.min.jsПуть

Этот метод относительно прост и груб, непосредственно вueditor.all.min.jsсредний глобальный поискgetContentLengthи удалите выделенную часть:

Эффект после успешной модификации:

4. Другие вопросы

Если аналогичная проблема возникает в приведенной ниже конфигурации:

Пожалуйста, дважды проверьте параметры конфигурацииUEDITOR_HOME_URLПуть правильный. проверьте внимательно! проверьте внимательно! проверьте внимательно! Важные вещи, которые нужно сказать три раза~

наконец

Надеюсь, что эта статья может помочь вам в потребностях ~

Ссылки по теме:
vue-ueditor-wrap