vue tinymce editor

Vue-Tinymce-Editor

Este componente fornece fácil uso de tinymce para desenvolvedores de vue

Demonstração

Você pode ver uma demonstração e um exemplo nesta página: demonstração e exemplos

Instalação

$ npm install vue-tinymce-editor

Como usar

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

Você pode usar o componente em sua marcação

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

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

Propriedades

Propriedade	Tipo	Padrão	Descrição
eu ia	Necessário, string		Id da textarea do componente
barra de ferramentas1	Corda	'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat'	Barra de ferramentas 1 de tinymce
barra de ferramentas2	Corda	''	Barra de ferramentas 2 de tinymce
plugins	Variedade	['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 você precisa carregar
outros_options	Variedade	{}	Outras opções de Tinymce. Você também pode substituir nossas opções iniciais
Readonly	Booleano	falso	Ativa ou desativa o editor

Eventos

Evento	Parâmetro	Descrição
EditorChange	Evento	Este evento será chamado quando o Tinymce chama Onchane
Editorinit	Editor	Este evento será chamado depois que o editor for inicializado

Localização

Se você deseja usar o tinymce em outros idiomas, siga estas etapas:

1. Faça o download do pacote de idiomas que você deseja usar aqui.
2. Desembale o arquivo de idiomas no caminho desejado, que é acessível de fora e há um URL apontando para ele.
3. Por fim, defina o idioma_url em outras_options no URL apontando para o arquivo de idiomas.

Por exemplo:

 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 > 

Acesso direto ao editor de Tinymce

Você pode acessar o próprio tinymce definindo um ref para este componente:

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

Então você pode acessar o editor ligando:

 this . $refs . tm . editor 

Doar

Se você gosta deste projeto e foi útil para não deixar ele morrer. Ajude -me a continuar. Obrigado. ou você pode me comprar um café