vite 使用 富文本组件

文章介绍了在Vue项目中安装和使用WangEditor富文本组件的步骤,包括添加依赖、处理字符串转义字符、图片上传功能的自定义实现,以及组件销毁时的内存管理。示例代码展示了编辑器的配置选项和事件监听。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

🚀 个人简介:某大型测绘遥感企业资深Webgis开发工程师,软件设计师(中级)、优快云优质创作者
💟 作 者:柳晓黑胡椒❣️
📝 专 栏:vue实践
🌈 若有帮助,还请关注点赞收藏,不行的话我再努努力💪💪💪

安装依赖

yarn add @wangeditor/editor

yarn add @wangeditor/editor-for-vue

wangeditor官网:链接
在这里插入图片描述

组件

注意

  • js 去掉字符串中的转义字符

str.replace(/[\'\"\\\b\f\n\r\t]/g,“'”)

  • 返给后端的标签,存在 请求接口中存在 标签,而返回时 标签 消失的情况,使用编码解码的方式解决
let str = "<p><img src=\"http://10.100.5.201:9300/statics/2023/03/10/image_20230310145308A035.png\" /></p>"
let newStr = str.replace(/[\'\"\\\b\f\n\r\t]/g,"'") 
//   "<p><img src="http://10.100.5.201:9300/statics/2023/03/10/image_20230310145308A035.png" /></p>"
encodeURIComponent(Cert);
decodeURIComponent(Cert)

在这里插入图片描述

//  WangEditor.vue
<!--/**
 * @author: liuk
 * @date: 2023/3/10
 * @describe: 富文本组件
*/-->
<template>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        style="border-bottom: 1px solid #ccc"
        :mode="mode"
    />
    <!-- 编辑器 -->
    <Editor
        :defaultConfig="editorConfig"
        v-model="defaultHtml"
        @onChange="handleChange"
        style="height: 500px; overflow-y: hidden"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
</template>

<script setup lang="ts">
import {onBeforeUnmount, shallowRef, reactive, toRefs, computed} from 'vue';
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';

// API 引用
import {uploadFile} from '@/api/cemetery/cemetery';

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:modelValue']);

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

// 父子组件数据双向绑定
const defaultHtml = computed<string | undefined>({
  get() {
    return props.modelValue;
  },
  set(val) {
    // imgUrl改变时触发修改父组件绑定的v-model的值
    emit('update:modelValue', val);
  },
});

const state = reactive({
  toolbarConfig: {},
  editorConfig: {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        // 自定义图片上传
        async customUpload(file: any, insertFn: any) {
          console.log('上传图片');
          uploadFile(file).then((response) => {
            const url = response.data.url;
            insertFn(url);
          });
        },
      },
    },
  },
  mode: 'default',
});

const {toolbarConfig, editorConfig, mode} = toRefs(state);

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例,重要!
};

function handleChange(editor: any) {
  emit('update:modelValue', editor.getHtml());
}

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

<style src="@wangeditor/editor/dist/css/style.css"></style>

效果

在这里插入图片描述

参考

链接

<think>好的,我现在需要在Vue3项目中使用Vite集成富文本编辑器,并实现图片上传功能。首先,我应该选择哪个富文本编辑器呢?用户提到wangeditor,可能这是一个常用的选择。我需要查看引用中的资料,看看有没有相关的指导。 根据引用[2],在Vue3项目中植入wangeditor富文本编辑器有完整的示例代码,应该可以参考这个。引用[3]是关于Vue2和ElementUI集成的,可能部分代码结构可以借鉴,但需要注意Vue3的Composition API和Vite配置的不同。 首先,安装wangeditor。引用[2]提到安装引入过程,所以应该使用npm或yarn安装@wangeditor/editor和@wangeditor/editor-for-vue。然后,在组件中引入Editor和Toolbar组件,并设置相应的配置。 接下来是图片上传功能。用户希望避免使用URL输入,而是直接上传图片。根据引用[1],原本的功能只能通过URL上传,需要扩展。所以,需要在编辑器的配置中添加自定义上传方法。可能需要配置editorConfig中的MENU_CONF,特别是uploadImage的server地址和自定义上传方法。 在Vue3中,使用onMounted和onBeforeUnmount处理生命周期,初始化编辑器实例。需要确保在组件销毁时销毁编辑器实例,避免内存泄漏。上传图片时,可能需要将图片文件转换为FormData,并通过axios或fetch发送到服务器。处理上传成功的回调,将返回的图片URL插入到编辑器中。 还需要处理跨域问题,可能需要配置服务器的CORS。另外,上传过程中需要显示进度条或提示信息,提升用户体验。可以自定义上传函数,处理成功和失败的情况,并更新编辑器内容。 最后,测试整个流程,确保图片选择、上传、插入到编辑器中的过程顺畅。查看示例代码,调整配置项,如placeholder、zIndex等,确保编辑器样式和功能符合项目需求。</think>在Vue3 + Vite项目中集成富文本编辑器并实现图片上传功能,可通过以下步骤实现(以wangeditor为例): ### 一、安装依赖 ```bash npm install @wangeditor/editor @wangeditor/editor-for-vue ``` ### 二、基础集成 ```vue <script setup> import { onBeforeUnmount, ref, shallowRef } from 'vue' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' // 编辑器实例 const editorRef = shallowRef() const html = ref('<p>Hello World</p>') // 编辑器配置 const editorConfig = { placeholder: '请输入内容...', MENU_CONF: { uploadImage: { server: '/api/upload', // 上传接口地址 fieldName: 'file' // 表单字段名 } } } // 生命周期处理 const handleCreated = (editor) => { editorRef.value = editor } onBeforeUnmount(() => { const editor = editorRef.value if (editor) editor.destroy() }) </script> <template> <div class="editor-wrapper"> <Toolbar :editor="editorRef" :defaultConfig="{ excludeKeys: ['fullScreen'] }" mode="default" /> <Editor v-model="html" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" /> </div> </template> ``` ### 三、实现图片上传核心逻辑 1. 添加自定义上传函数: ```javascript editorConfig.MENU_CONF.uploadImage = { async customUpload(file, insertFn) { // 自定义上传 const formData = new FormData() formData.append('file', file) try { const res = await axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) insertFn(res.data.url) // 插入图片URL到编辑器 } catch (error) { console.error('上传失败', error) } } } ``` 2. 需要配置Vite代理解决跨域: ```javascript // vite.config.js export default defineConfig({ server: { proxy: { '/api': { target: 'http://your-upload-server.com', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } } }) ``` ### 四、功能扩展建议 1. 添加上传进度提示: ```javascript editorConfig.MENU_CONF.uploadImage.customUpload = async (file, insertFn) => { const progressBar = createProgressElement() // 创建进度条DOM await axios.post('/api/upload', formData, { onUploadProgress: progressEvent => { const percent = Math.round( (progressEvent.loaded * 100) / progressEvent.total ) progressBar.style.width = `${percent}%` // 更新进度显示 } }) progressBar.remove() // 上传完成后移除进度条 } ``` 2. 文件类型限制: ```javascript editorConfig.MENU_CONF.uploadImage.allowedFileTypes = ['image/*'] ``` ### 五、注意事项 1. 编辑器zIndex建议设置为`zIndex: 500`避免被遮挡[^3] 2. 需要服务端返回标准格式: ```json { "errno": 0, "data": { "url": "https://example.com/image.jpg" } } ``` 3. 生产环境建议使用OSS直传方案减轻服务器压力[^2]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳晓黑胡椒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值