基于vue2整合tinymce富文本编辑器

1.导入依赖

npm install tinymce -S

npm install @tinymce/tinymce-vue -S

2.全部代码

<template>
        <editor
                :key="tinymceFlag"
                ref="editor"
                v-model="content"
                :init="tinymceInit"
        ></editor>

</template>

<script>
    import Editor from '@tinymce/tinymce-vue'
    export default {
        name: "index",
        data() {
            return {
                tinymceFlag: '',
                content: '',

            }
        },
        methods: {
        //配置参数,不全，可以自己上网上补全
            tinymceInit() {
                this.tinymceInit = {
                    //language_url: "../../public/static/tinymce/langs/zh-Hans.js",
                    language: 'zh-CN',
                    skin_url: "/static/tinymce/skin/ui/oxide" ,
                    height: 400,
                    theme: 'silver',
                    browser_spellcheck: true,
                    branding: true,
                    statusbar: true,
                    font_size_formats: '12px 13px 14px 15px 16px 20px 30px',
                    plugin: 'print preview searchreplace autolink directionality visualblocks',
                    toolbar: 'formatselect | bold italic forecolor backcolor fontsizeselect | link',
                    paste_webkit_styles:true,
                    paste_data_images: false,
                    images_upload_url: '/api/file/tinymce/uploads',
                    contextmenu: `inserttable | cell row column deletetable`,
                    relative_urls: false,
                    remove_script_host:false

                }
                this.tinymceFlag++
            }
        },
        components: {
            Editor
        }
    }



</script>

<style scoped>

</style>

3.实际效果

4.后续

下一篇预告会整合另外一个富文本编辑器
之后会将富文本编辑器整合到表单里面
感兴趣的可以点点关注哦