Vue3使用富文本框tinymce

首先先安装
项目里输入命令

npm install @jsdawn/vue3-tinymce

然后再components文件夹下新建一个TinymceEditor文件夹，新建index.vue，代码如下

<template>
    <div class="tinymce-box">
        <vue3-tinymce v-model="state.content" :setting="state.setting" script-src="/static/tinymce/tinymce.min.js" />
    </div>
</template>

<script setup>
import { defineProps,reactive ,watch,defineEmits} from 'vue';
// 引入组件
import Vue3Tinymce from '@jsdawn/vue3-tinymce';
const props=defineProps({
    modelValue:{
      type:String
    }
})
const emits=defineEmits(['update:modelValue','contentChange'])
const state = reactive({
    content:props.modelValue,
    setting: {
        height: 300,
        toolbar:
            "undo redo | fullscreen | blocks alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontsize forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
        toolbar_mode: "sliding",
        quickbars_selection_toolbar:
            "removeformat | bold italic underline strikethrough | fontsize forecolor backcolor",
        plugins: "link image media table lists fullscreen quickbars",
        font_size_formats: "12px 14px 16px 18px",
        link_default_target: "_blank",
        link_title: false,
        nonbreaking_force_tab: true,
        // 以中文简体为例
        language: "zh-Hans",
        language_url:
            "/static/tinymce/langs/zh-Hans.js"
    }
});
watch(()=>state.content,()=>{
   emits('update:modelValue',state.content)
   emits('contentChange',state.content)
},{
    immediate:true,
    deep:true
})

watch(()=>props.modelValue,()=>{
    state.content=props.modelValue;
},{
    immediate:true,
    deep:true
})



</script>
<style scoped lang="scss">
.tinymce-box{

    :deep(.tox-promotion) {
    display: none;
    }
    :deep(.tox-statusbar__branding){
        display: none;
    }
}



</style>

在static下新建tinymce文件夹，放置静态文件
最后在main.js中全局注册下组件，各个vue页面可以不再重复引入组件

..
import TinymceEditor from "@/components/TinymceEditor/index.vue";
...
app.component("TinymceEditor",TinymceEditor)
...

最后就可以直接使用了。例子：

<el-form-item label="信息内容 " prop="content">
                   
         <TinymceEditor v-model="form.content" v-if="open" style="width: 100%"></TinymceEditor>
                   
</el-form-item>

效果