vue tinymce

vue-tinymce

TinyMCE components provided to vue developers

Purpose

Simple use of TinyMCE's Vue components for developers. Provide very simple and easy-to-understand source code for developers as reference, and of course you can also use this component directly to your project. If you find a problem, you can mention the issue and expect your feedback?

How to use

Install components

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

Introduced

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

Other usage examples

• vue-cli usage example: portal
• Webpack usage example: portal (to be filled)

property

name	describe
:content	Type String , as text content is passed into the editor, you can use v-model to achieve two-way binding
@change	Type Function , Input Change Undo Redo ExecCommand KeyUp Event triggered after NodeChange event response returns text content
:setting	Type Object , editor settings, setup is not recommended here
:setup	Type Function , commonly used and customized editor processing, some processing has been done inside the component, it is recommended to add custom code here

More usage details

If you want to know more, please move to the usage details

Local debugging

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

Build support

This repository is built with sao-esm as a template.

License

Copyright (c) packy-tang [email protected]

Open source software according to the MIT protocol.