vue tinymce

vue-tinimce

Componentes tinyMCE proporcionados a los desarrolladores de Vue

Objetivo

Uso simple de los componentes VUE de TinyMCE para desarrolladores. Proporcione un código fuente muy simple y fácil de entender para los desarrolladores como referencia y, por supuesto, también puede usar este componente directamente en su proyecto. Si encuentra un problema, ¿puede mencionar el problema y esperar sus comentarios?

Cómo usar

Instalar componentes

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

Introducido

 < 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 >

Otros ejemplos de uso

• Ejemplo de uso de Vue-Cli: Portal
• Ejemplo de uso de Webpack: Portal (que se llenará)

propiedad

nombre	describir
:content	Tipo de String , a medida que el contenido de texto se pasa al editor, puede usar v-model para lograr un enlace bidireccional
@change	Function de tipo, Change Input Undo el evento ExecCommand KeyUp Redo activado después de que la respuesta del evento NodeChange devuelve contenido de texto
:setting	Tipo de Object , configuración del editor, setup no se recomienda aquí
:setup	Function de tipo, procesamiento del editor comúnmente utilizado y personalizado, se ha realizado un procesamiento dentro del componente, se recomienda agregar código personalizado aquí

Más detalles de uso

Si desea saber más, muévase a los detalles de uso

Depuración local

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

Construir soporte

Este repositorio está construido con SAO-ESM como plantilla.

Licencia

Copyright (c) Packy-Tang [email protected]

Software de código abierto de acuerdo con el protocolo MIT.