jodit vue

Jodit Vue

Pembungkus vue untuk editor Jodit

Cara menggunakan

Gunakan Versi 2.* untuk Vue 2

Gunakan Versi 3.* untuk Vue 3

Instal Jodit Vue :

 npm install jodit-vue --save
// or with Yarn
yarn add jodit-vue

Impor dan gunakan

Karena komponen ini hanyalah pembungkus, Anda perlu menyertakan css dari editor Jodit di aplikasi Anda agar berfungsi dengan baik, jika Anda menggunakan vue-cli untuk membuat aplikasi Anda, atau sistem build lain Anda dapat mengimpornya secara langsung atau menambahkan tag link dengan file css yang disediakan oleh paket editor Jodit .

 import 'jodit/build/jodit.min.css'
import Vue from 'vue'
import JoditVue from 'jodit-vue'

Vue . use ( JoditVue )

Alih -alih menggunakan Vue.use(JoditVue) Anda dapat menggunakan komponen secara lokal

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> '
        }
    }
}
</ script >

Anda dapat memeriksa dan mengujinya di CodeSanBox juga.

Menggunakan tanpa sistem build

Jika Anda tidak menggunakan sistem build di aplikasi Anda, Anda juga dapat menggunakan Jodit Vue tanpa masalah, periksa dan mengujinya di jsfiddle ini.

Properti Komponen

Jika Anda hanya melewati v-model untuk komponen, itu akan memuat semua fitur editor, jika Anda ingin menyesuaikannya, Anda dapat melakukannya dengan propertinya yang tercantum di bawah ini, tetapi semuanya tidak diperlukan, hanya jika Anda ingin menyesuaikan editor Anda, Anda akan membutuhkannya:

Milik	Jenis	Nilai default	Keterangan
tombol	Array	null	Tombol yang ingin Anda tunjukkan di toolbar, jika ini tidak disediakan, semua tombol akan ditampilkan
Extrabeltons	Array	null	Jika Anda perlu membuat dan menampilkan tombol khusus, Anda dapat melewati array dengan tombol khusus Anda ke properti ini
konfigurasi	Obyek	{}	Objek konfigurasi yang memiliki semua konfigurasi lain untuk editor
plugin	Array	[]	Jika Anda perlu membuat plugin khusus, Anda dapat meneruskan array plugin ke properti ini

Properti Tombol

Saat memberikan tombol untuk ditampilkan di editor, Anda harus memberikan array dengan tombol yang ingin Anda tunjukkan. Nama tombol dapat ditemukan di sini . Anda juga dapat melewati | untuk menempatkan pembagi di antara tombol.

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :buttons = " buttons " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            buttons : [ ' source ' , ' image ' , ' | ' , ' bold ' , ' underline ' , ' italic ' ]
        }
    }
}
</ script >

Properti Tombol Ekstra

Jika Anda perlu membuat tombol khusus untuk editor, Anda dapat membuatnya dan memberikan komponen dengan array

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :buttons = " buttons " :extra-buttons = " customButtons " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            buttons : [ ' source ' , ' image ' , ' | ' , ' bold ' , ' underline ' , ' italic ' ],
            customButtons : [
                {
                    name : ' insertDate ' ,
                    iconURL : ' http://xdsoft.net/jodit/logo.png ' ,
                    exec : function ( editor ) {
                        editor . selection . insertHTML (( new Date ). toDateString ());
                    }
                }
            ]
        }
    }
}
</ script >

Untuk membuat tombol khusus, periksa dokumen Jodit Editor

Properti konfigurasi

Konfigurasi ini memungkinkan Anda untuk melewati semua konfigurasi lain yang ditemukan di sini untuk menyesuaikan editor Anda

Properti plugin

Properti Plugin memungkinkan Anda untuk melewati array objek plugin dengan nama dan panggilan balik yang akan diinisialisasi saat Jodit diinisialisasi. Plugin diinisialisasi secara global dan akan ditambahkan ke semua contoh editor Jodit. Misalnya:

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :plugins = " plugins " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            plugins : [
              {
                name : ' example ' ,
                callback : function ( editor ) {
                  editor . events . on ( ' afterInit ' , function () {
                    console . warn ( ' Example plugin has beed initialized, check Jodit documentation for more details. ' )
                  })
                }
              }
            ]
        }
    }
}
</ script >

Untuk menambahkan plugin Jodit Vue menggunakan Jodit.plugins.add API. Periksa dokumentasi Jodit dan contoh cara mengimplementasikan plugin.

Kredit

• Wendell Adriel
• Semua kontributor