vue tinymce

vue-tinymce

Componentes de Tinymce fornecidos aos desenvolvedores da VUE

Propósito

Uso simples dos componentes Vue da Tinymce para desenvolvedores. Forneça o código-fonte muito simples e fácil de entender para desenvolvedores como referência e, é claro, você também pode usar esse componente diretamente para o seu projeto. Se você encontrar um problema, pode mencionar o problema e esperar seus comentários?

Como usar

Instalar componentes

yarn add @packy-tang/vue-tinymce
# or
npm install @packy-tang/vue-tinymce

Introduzido

 < template >
    <!-- 全局引入TinyMCE -->
    < script src =" //unpkg.com/[email protected]/tinymce.min.js " > </ script >
    <!-- App -->
    < div id =" app " >
        < vue-tinymce
            v-model =" content "
            :setup =" setup "
            :setting =" setting " />
    </ div >
</ template >
< script >
    import Vue from "vue"
    import VueTinymce from "@packy-tang/vue-tinymce"

    //安装组件
    Vue . use ( VueTinymce )

    new Vue ( {
        el : "#app" ,
        data : function ( ) {
            return {
                content : "<p>html content</p>" ,
                setting : {
                    height : 500
                }
            }
        } ,
        methods : {
            setup ( editor ) {
                console . log ( editor )
            }
        }
    } )
</ script >

Outros exemplos de uso

• Exemplo de uso de vue-cli: portal
• Exemplo de uso do Webpack: Portal (a ser preenchido)

propriedade

nome	descrever
:content	Digite String , como o conteúdo de texto é passado para o editor, você pode usar v-model para obter uma ligação bidirecional
@change	TIPO Function , Input Change Redo Undo ExecCommand KeyUp acionado após a resposta do evento NodeChange retorna o conteúdo do texto
:setting	Digite Object , configurações do editor, setup não é recomendada aqui
:setup	Function de tipo, Processamento de editor comumente usado e personalizado, algum processamento foi feito dentro do componente, recomenda -se adicionar código personalizado aqui

Mais detalhes de uso

Se você quiser saber mais, vá para os detalhes de uso

Depuração local

 # 运行本地例子
$ npm run serve 
# 构建
$ npm run build
# 发布版本
$ npm run release

Construir suporte

Este repositório é construído com SAO-ESM como modelo.

Licença

Copyright (C) packy-tang [email protected]

Software de código aberto de acordo com o protocolo MIT.