Путь редактора форматированного текста в проекте vue

Vue.js

Tinymce

Выбрано в началеtinymce, возникли следующие проблемы:

  • Основная ссылка этоhttps://github.com/PanJiaChen/vue-element-admin
  • Первая проблема заключается в том, что путь для введения статических файлов не совпадает с этим
  • Вторая проблема заключается в том, что при вводе этого вivewизModalВо всплывающем окне не редактируется, панель инструментов нажимается, но область редактирования не реагирует
  • Позже я написал всплывающее окно, вставил в него tinymce и, наконец, решил его.
  • Приходит третья проблема, в родственном элементе этого редактора есть раскрывающийся список, мне нужно нажать на раскрывающийся список, значение, связанное в tinymce, также изменяется, и значение, связанное в коде, копируется снова, но Содержимое, отображаемое в редакторе, не обновляется
  • Откажитесь от этого текстового редактора

Vue2-editor

Далее я бросился в объятия Vue2-редактора, и локальная разработка пошла гладко вместе. Базовая конфигурация выглядит следующим образом:

<vue-editor id="editor1" v-model="content" :editorToolbar="customToolbar"></vue-editor>
<vue-editor id="editor2" v-model="addContent" :editorToolbar="customToolbar"></vue-editor>

customToolbar: [
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'header': 1 }, { 'header': 2 }],
  [{ 'align': [] }],
  ['bold', 'italic', 'underline', 'strike'],
  [{ 'list': 'ordered' }, { 'list': 'bullet' }]
],

Но после теста сообщает об ошибке

  TypeError: e.isBuffer is not a function
    at d (vue2-editor.js:1)
    at n (vue2-editor.js:1)
    at t.value (vue2-editor.js:1)
    at new t (vue2-editor.js:1)
    at new t (vue2-editor.js:1)
    at a.setQuillElement (vue2-editor.js:1)
    at a.initializeVue2Editor (vue2-editor.js:1)
    at a.mounted (vue2-editor.js:1)
    at Dt (vue.esm.js:2921)
    at Object.insert (vue.esm.js:4158)

  vue.esm.js:1741 TypeError: Cannot read property 'innerHTML' of null
    at a.value (vue2-editor.js:1)
    at wa.run (vue.esm.js:3233)
    at Rt (vue.esm.js:2981)
    at Array.<anonymous> (vue.esm.js:1837)
    at at (vue.esm.js:1758)

Видел это на официальном сайтеissues, тема:Production Build is breaking Vue2-editor #104, Дата2018-5-18, решения пока нет, пришлось отказаться

Ссылка на эти проблемы:https://github.com/davidroyer/vue2-editor/issues/104

наконец выбралVue-quill-editor

Основное использование относится к этому блогуhttps://blog.csdn.net/div_ma/article/details/79536634c

  1. npm install vue-quill-editor --save
  2. существуетmain.jsвведен в
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)
  1. использовать в модуле Связанный основной код
<quill-editor 
  v-model="addContent" 
  :options="editorOption" 
  >
</quill-editor>

import { quillEditor } from 'vue-quill-editor'
components: { quillEditor },
editorOption: {
  modules: {
    toolbar: [
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'align': [] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }]
    ]
  }
},

После теста ошибок не было, доволен

Обновление от 24 мая

  • В тесте обнаружена проблема, то есть в редакторе контент отображается нормально, но контент отображается отдельно
  • Решение состоит в том, чтобы добавить класс в контейнерql-editor, чтобы отображалось нормально
        <div class="preface-text ql-editor" v-html="report.foreword">
Категории