vue editor js
Can change holder ID
Vue-Editor-JS es el componente de envoltura EditorJS.
Por favor revise esto primero. https://editorjs.io/
Este complementos es un componente de envoltura para EditorJS. Si necesita usar el complemento para editor.js, importárelo y configure la propiedad de configuración.
Por favor vea la demostración.vue
Utilice Vue.use vue-editor-js en 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 " />Definir la función de inicialización para obtener la instancia de Editor.js al inicializar
Si está confundido con usarlo con Nuxt, consulte aquí
Si desea importar solo el editor en un solo componente, entonces puede hacerlo siguiendo las instrucciones a continuación
@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' en main.js import { Editor } from 'vue-editor-js'
export default {
// ...
components : {
Editor ,
} ,
// ...
} Igual que en complementos compatibles, pero con diferentes nombres
# 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 > Para cargar imágenes, necesitará un backend para procesar las imágenes. Vue-Editor-JS proporciona un accesorio config especial para facilidad. Si está probando su servidor para cargar una imagen, consulte el ejemplo del servidor.
< 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'
} 
¿Disfruta de editorjs con el proyecto Vue.js?
O
Los contribuyentes de este repositorio pueden usar la licencia Wallaby.js OSS para obtener los resultados de las pruebas inmediatamente a medida que escribe, y ver los resultados en su editor justo al lado de su código.
