vue editor js
Can change holder ID
Vue-Editor-JS est le composant EditorJS Wrapper.
Veuillez consulter cela en premier. https://editorjs.io/
Ce plugins est un composant wrapper pour EditorJS. Si vous avez besoin d'utiliser le plugin pour Editor.js, importez-le et définissez la propriété Config.
Veuillez consulter la démo.vue
Veuillez utiliser Vue.use Vue-Editor-JS dans Main.js.
# NPM
npm install --save vue-editor-js
# or Yarn
yarn add vue-editor-js // ...
import Editor from 'vue-editor-js'
Vue . use ( Editor )
// ... // 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 " />Définissez la fonction d'initialisation pour obtenir l'instance de Editor.js lors de l'initialisation
Si vous êtes confondu avec l'utiliser avec Nuxt, veuillez consulter ici
Si vous souhaitez importer uniquement l'éditeur sur un seul composant, vous pouvez le faire en suivant les instructions ci-dessous
@vue/composition-api # NPM
npm i --save @vue/composition-api
# or Yarn
yarn add @vue/composition-api import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue . use ( VueCompositionApi )'vue-editor-js' dans Main.js import { Editor } from 'vue-editor-js'
export default {
// ...
components : {
Editor ,
} ,
// ...
} Identique à des plugins pris en charge, mais avec des noms différents
# NPM
npm install --save @editorjs/header
# or Yarn
yarn add @editorjs/header< 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 > Pour télécharger des images, vous aurez besoin d'un backend pour le traitement des images. Vue-Editor-JS fournit un accessoire config spécial pour la facilité. Si vous testez votre serveur pour télécharger une image, veuillez consulter l'exemple du serveur.
< 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 > config: {
personality: {
endpoints: 'http://localhost:8090/image'
} 
Profitez des éditeurs avec le projet Vue.js?
OU
Ces contributeurs de référentiels sont invités à utiliser la licence Wallaby.js OSS pour obtenir les résultats des tests immédiatement en tapant et voir les résultats de votre éditeur juste à côté de votre code.
