@packy-tang/vue-tinymce

vue-tinymce

已支持vue3。npm i @packy-tang/vue-tinymce@next 就可使用vue3版本支持。

提供给 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使用例子：传送门(待补上)

属性

更多使用细节

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