vue tinymce editor

vue-tinimce-editor

Este componente proporciona un uso fácil de TinyMCE para los desarrolladores de Vue

Manifestación

Puede ver una demostración y un ejemplo en esta página: demostración y ejemplos

Instalación

$ npm install vue-tinymce-editor

Cómo usar

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

Puede usar el componente en su marcado

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

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

Propiedades

Propiedad	Tipo	Por defecto	Descripción
identificación	requerido, cadena		ID de Textea de Componente
barra de herramientas1	Cadena	'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat'	Barra de herramientas 1 de TinyMCE
barra de herramientas2	Cadena	''	Barra de herramientas 2 de TinyMCE
complementos	Formación	['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']	complementos de tinyMCE que necesita cargar
otras_options	Formación	{}	Otras opciones de tinymce. También puede anular nuestras opciones iniciales
readonamente	Booleano	FALSO	Habilita o deshabilita el editor

Eventos

Evento	Parámetro	Descripción
cambio de editor	Evento	Este evento se llamará cuando TinyMce llama a Onchane
editorinito	Editor	Este evento se llamará después de que se inicialice el editor

Localización

Si desea usar TinyMCE en otros idiomas, siga estos pasos:

1. Descargue el paquete de idiomas que desea usar desde aquí.
2. Desempaqué el archivo de idioma en su ruta deseada, a la que se puede acceder desde el exterior y hay una URL que le apunta.
3. Finalmente, establezca lenguaje_url en otras_options a la URL que apunta al archivo de idioma.

Por ejemplo:

 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 > 

Acceso directo al editor TinyMCE

Puede acceder al TinyMCE en sí estableciendo una referencia a este componente:

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

Entonces puede acceder al editor llamando:

 this . $refs . tm . editor 

Donar

Si te gusta este proyecto y fue útil para no dejarlo morir. Ayúdame a continuar. Gracias. O puedes comprarme un café