TinyMCE Vue 超详实用指南

2023-09-25 17:43:21

TinyMCE Vue是一个强大的文本编辑器，可以轻松集成到Vue.js应用程序中。它提供了许多有用的功能，包括格式化工具、链接管理、图像上传等等。

TinyMCE Vue.js 集成

安装依赖
```
npm install tinymce vue-tinymce
```

注册组件

import { Editor } from 'vue-tinymce';

Vue.component('tinymce-editor', Editor);

使用组件

<tinymce-editor
    :initialValue="content"
    @change="handleChange"
/>

TinyMCE Vue.js 配置

TinyMCE Vue.js提供了许多配置选项，可以用来自定义编辑器的外观和行为。

import { Editor } from 'vue-tinymce';

Vue.component('tinymce-editor', {
    components: { Editor },
    props: ['initialValue'],
    data() {
        return {
            content: this.initialValue
        };
    },
    methods: {
        handleChange(content) {
            this.content = content;
        }
    },
    template: `
        <editor
            :value="content"
            @change="handleChange"
            init={{
                height: 500,
                menubar: false,
                plugins: ['link', 'image', 'lists'],
                toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright | link image | numlist bullist'
            }}
        />
    `
});

TinyMCE Vue.js 事件

TinyMCE Vue.js提供了许多事件，可以用来监听编辑器中的事件。

import { Editor } from 'vue-tinymce';

Vue.component('tinymce-editor', {
    components: { Editor },
    props: ['initialValue'],
    data() {
        return {
            content: this.initialValue
        };
    },
    methods: {
        handleChange(content) {
            this.content = content;
        },
        handleFocus() {
            console.log('Editor focused');
        },
        handleBlur() {
            console.log('Editor blurred');
        }
    },
    template: `
        <editor
            :value="content"
            @change="handleChange"
            @focus="handleFocus"
            @blur="handleBlur"
            init={{
                height: 500,
                menubar: false,
                plugins: ['link', 'image', 'lists'],
                toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright | link image | numlist bullist'
            }}
        />
    `
});

TinyMCE Vue.js 插值

TinyMCE Vue.js支持插值，可以用来在编辑器中显示动态内容。

import { Editor } from 'vue-tinymce';

Vue.component('tinymce-editor', {
    components: { Editor },
    props: ['initialValue', 'name'],
    data() {
        return {
            content: this.initialValue
        };
    },
    methods: {
        handleChange(content) {
            this.content = content;
        }
    },
    template: `
        <editor
            :value="content"
            @change="handleChange"
            init={{
                height: 500,
                menubar: false,
                plugins: ['link', 'image', 'lists'],
                toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright | link image | numlist bullist',
                contextmenu: "link image inserttable | cell row column deletetable",
                setup: (editor) => {
                    editor.ui.registry.addMenuItem('user', {
                        text: 'User',
                        onAction: () => {
                            editor.insertContent(`Hello, ${this.name}!`);
                        }
                    });
                }
            }}
        />
    `
});