vue tinymce editor

Vue-tinimce-editor

Ini komponen memberikan penggunaan tinymce yang mudah untuk pengembang vue

Demo

Anda dapat melihat demo dan contoh di halaman ini: demo & contoh

Instalasi

$ npm install vue-tinymce-editor

Cara menggunakan

 import Vue from 'vue'
import tinymce from 'vue-tinymce-editor'
Vue . component ( 'tinymce' , tinymce )

Anda dapat menggunakan komponen dalam markup Anda

 < tinymce id =" d1 " v-model =" data " > </ tinymce > 

 export default {
    data ( ) {
        return {
            data : ''
        } ;
    }
} 

Properti

Milik	Jenis	Bawaan	Keterangan
pengenal	diperlukan, string		ID dari TexTarea Komponen
toolbar1	Rangkaian	'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat'	Toolbar 1 dari Tinymce
toolbar2	Rangkaian	''	Toolbar 2 dari Tinymce
plugin	Array	['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality','template paste textcolor colorpicker textpattern imagetools toc help emoticons hr codesample']	Plugin Tinymce Anda perlu memuat
Other_options	Array	{}	Pilihan Tinymce lainnya. Anda juga dapat mengesampingkan opsi awal kami
readonly	Boolean	PALSU	Mengaktifkan atau menonaktifkan editor

Acara

Peristiwa	Parameter	Keterangan
EditorChange	Peristiwa	Acara ini akan dipanggil saat Tinymce memanggil Onchane
Editorinit	Editor	Acara ini akan dipanggil setelah editor diinisialisasi

Lokalisasi

Jika Anda ingin menggunakan Tinymce dalam bahasa lain, silakan ikuti langkah -langkah ini:

1. Unduh paket bahasa yang ingin Anda gunakan dari sini.
2. Bongkar file bahasa ke jalur yang Anda inginkan, yang dapat diakses dari luar dan ada URL yang menunjuk ke sana.
3. Akhirnya, atur language_url di Other_options ke URL yang menunjuk ke file bahasa.

Misalnya:

 export default {
    data ( ) {
        return {
            data : '' ,
            options : {
                language_url : 'http://example.com/js/langs/fa_IR.js' //This url points to location of persian language file.
            }
        } ;
    }
} 

 < tinymce id =" d1 " v-model =" data " :other_options =" options " > </ tinymce > 

Akses Langsung ke Editor Tinymce

Anda dapat mengakses Tinymce itu sendiri dengan mengatur ref ke komponen ini:

 < tinymce id =" d1 " v-model =" data " ref =" tm " > </ tinymce >

Maka Anda dapat mengakses editor dengan menelepon:

 this . $refs . tm . editor 

Menyumbangkan

Jika Anda menyukai proyek ini dan itu berguna bagi Anda, jangan biarkan itu mati. Bantu saya melanjutkannya. Terima kasih. Atau Anda bisa membelikan saya kopi