Nuxt项目中封装富文本编辑器Tinymce

首先新建Editor.vue

<template>
    <editor v-model="content" :init="init"/>
</template>

<script>
import editor from '@tinymce/tinymce-vue';

let tinymce;
if (process.client) {
    tinymce = require('tinymce/tinymce');
    require('tinymce/themes/silver/theme');
    require('tinymce/icons/default/icons');
    require('tinymce/plugins/codesample');
    require('tinymce/plugins/table');
    require('tinymce/plugins/image');
    require('tinymce/plugins/media');
    require('tinymce/plugins/code');
    require('tinymce/plugins/link');
}

export default {
    name: 'Editor',
    components: {
        editor
    },
    props: {
        value: ''
    },
    data() {
        return {
            content: '',
            init: {
                height: 350,
                branding: false,
                language: 'zh_CN',
                convert_urls: false,
                image_description: false,
                link_assume_external_targets: 'http',
                plugins: 'codesample table image media code link',
            }
        }
    },
    watch: {
        value(newValue) {
            this.content = newValue
        },
        content(newContent) {
            this.$emit('input', newContent)
        }
    }
}
</script>

然后在其它页面中引入Editor组件

<Editor v-model="content"/>
共 0 条评论