vue editor js

Vue-Editor-JS

Vue-editor-JS является компонентом обертки EditorJS.

Пожалуйста, просмотрите это первым. https://editorjs.io/

Для пользователей версии до 2.0.0.

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

Пожалуйста, смотрите Demo.vue

Для пользователей версии до 1.0.0.

Пожалуйста, используйте Vue.use vue-editor-js в main.js.

Поддерживаемые плагины

• Личность
• Заголовок
• Список
• Изображение
• InlineCode
• Внедрение
• Цитировать
• Маркер
• Код
• Связь
• Разделитель
• Сырой
• Стол
• Предупреждение
• Абзац
• Контрольный список

Установка

 # NPM
npm install --save vue-editor-js

# or Yarn
yarn add vue-editor-js

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

В main.js

 // ...
import Editor from 'vue-editor-js'

Vue . use ( Editor )
// ...

В nuxt.js

 // in nuxt.config.js
plugins: [
  {
    src : '~/plugins/vue-editor.js' , ssr : false
  }
] ,

// in ~/plugins/vue-editor.js
import Vue from 'vue'
import Editor from 'vue-editor-js'

Vue . use ( Editor ) 

  < editor ref="editor" : config = " config " : initialized = " onInitialized " />

Определите функцию инициализации, чтобы получить экземпляр Editor.js при инициализации

Если вы путаете с использованием его с nuxt, пожалуйста, посмотрите здесь

Местный импорт

Если вы хотите импортировать редактор только на один компонент, то вы можете сделать это, следуя инструкциям ниже

1. Обязательно установите @vue/composition-api

 # NPM
npm i --save @vue/composition-api

# or Yarn
yarn add @vue/composition-api

2. В main.js:

 import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue . use ( VueCompositionApi )

3. Не импортируйте ничего от 'vue-editor-js' в main.js
4. В вашем компоненте:

 import { Editor } from 'vue-editor-js'

export default {
  // ...
  components : {
    Editor ,
  } ,
  // ...
} 

Инструменты

Поддерживаемые инструменты

То же самое, что и в поддерживаемых плагинах, но с различным именом

• заголовок
• список
• код
• InlineCode
• личность
• внедрение
• Linktool
• маркер
• стол
• сырой
• разделитель
• цитировать
• изображение
• предупреждение
• абзац
• Контрольный список

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

1. Установите инструмент Editorjs

 # NPM
npm install --save @editorjs/header

# or Yarn
yarn add @editorjs/header

2. Вставьте пакет в конфигурацию

< editor
    ...
    : config = " {
        tools: {
          header: require ( ' @editorjs/header ' )
        }
    } "
/>

Сохранение примера кода

< template >
	< div id = " app " >
		< Editor ref = " editor " :config = " config " />

		< button @click = " invokeSave " >Save</ button >
	</ div >
</ template >

< script >
	export default {
		methods : {
			invokeSave () {
				this . $refs . editor . _data . state . editor . save ()
					. then (( data ) => {
						// Do what you want with the data here
						console . log (data)
					})
					. catch ( err => { console . log (err) })
			}
		},
	}
</ script >

Загрузите изображение (> = 1.1.0)

Для загрузки изображений вам понадобится бэкэнд для обработки изображений. Vue-Editor-JS предоставляет специальную config опору для облегчения. Если вы тестируете свой сервер для загрузки изображения, см. Пример сервера.

< editor : config = " config " />

< script >
...
data () {
  return {
      config : {
        image : {
          // Like in https://github.com/editor-js/image#config-params
          endpoints : {
            byFile : ' http://localhost:8090/image ' ,
            byUrl : ' http://localhost:8090/image-by-url ' ,
          },
          field : ' image ' ,
          types : ' image/* ' ,
        },
      }
  }
}
</ script >

Загрузите аватар личности (> = 2,0,1)

  config: {
    personality: {
      endpoints: 'http://localhost:8090/image'
    } 

Другие реквизиты:

• CustomTools - объект с именем (ключ) и классом пользовательского инструмента (значение)

Наслаждайтесь editorjs с проектом Vue.js?

Как внести свой вклад?

1. Вилка этот проект.
2. Редактировать код.
3. Премьер -министр

ИЛИ

1. Просто отправьте проблему!

Участники

• Парк Чанджу
• Яшха
• Лоскир

Wallaby.js

Эти участники репозитория могут использовать лицензию Wallaby.js OSS, чтобы немедленно получить результаты теста при вводе, и увидеть результаты в вашем редакторе рядом с вашим кодом.