wangeditor在vue3中使用方法

最新推荐文章于 2024-09-04 16:39:50 发布

yasuo56

最新推荐文章于 2024-09-04 16:39:50 发布

阅读量322

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/yasuo56/article/details/130879821

版权

下载依赖

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

组件使用

<template>
    <el-input v-model="noticeTitle" style="margin-bottom: 10px;" placeholder="请输入标题"></el-input>
    <div style="border: 1px solid #ccc;text-align: left;">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" />
    </div>
</template>

<script lang='ts' setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar, UploadFileHooks } from '@wangeditor/editor-for-vue'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('')
const noticeTitle = ref<string>("")
// 模拟 ajax 异步获取内容
onMounted(() => {

})

const toolbarConfig = {}
const ImgUrl = ref<string>('')
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            //上传图片配置
            server: import.meta.env.VITE_BASE_URL + '/course-service/announcement/uploadImg', //上传接口地址
            fieldName: 'img', //上传文件字段名
            methods: 'post',
            headers: {
                Authorization: localStorage.getItem('token')
            },
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            metaWithUrl: true, // 参数拼接到 url 上
            // 单个文件上传成功之后
            onSuccess(file, res, insertFn) {
                console.log(`${file.name} 上传成功`, res.data);
                ImgUrl.value = res.data
            },
            // // 自定义插入图片
            customInsert(res, insertFn) {

                insertFn(res.data) //插入图片
            },
        },
    },
};


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
defineExpose({
    valueHtml,
    noticeTitle
})


</script>