vue editor js

Vue-Eduitor-Js

Vue-Eduitor-JS ist eine Redaktionskomponente von EditorJS.

Bitte überprüfen Sie dies zuerst. https://editorjs.io/

Für Benutzer vor 2.0.0 Versionen.

Dieses Plugins ist eine Wrapper -Komponente für EditorJs. Wenn Sie das Plugin für Editor.js verwenden müssen, importieren Sie es und setzen Sie die Konfigurationseigenschaft.

Bitte beachten Sie die Demo.vue

Für Benutzer vor 1.0.0 Versionen.

Bitte verwenden Sie Vue.use Vue-Editor-Js in main.js.

Unterstützte Plugins

• Persönlichkeit
• Kopfball
• Liste
• Bild
• Inlinecode
• Einbetten
• Zitat
• Marker
• Code
• Link
• Abgrenzer
• Roh
• Tisch
• Warnung
• Absatz
• Checkliste

Installation

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

# or Yarn
yarn add vue-editor-js

Verwendung

In Main.js

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

Vue . use ( Editor )
// ...

In 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 " />

Definieren Sie die Initialisierungsfunktion, um die Instanz von editor.js bei der Initialisierung zu erhalten

Wenn Sie verwechselt sind, es mit Nuxt zu verwenden, finden Sie hier bitte

Lokaler Import

Wenn Sie nur den Editor in einer einzigen Komponente importieren möchten, können Sie dies tun, indem Sie den folgenden Anweisungen folgen

1. Stellen Sie sicher, dass Sie @vue/composition-api installieren

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

# or Yarn
yarn add @vue/composition-api

2. In main.js:

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

Vue . use ( VueCompositionApi )

3. Importieren Sie nichts von 'vue-editor-js' in main.js
4. In Ihrer Komponente:

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

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

Werkzeuge

Unterstützte Werkzeuge

Gleich wie in unterstützten Plugins, aber mit unterschiedlichen Namen

• Kopfball
• Liste
• Code
• Inlinecode
• Persönlichkeit
• einbetten
• LinkTool
• Marker
• Tisch
• roh
• Abgrenzer
• Zitat
• Bild
• Warnung
• Absatz
• Checkliste

Verwendung

1. Installieren Sie das EditorJS -Tool

 # NPM
npm install --save @editorjs/header

# or Yarn
yarn add @editorjs/header

2. Fügen Sie das Paket in die Konfigurationsquelle ein

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

Beispielcode speichern

< 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 >

Bild hochladen (> = 1.1.0)

Für das Hochladen von Bildern benötigen Sie ein Backend für die Verarbeitung der Bilder. Vue-Eduitor-Js bietet eine spezielle config für die Assabilität. Wenn Sie Ihren Server testen, um ein Bild hochzuladen, finden Sie im Serverbeispiel.

< 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 >

Persönlichkeit avatar hochladen (> = 2.0.1)

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

Andere Requisiten:

• CustomTools - Objekt mit Name (Schlüssel) und Klasse eines benutzerdefinierten Tools (Wert)

Genießen Sie EditorJs mit Vue.js Project?

Wie kann man einen Beitrag leisten?

1. Fork dieses Projekt.
2. Code bearbeiten.
3. Pr

ODER

1. Senden Sie einfach ein Problem ein!

Mitwirkende

• Changjoo Park
• Yashha
• Loskir

Wallaby.js

Mit diesen Repository -Mitwirkenden können Sie Wallaby.js OSS -Lizenz verwenden, um beim Eingeben sofort Testergebnisse zu erhalten, und sehen Sie die Ergebnisse in Ihrem Editor direkt neben Ihrem Code.