vue tinymce editor

Vue-Tinymce-Eduitor

Diese Komponente bietet eine einfache Verwendung von Tinymce für VUE -Entwickler

Demo

Auf dieser Seite können Sie eine Demo und ein Beispiel sehen: Demo & Beispiele

Installation

$ npm install vue-tinymce-editor

Wie man benutzt

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

Sie können die Komponente in Ihrem Markup verwenden

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

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

Eigenschaften

Eigentum	Typ	Standard	Beschreibung
Ausweis	Erforderlich, Zeichenfolge		ID der Textbereich der Komponente
Symbolleiste1	Saite	'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat'	Symbolleiste 1 von Tinymce
Symbolleiste2	Saite	'' '	Symbolleiste 2 von Tinymce
Plugins	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']	Plugins von Tinymce, die Sie laden müssen
andere_optionen	Array	{}	Andere Tinymce -Optionen. Sie können auch unsere ersten Optionen überschreiben
Readonly	Boolean	FALSCH	Aktiviert oder deaktiviert den Editor

Ereignisse

Ereignis	Parameter	Beschreibung
Editorchange	Ereignis	Dieses Ereignis wird aufgerufen, wenn Tinymce onchane ruft
Editorinit	Editor	Diese Veranstaltung wird aufgerufen, nachdem der Herausgeber initialisiert wurde

Lokalisierung

Wenn Sie Tinymce in anderen Sprachen verwenden möchten, befolgen Sie bitte die folgenden Schritte:

1. Laden Sie das Sprachpaket herunter, das Sie von hier aus verwenden möchten.
2. Packen Sie die Sprachdatei in Ihren gewünschten Pfad aus, der von außen zugänglich ist, und es zeigt eine URL, die darauf zeigt.
3. Setzen Sie schließlich Language_url in anderen_optionen auf die URL, die auf die Sprachdatei hinweist.

Zum Beispiel:

 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 > 

Direkter Zugriff auf Tinymce Editor

Sie können auf die Tinymce selbst zugreifen, indem Sie einen REF in diese Komponente setzen:

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

Dann können Sie auf den Editor zugreifen, indem Sie anrufen:

 this . $refs . tm . editor 

Spenden

Wenn Ihnen dieses Projekt gefällt und es für Sie nützlich war, lassen Sie es nicht sterben. Hilf mir, es fortzusetzen. Danke schön. Oder Sie können mir einen Kaffee kaufen