1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/jeffka-vue-quill-editor

Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

Vue-Quill-Editor

🍡Компонент редактора Quill для Vue2, поддерживает SPA и SSR.

Основанный на Quill, текстовый редактор с расширенными функциями для Vue2, поддерживающий рендеринг на стороне сервера и одностраничные приложения.

Пример

Страница демонстрации

Обновление

Этот компонент представляет собой простой и лёгкий редактор. Он не зависит от каких-либо других ресурсов, кроме ядра Quill и CSS. Quill — это прототип редактора с открытым исходным кодом, который имеет мощный API расширения и функцию регистрации модулей. Если вам нужны какие-либо другие прикреплённые функции, пожалуйста, напишите их самостоятельно или используйте другие модули расширения. Наконец, пожалуйста, не задавайте вопросов о том, могу ли я реализовать какую-то функцию в редакторе или почему нет. Спасибо.

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

Установка vue-quill-editor

npm install vue-quill-editor --save

Подключение к Vue

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

// or require
var Vue = require('vue')
var VueQuillEditor = require('vue-quill-editor')

// mount with global
Vue.use(VueQuillEditor)

// If used in Nuxt.js/SSR, you should keep it only in browser build environment
if (process.BROWSER_BUILD) {
  const VueQuillEditor = require('vue-quill-editor/ssr')
  Vue.use(VueQuillEditor)
}

// if you need register quill modules, you need to introduce and register before the vue program is instantiated
import Quill from 'quill'
import { yourQuillModule } from '../yourModulePath/yourQuillModule.js'
Quill.register('modules/yourQuillModule', yourQuillModule)

// mount with component(can't work in Nuxt.js/SSR)
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

Использование различий

SSR и единственное различие в использовании SPA:

  • SPA работает через component, находит экземпляр Quill по атрибуту ref.
  • SSR работает через directive, находит экземпляр Quill через аргумент directive.
  • Другие конфигурации и события одинаковы.

Использование в SSR

<!-- Вы можете настроить имя "myQuillEditor", используемое для поиска экземпляра quill в текущем компоненте -->
<template>
  <!-- Двунаправленная привязка данных -->
  <div class="quill-editor" 
       v-model="content"
       v-quill:myQuillEditor="editorOption">
  </div>

  <!-- Или вручную управляйте синхронизацией данных -->
  <div class="quill-editor" 
       :content="content"
       @change="onEditorChange($event)"
       v-quill:myQuillEditor="editorOption">
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log('это текущий объект экземпляра quill', this.myQuillEditor)
    }
    // Опускаем те же части, что и в следующем примере кода компонента
    // ...
  }
</script>

Использование в SPA

<template>
  <!-- Двунаправленная привязка данных -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

На основе Quill, текстовый редактор с богатым функционалом для Vue2, поддерживает серверный рендеринг и одностраничные приложения. Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/jeffka-vue-quill-editor.git
git@api.gitlife.ru:oschina-mirror/jeffka-vue-quill-editor.git
oschina-mirror
jeffka-vue-quill-editor
jeffka-vue-quill-editor
master