vue tinymce

Vue-Tinymce

Vue開発者に提供されるTinymceコンポーネント

目的

開発者向けのTinymceのVueコンポーネントの簡単な使用。リファレンスとして開発者に非常にシンプルでわかりやすいソースコードを提供します。もちろん、このコンポーネントをプロジェクトに直接使用することもできます。問題が見つかった場合、問題に言及してフィードバックを期待できますか？

使い方

コンポーネントをインストールします

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の使用例：ポータル
• Webパックの使用例：ポータル（入力する）

財産

名前	説明する
:content	タイプString 、テキストコンテンツがエディターに渡されると、 v-modelを使用して双方向のバインディングを実現できます
@change	タイプFunction 、 Input Change NodeChangeイベント応答後にトリガーされたExecCommand KeyUpイベントをUndo Redoキーアップイベントがテキストコンテンツを返します
:setting	Object 、エディターの設定、 setupここではお勧めしません
:setup	タイプFunction 、一般的に使用され、カスタマイズされたエディター処理、一部の処理はコンポーネント内で行われています。ここにカスタムコードを追加することをお勧めします

より多くの使用の詳細

もっと知りたい場合は、使用法の詳細に移動してください

ローカルデバッグ

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

サポートを構築します

このリポジトリは、SAO-ESMをテンプレートとして構築されています。

ライセンス

Copyright（c）Packy-Tang [email protected]

MITプロトコルによるオープンソースソフトウェア。