vue editor js
Can change holder ID
Vue-editor-js é o componente Wrapper Editorjs.
Por favor, revise este primeiro. https://editorjs.io/
Este plugins é um componente de wrapper para editorjs. Se você precisar usar o plug -in para editor.js, importá -lo e defina a propriedade Config.
Por favor, veja a demonstração.vue
Por favor, use Vue.use Vue-Editor-Js em 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 " />Defina a função de inicialização para obter a instância do editor.js ao inicializar
Se você está confuso com usá -lo com o Nuxt, veja aqui
Se você deseja importar apenas o editor em um único componente, pode fazê -lo seguindo as instruções abaixo
@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' em main.js import { Editor } from 'vue-editor-js'
export default {
// ...
components : {
Editor ,
} ,
// ...
} O mesmo que em plugins suportados, mas com nomes diferentes
# 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 fazer upload de imagens, você precisará de um back -end para o processamento das imagens. O Vue-Editor-JS fornece um suporte config especial para a facilidade. Se você estiver testando seu servidor para fazer upload de uma imagem, consulte o Exemplo do 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'
} 
Desfrute de editorjs com o projeto vue.js?
OU
Esses colaboradores do repositório podem usar a licença Wallaby.js OSS para obter resultados de testes imediatamente à medida que você digitar e ver os resultados no seu editor ao lado do seu código.
