vue tinymce

vue-tinymce

Composants TinyMCE fournis aux développeurs Vue

But

Utilisation simple des composants Vue de TinyMCE pour les développeurs. Fournissez un code source très simple et facile à comprendre pour les développeurs comme référence, et bien sûr, vous pouvez également utiliser ce composant directement dans votre projet. Si vous trouvez un problème, vous pouvez mentionner le problème et vous attendre à vos commentaires?

Comment utiliser

Installer des composants

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

Présenté

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

Autres exemples d'utilisation

• Vue-Cli Exemple d'utilisation: Portail
• Exemple d'utilisation de WebPack: portail (à remplir)

propriété

nom	décrire
:content	Tapez String , à mesure que le contenu du texte est transmis dans l'éditeur, vous pouvez utiliser v-model pour obtenir une liaison bidirectionnelle
@change	Function de type, Input Change Undo Redo ExecCommand L'événement KeyUp déclenché après la réponse de l'événement NodeChange Renvoie le contenu du texte
:setting	Tapez Object , paramètres de l'éditeur, setup n'est pas recommandée ici
:setup	Function de type, traitement de l'éditeur couramment utilisé et personnalisé, certains traitements ont été effectués à l'intérieur du composant, il est recommandé d'ajouter du code personnalisé ici

Plus de détails d'utilisation

Si vous voulez en savoir plus, veuillez passer aux détails d'utilisation

Débogage local

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

Construire un support

Ce référentiel est construit avec SAOOSM comme modèle.

Licence

Copyright (c) packy-tang [email protected]

Logiciel open source selon le protocole du MIT.