vue editor js
Can change holder ID
Vue-Editor-JS adalah komponen pembungkus editor.
Harap tinjau ini dulu. https://editorjs.io/
Plugin ini adalah komponen pembungkus untuk editorjs. Jika Anda perlu menggunakan plugin untuk editor.js maka impor dan atur properti konfigurasi.
Silakan lihat demo.vue
Silakan gunakan Vue.use vue-editor-js di 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 " />Tentukan fungsi inisialisasi untuk mendapatkan instance editor.js saat menginisialisasi
Jika Anda bingung menggunakannya dengan Nuxt, silakan lihat di sini
Jika Anda hanya ingin mengimpor editor pada satu komponen maka Anda dapat melakukannya dengan mengikuti instruksi di bawah ini
@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' di Main.js import { Editor } from 'vue-editor-js'
export default {
// ...
components : {
Editor ,
} ,
// ...
} Sama seperti di plugin yang didukung, tetapi dengan penamaan yang berbeda
# 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 > Untuk mengunggah gambar, Anda akan memerlukan backend untuk memproses gambar. Vue-Editor-JS menyediakan prop config khusus untuk kemasyhuran. Jika Anda menguji server Anda untuk mengunggah gambar, silakan lihat contoh server.
< 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'
} 
Nikmati Editorjs dengan Proyek Vue.js?
ATAU
Kontributor repositori ini dipersilakan untuk menggunakan lisensi Wallaby.js OSS untuk mendapatkan hasil tes segera saat Anda mengetik, dan melihat hasilnya di editor Anda tepat di sebelah kode Anda.
