vue3加ts如何去使用富文本编辑器(wangEditor)以及根据接口上传图片

页面效果

vue3中可以使用很多的富文本编辑器，我使用的是wangEditor

这里可以去官网看如何进行下载，链接:用于 Vue React | wangEditor

1、下载

这样下载完，运行的时候报以下错误时：

如果使用官网下载完以后引入不生效的时候，可以使用以下方法进行解决:

我们可以找到package.json文件，手动修改

"dependencies": {
    //替换成这个然后npm i 进行下载依赖起飞就好了
    "@wangeditor/editor-for-vue": "^5.1.12",
    "core-js": "^3.8.3",
    "echarts": "^5.4.2",
    "element-plus": "^2.3.7",
    "swiper": "^8.4.7",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vue3-lazy": "^1.0.0-alpha.1",
    "vuex": "^4.0.0"
  },

2、由于我们的富文本组件有可能多个页面使用这个时候我们可以进行封装组件(直接上代码)

组件代码:

<template>
    <div style="border: 1px solid #ccc">
        <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 { computed, shallowRef, onBeforeUnmount } from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IEditorConfig } from '@wangeditor/editor'
interface Props {
    modelValue: string
    height?: number | string // 编辑器的高度
}
interface EmitEvent {
    (e: 'update:modelValue', params: string): void
}
const props = withDefaults(defineProps<Props>(), {
    height: 550
})
const emit = defineEmits<EmitEvent>()
const valueHtml = computed({
    get() {
        return props.modelValue
    },
    set(value: string) {
        emit('update:modelValue', value)
    }
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const mode = 'simple'
const toolbarConfig = {}
//上传图片的地址
// const uploadFileUrl = import.meta.env.VITE_APP_BASE_API + "/common/upload";
const editorConfig: Partial<IEditorConfig> = { placeholder: '请输入内容...', 'MENU_CONF': {} }
editorConfig.MENU_CONF!['uploadImage'] = {
    //   server: uploadFileUrl,
    maxFileSize: 5 * 1024 * 1024,
    fieldName: 'file',
    meta: {
        source: 'sys_user_guide',
    },
    // 自定义插入图片
    customInsert(res: any, insertFn: any) {
        insertFn(res.url, res.originalFilename, res.url)
    },
}
editorConfig.MENU_CONF!['uploadVideo'] = {
    //   server: uploadFileUrl,
    maxFileSize: 10 * 1024 * 1024,
    fieldName: 'file',
    meta: {
        source: 'sys_user_guide',
    },
    // 自定义插入图片
    customInsert(res: any, insertFn: any) {
        insertFn(res.url, res.originalFilename, res.url)
    },
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const { value } = editorRef
    if (value === null) return
    value.destroy()
})
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
</script>

对应的页面引入进行使用:

<template>
    <WangEditor ref="WangEditorRef" v-model="content"  />
    <el-button type="primary" @click="updateValue">确定</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import WangEditor from '../components/wangEditor.vue'
const content = ref<string>('')
const updateValue = () => {    
    console.log(content.value);
}
</script>
<style lang="scss" scoped></style>