富文本编辑器 wangeditor上传图片

富文本编辑器 wangeditor上传图片的实现方式有两种：

1. 前端直接上传：用户在富文本编辑器中选择图片后，前端将图片转换成 base64 编码，然后通过 AJAX 请求将 base64 编码的图片数据发送到后端，后端再将其转换成图片文件保存到服务器上。

2. 后端上传：用户在富文本编辑器中选择图片后，前端将图片文件通过表单提交到后端，后端再将其保存到服务器上，并返回图片的 URL 地址给前端，前端再将其插入到富文本编辑器中。

相关问题

wangeditor富文本编辑器上传图片

### WangEditor 富文本编辑器图片上传实现

#### 安装依赖包
为了在项目中使用WangEditor并实现图片上传功能，需先安装必要的依赖包。对于Vue3环境而言，可以通过如下命令来完成[@wangeditor/editor]以及[@wangeditor/editor-for-vue@next]两个库的引入[^2]:

yarn add @wangeditor/editor
yarn add @wangeditor/editor-for-vue@next

或者采用npm方式：

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

#### 初始化编辑器组件
创建一个新的Vue单文件组件用于承载WangEditor实例，在`<template>`标签内声明editor容器节点，并通过`<script setup>`语法糖简化逻辑编写。

<!-- EditorComponent.vue -->
<template>
  <div id="editor-container"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
// Import necessary modules and styles from wangEditor package.
import '@wangeditor/editor/dist/css/style.css'; // 引入样式表
import { createEditor, BaseMenuConf } from '@wangeditor/editor';

const editorConfig = {
    placeholder: "请输入内容...",
};

onMounted(() => {
    const editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'default', // or 'simple'
    });
});
</script>

#### 配置图片上传插件
为了让用户能够向文档中插入本地选取或拖拽进入的图像资源，需要进一步定制化配置项中的`menuConfig`属性，指定处理图片上传的具体行为。这里假设已经存在一个可供调用的服务端接口负责接收来自前端发送过来的数据流形式的二进制文件对象。

import axios from 'axios';

...

const uploadImagePluginConfig : Partial<BaseMenuConf>['uploadImage'] = {
    server: '/api/upload-image', // 后端API地址
    fieldName: 'file',           // 表单字段名，默认为'file'
    maxFileSizeMb: 5,            // 单张图片最大尺寸限制(MB)，默认无上限
    async customUpload(file: File){
        try{
            let formData = new FormData();
            formData.append('image', file);
            
            await axios.post('/api/upload-image', formData,{
                headers:{
                    'Content-Type': 'multipart/form-data'
                }
            });

            return true;
        }catch(error){
            console.error(`Failed to upload image ${error}`);
            throw error;    
        }
    },
};
...

最后一步就是把上述定义好的`uploadImagePluginConfig`应用到初始化的参数列表里去:

const editor = createEditor({
    ...
    menuConfig: {
        ...otherMenus,
        ['uploadImage']: uploadImagePluginConfig,
    },
})

这样就完成了基于Vue框架下利用WangEditor构建支持自定义图片上传特性的富文本编辑区域的工作流程介绍[^1]。

wangeditor富文本编辑器上传图片按钮

### wangEditor富文本编辑器实现图片上传按钮

wangEditor是一款轻量级且易于使用的富文本编辑器，在v4版本中提供了详细的文档支持以及丰富的配置选项来满足不同的开发需求[^2]。

对于想要在wangEditor中集成图片上传功能的情况，可以通过自定义菜单项的方式添加一个专门用于触发图片上传操作的按钮。具体来说：

#### 自定义图片上传按钮

为了创建一个新的图片上传按钮并将其加入到工具栏当中，可以按照如下方式编写代码：

const { createEditor, genMenuConfig } = WangEditor;

// 创建编辑器实例前先准备一些必要的参数设置
let E = window.wangEditor;
let editor = new E('#div1'); // 假设HTML中有id为'div1'的容器用来承载编辑区域

editor.config.customMenus = [
    ...E.MENU_CONF,
    {
        key: 'customImageUpload',
        title: '上传图片', // 显示给用户的名称
        iconSvg: `<svg>...</svg>` , // 可选：如果希望有图标则提供SVG路径字符串
        generate () {
            return '<span class="w-e-menu-item">上传图片</span>';
        },
        click(editor) {
            const input = document.createElement('input');
            input.type = "file";
            input.accept = "image/*"; // 仅允许选择图像文件
            
            input.onchange = async (event) => {
                let file = event.target.files[0];
                
                try{
                    // 这里应该调用实际的服务端接口完成文件传输过程...
                    await uploadFile(file);
                    
                    // 成功之后获取返回的数据中的url字段作为新插入img标签src属性值
                    editor.cmd.do('insertHTML', `<img src="${response.data.url}" alt="" />`);
                }
                catch(error){
                    console.error("Failed to upload image", error);
                }

            };
            
            input.click();
        }
    }
];

function uploadFile(file){
    // 此处应替换为你自己的服务器API地址
    return fetch('/api/upload-image',{
        method:'POST',
        body:new FormData().append('file', file),
    }).then(response=>response.json());
}

editor.create(); // 初始化编辑器

上述代码片段展示了如何通过扩展`customMenus`来自定义新的命令条目，并利用JavaScript原生特性处理本地文件选取与提交逻辑。当用户点击这个新增加的“上传图片”按钮时会弹出文件对话框让用户挑选要上传的照片；一旦选择了某个具体的项目，则立即发起异步请求向后端发送数据流形式的内容等待进一步处理——通常情况下这意味着保存至磁盘或其他持久化存储介质之中以便后续访问使用。最后一步则是把由服务端反馈回来的实际资源定位符嵌入到当前光标位置形成可见化的视觉呈现效果[^3]。