vue tinymce

vue-tinymce

提供給vue 開發者使用的TinyMCE 組件

目的

為開發人員簡單使用TinyMCE 的Vue 組件。提供非常簡單易懂的源代碼提供給開發人員作為參考，當然你也可以直接使用這個組件到你的項目。發現問題可以提到issue，期望你的反饋?。

如何使用

安裝組件

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

引入

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

其他使用例子

• vue-cli使用例子：傳送門
• webpack使用例子：傳送門(待補上)

屬性

名稱	描述
:content	類型String ，作為文本內容傳入編輯器，可以使用v-model實現雙向綁定
@change	類型Function ，編輯器中Input Change Undo Redo ExecCommand KeyUp NodeChange事件響應後觸發的事件返回文本內容
:setting	類型Object ，編輯器的設置， setup不建議在這設置
:setup	類型Function , 常用與自定義編輯器處理，組件內部做了些處理，建議在這裡添加自定義的代碼

更多使用細節

想了解更多內容請移步至使用細節

本地調試

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

構建支持

本倉庫由sao-esm作為模板構建。

License

Copyright (c) packy-tang [email protected]

根據MIT協議的開源軟件.