@packy-tang/vue-tinymce

    1.1.2 • Public • Published

    vue-tinymce

    vue-tinymce

    npm version vue tinymce NPM downloads

    提供给 vue 开发者使用的 TinyMCE 组件

    目的

    为开发人员简单使用 TinyMCE 的 Vue 组件。提供非常简单易懂的源代码提供给开发人员作为参考,当然你也可以直接使用这个组件到你的项目。发现问题可以提到 issue,期望你的反馈 👏

    如何使用

    安装组件

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

    引入

    <template>
        <!-- 全局引入TinyMCE -->
        <script src="//unpkg.com/tinymce@5.1.5/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, 常用与自定义编辑器处理,组件内部做了些处理,建议在这里添加自定义的代码

    更多使用细节

    想了解更多内容请移步至使用细节

    Install

    npm i @packy-tang/vue-tinymce

    DownloadsWeekly Downloads

    229

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    52.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • packy-tang