vue tinymce editor

Vue-Tinymce-Editor

Ce composant offre une utilisation facile de TinyMCE pour les développeurs Vue

Démo

Vous pouvez voir une démo et un exemple dans cette page: démo et exemples

Installer

$ npm install vue-tinymce-editor

Comment utiliser

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

Vous pouvez utiliser le composant dans votre balisage

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

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

Propriétés

Propriété	Taper	Défaut	Description
identifiant	requis, chaîne		ID de TextArea de la composante
barre d'outils	Chaîne	'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat'	Barre d'outils 1 de TinyMCE
barre d'outils2	Chaîne	''	Barre d'outils 2 de TinyMCE
plugins	Tableau	['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']	Plugins de TinyMce que vous devez charger
autres_options	Tableau	{}	Autres options TinyMCE. Vous pouvez également remplacer nos options initiales
lire en lecture	Booléen	FAUX	Active ou désactive l'éditeur

Événements

Événement	Paramètre	Description
rédacteur en chef	Événement	Cet événement sera appelé lorsque TinyMce appelle onchane
éditeur	Éditeur	Cet événement sera appelé après l'initialisation de l'éditeur

Localisation

Si vous souhaitez utiliser TinyMCE dans d'autres langues, veuillez suivre ces étapes:

1. Téléchargez le pack de langues que vous souhaitez utiliser à partir d'ici.
2. Déballer le fichier de langue dans votre chemin souhaité, qui est accessible depuis l'extérieur et il y a une URL le pointant.
3. Enfin, définissez Language_url dans d'autres_options vers l'URL pointant vers le fichier de langue.

Par exemple:

 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 > 

Accès direct à l'éditeur TinyMCE

Vous pouvez accéder au TinyMCE lui-même en définissant un reflète à ce composant:

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

Ensuite, vous pouvez accéder à l'éditeur en appelant:

 this . $refs . tm . editor 

Faire un don

Si vous aimez ce projet et qu'il était utile pour vous, ne le laissez pas mourir. Aidez-moi à continuer. Merci. ou tu peux m'acheter un café