tinymce封装成vue3组件

封装成组件

<script setup >
import Editor from '@tinymce/tinymce-vue'
//引入tinymce开启本地模式
import 'tinymce/tinymce'
//引入图标和主题等
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/models/dom'
//引入插件
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/link'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/code'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/table'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/image'

const emit = defineEmits(['setData','file'])
const props = defineProps({
    value: {
        type: String,
        default: '',
    },
    disabled: {
        type: Boolean,
        default: false, 
    },
    init: { type: Object },
})

let initObj = reactive({
    // 选择器
    selector: 'textarea#tinymceVue',
    // 设置本地主题
    skin_url: '/tinymce/skins/ui/oxide',
    // 设置本地css
    content_css: '/tinymce/skins/content/default/content.css',
    // 设置本地plugins中emojis的位置，用来获取表情
    emoticons_database_url: '/tinymce/plugins/emoticons/js/emojis.js',
    // 设置本地语言
    language_url: '/tinymce/langs/zh-Hans.js',
    // 设置本地语言
    language: 'zh-Hans',
    // 设置工具栏
    toolbar: [
        'bold italic hr | fontsize forecolor backcolor | blocks blockquote removeformat | undo redo ',
        'bullist table insertdatetime | link charmap emoticons wordcount searchreplace code | codesample visualblocks image fullscreen preview',
    ],
    // 设置插件
    plugins: 'codesample lists advlist link autolink charmap emoticons fullscreen preview code searchreplace table visualblocks wordcount insertdatetime image',
    // 设置图片上传
    images_upload_handler: blobInfo => new Promise((resolve, reject) => {
        emit('file', blobInfo, resolve, reject)
    }),
})
//有新设定就覆盖init
if (props.init){
    Object.assign(initObj, props.init)
}
//content内容变量
let content = ref(props.value)
//更新父组件内容
const handlerFunction = () => {
    emit('setData', content.value)
}
</script>
<template>
     <Editor id="tinymceVue" v-model="content" :init="initObj" :disabled="disabled" @selectionChange="handlerFunction" />
</template>

使用

<script setup>
import tinymce from '@/components/tinymce.vue'

let data = ref('')

const getData = str => {
    data.value = str
}

let init = reactive({ })

let upFile = (blobInfo, resolve, reject) => {
    let formdata = new FormData()
    formdata.append('file', blobInfo.blob(), blobInfo.filename())
    ajax.post('/file/up', formdata).then(res => {
        resolve(res.url)
    }).catch(err => {
        reject(err)
    })
}
</script>
<template>
    <tinymce :value="data" @setData="getData" :init="init" @file="upFile" />
</template>