整合element-plus上传组件和tui-image-editor

已于 2025-04-08 15:13:59 修改
阅读量1k 收藏 20
点赞数 16
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
于 2025-04-08 15:12:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54251959/article/details/147068605

改写了element-plus，主要拓展了编辑图片功能，新增了超出大小限制提示，超出数量限制提示，超出数量限制后，隐藏上传按钮。
在这里插入图片描述
编辑图片
编辑图片没有设置背景，可根据实际需要自行设置背景。

支持查看（el-image-viewer）、图片编辑（tui-image-editor）、删除、下载操作，可通过props配置开启哪些功能，配置项：

可选配置项默认值说明
imgListtype: Array, default: () => []图片列表（默认为空，父组件通过.getPhotoFileList()方法获取列表）
numbertype: Number, default: Infinity上传数量（默认为不限制上传数量，超出数量隐藏上传按钮）
limitSizetype: Number, default: Infinity限制大小，单位：MB（默认为不限制大小，超出大小提示用户）
limitTypetype: Array, default: [ ‘image/jpeg’, ‘image/png’,‘image/gif’,‘image/webp’,‘image/svg+xml’ ]限制类型（默认只支持标准格式图片）
openBtntype: Array, default: () => [‘view’,‘edit’,‘delete’,‘download’]开启哪些功能（默认全部开启）

获取图片列表：.getPhotoFileList()

WuTongImage代码（实际使用的Image组件）：

<template>
    <div>
        <el-upload :accept="[...new Set(props.limitType.flatMap(t => mimeToExtension[t] || []))].join(',')" ref="photoRef" :limit="number"
            :auto-upload="false" list-type="picture-card" :on-exceed="handlePhotoExceed" :on-change="handleChange"
            v-model:file-list="photoFileList" multiple :class="{ disabled: photoFileList.length >= number }">
            <template #trigger>
                <el-icon>
                    <Plus />
                </el-icon>
            </template>
            <template #file="{ file }">
                <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="openImgViewer(file)" v-if="openBtn.includes('view')">
                            <el-icon :size="20"><zoom-in /></el-icon>
                        </span>
                        <span class="el-upload-list__item-edit" @click="handlePictureCardEdit(file)" v-if="openBtn.includes('edit')">
                            <el-icon :size="20">
                                <Edit />
                            </el-icon>
                        </span>
                        <span class="el-upload-list__item-delete" @click="handleDeletePhoto(file)" v-if="openBtn.includes('delete')">
                            <el-icon :size="20">
                                <Delete />
                            </el-icon>
                        </span>
                        <span class="el-upload-list__item-download" @click="handleDownloadPhoto(file)" v-if="openBtn.includes('download')">
                            <el-icon :size="20">
                                <Download />
                            </el-icon>
                        </span>
                    </span>
                </div>
            </template>
        </el-upload>
        <el-image-viewer v-if="showImgViewer" @close="closeImgViewer" :url-list="imgPreviewList" :zoomable="true"
            :hide-on-click-modal="true" :close-on-press-escape="true" />
        <my-image-edit ref="myImageEditRef" @closeEditor="handleCloseEditor" />
    </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import { ElMessage, genFileId } from "element-plus";
import MyImageEdit from "@/components/WuTongImageEdit.vue";
// 添加映射关系
const mimeToExtension = {
  'image/jpeg': ['.jpg', '.jpeg'],
  'image/png': ['.png'],
  'image/gif': ['.gif'],
  'image/webp': ['.webp'],
  'image/svg+xml': ['.svg'],
  'image/tiff': ['.tif', '.tiff'],
  'image/x-portable-pixmap': ['.ppm'],
  'image/x-portable-graymap': ['.pgm'],
  'image/x-portable-bitmap': ['.pbm'],
  'image/x-photoshop': ['.psd'],
  'image/vnd.microsoft.icon': ['.ico'],
  'image/heif': ['.heif', '.heic'],
  'image/avif': ['.avif'],
  'image/apng': ['.apng'],
  'image/dicom-rle': ['.dcm'],
  'image/x-ms-bmp': ['.bmp'],
  'image/pjpeg': ['.jpg'], // 非标准扩展名
  'image/x-pcx': ['.pcx'],
  'image/x-cmu-raster': ['.ras']
};
const props = defineProps({
    imgList: { type: Array, default: () => [] }, // 图片列表（默认为空，父组件通过.getPhotoFileList()方法获取列表）
    number: { type: Number, default: Infinity }, // 上传数量（默认为不限制上传数量）
    limitSize: { type: Number, default: Infinity }, // 限制大小，单位：MB（默认为不限制大小）
    limitType: {
        type: Array,
        default: [
            // 标准格式
            'image/jpeg',        // JPEG(.jpg/.jpeg) - 照片标准格式
            'image/png',         // PNG(.png) - 透明背景首选
            'image/gif',         // GIF(.gif) - 简单动图
            'image/webp',        // WebP(.webp) - 现代高压缩格式
            'image/svg+xml',     // SVG(.svg) - 矢量图形
            // // 专业格式
            // 'image/tiff',        // TIFF(.tif/.tiff) - 印刷行业标准
            // 'image/x-portable-pixmap', // PPM(.ppm)
            // 'image/x-portable-graymap', // PGM(.pgm)
            // 'image/x-portable-bitmap', // PBM(.pbm)
            // 'image/x-photoshop', // PSD(.psd) - Photoshop专用
            // // 特殊格式
            // 'image/vnd.microsoft.icon', // ICO(.ico) - 浏览器图标
            // 'image/heif',        // HEIF(.heif/.heic) - iOS高清格式
            // 'image/avif',        // AVIF(.avif) - 新一代压缩格式
            // 'image/apng',        // APNG(.apng) - 动态PNG
            // // 医学/科研
            // 'image/dicom-rle',   // DICOM(.dcm) - 医学影像
            // 'image/x-ms-bmp',    // BMP(.bmp) - 位图格式
            // // 过时格式
            // 'image/pjpeg',       // 已废弃的JPEG类型
            // 'image/x-pcx',       // PCX(.pcx) - 早期绘图软件格式
            // 'image/x-cmu-raster' // RAS(.ras) - SunOS系统格式
        ],
    }, // 限制类型（默认只支持标准格式图片）
    openBtn: { type: Array, default: () => ['view','edit','delete','download'] }, // 开启哪些功能（默认全部开启）
});
const showImgViewer = ref(false);
const imgPreviewList = ref([]);
// 打开图片查看器
const openImgViewer = (img) => {
    showImgViewer.value = true;
    if (typeof img === "string") {
        imgPreviewList.value = [img];
    } else {
        imgPreviewList.value = [img.url];
    }
};
// 关闭图片查看器
const closeImgViewer = () => {
    showImgViewer.value = false;
    imgPreviewList.value = [];
};

// 修改图片函数
const handlePictureCardEdit = (file) => {
    myImageEditRef.value.handleOpen(file.url || file);
};
// 图片上传组件实例对象
const photoRef = ref(null);
// 文件列表
const photoFileList = ref([]);
// 编辑图片组件实例对象
const myImageEditRef = ref(null);
// 接收图片函数
const handleCloseEditor = (file) => {
    photoFileList.value = [convertAndAddBlob(file)];
    funEditAssignment(file);
};
// 编辑图片后的赋值函数
const funEditAssignment = (file) => {
    photoFileList.value = [];
    photoFileList.value = [convertAndAddBlob(file)];
};
// 将Blob转换为el-upload可用的格式并添加到fileList
const convertAndAddBlob = (blob) => {
    let now = Date.now();
    if (blob instanceof Blob) {
        let file = {
            name: now + ".png",
            url: URL.createObjectURL(blob),
            status: "success",
            uid: now,
            size: blob.size,
            type: now,
        };
        return file;
    } else {
        return blob;
    }
};
// 文件改变函数
const handleChange = (uploadFile, uploadFiles) => {
    if (checkImage(uploadFile) === true) {
        photoFileList.value = [uploadFile.raw || uploadFile.url || uploadFile];
    } else {
        nextTick(() => {
            handleDeletePhoto(uploadFile);
        });
    }
    showValidationErrors(uploadFiles);
};
// 检查图片是否符合要求（返回错误类型）
const checkImage = (file) => {
    // 安全获取文件类型
    const fileType = file.raw?.type || file.type || '';
    // 获取真实扩展名
    const extension = (file.name?.split('.').pop() || '').toLowerCase();

    // 增强类型检查：同时验证MIME类型和扩展名
    const isValidType = props.limitType.some(t => {
        const expectedExtensions = mimeToExtension[t] || [];
        return fileType === t || expectedExtensions.includes(`.${extension}`);
    });

    if (!isValidType) {
        return "type_error";
    }

    // 增强大小检查：添加最小尺寸限制（可选）
    const maxSize = 1024 * 1024 * props.limitSize;
    if (file.size > maxSize || file.size === 0) {
        return "size_error";
    }

    return true;
};

// 新增错误处理函数
const showValidationErrors = (files) => {
    const errors = new Set();

    files.forEach((file) => {
        const result = checkImage(file);
        if (result === "type_error") errors.add("type");
        if (result === "size_error") errors.add("size");
    });

    if (errors.has("type")) {
        ElMessage.error(`图片类型只支持 ${props.limitType.join("、")} 格式`);
    }
    if (errors.has("size")) {
        ElMessage.error(`图片大小不能超过 ${props.limitSize}MB`);
    }
};

// 图片超出清空列表
const handlePhotoExceed = (files, fileList) => {
    // 计算还能上传的数量
    const remaining = props.number - fileList.length;
    // 截取有效数量的文件
    const validFiles = files.slice(0, remaining);
    // 生成带唯一ID的文件对象
    validFiles.forEach((file) => {
        file.uid = genFileId();
        file.status = "success";
    });
    photoFileList.value = [
        ...fileList,
        ...validFiles.map((file) => ({
            ...file,
            name: file.name,
            url: URL.createObjectURL(file),
        })),
    ].slice(0, props.number); // 确保总长度不超过限制
    ElMessage.error(
        `最多只能上传${props.number}个文件，已自动截取前${remaining}个有效文件`
    );
};

// 删除图片函数
const handleDeletePhoto = (file) => {
    photoFileList.value = photoFileList.value.filter(
        (item) => item.uid !== file.uid
    );
};

const handleDownloadPhoto = (file) => {
    const a = document.createElement("a");
    a.href = file?.url;
    a.download = file.name;
    a.style.display = 'none';
    
    document.body.appendChild(a);
    a.click();
    
    // 清理DOM和内存
    document.body.removeChild(a);
}

// 父元素获取图片列表
const getPhotoFileList = () => {
    return photoFileList.value; 
}
defineExpose({
  getPhotoFileList
});
</script>
<style lang="scss" scoped>
:deep(.disabled .el-upload--picture-card) {
    display: none !important;
}

:deep(.el-upload--picture-card) {
    background-color: transparent !important;
    border: 1px dashed #fff;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
    background-color: transparent !important;
}

:deep(.el-upload-list__item) {
    display: flex;
    justify-content: center;
}
:deep(.el-image-viewer__actions){
    background-color: transparent;
}
:deep(.el-image-viewer__close){
    background-color: transparent;
}
</style>

WuTongImageEdit编辑图片代码，实际使用过程中，可以抽离 zh_CN 编辑图片汉化配置与 customTheme 编辑图片主题颜色配置到单独文件进行配置

<!-- 图片编辑组件，传入方法：handleOpen(参数1：要编辑的文件) -->
<template>
    <el-dialog v-model="isTuiEditorVisible" title="编辑图片" draggable
        custom-class="custom-dialog" width="1000px" style="margin-top: 20px;background-color: transparent;">
        <div class="tui-editor-container"></div>
        <div class="dialog-buttons">
            <el-button type="primary" @click="saveEditedImage">保存图片</el-button>
            <el-button @click="closeTuiEditor">取消</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import ImageEditor from "tui-image-editor";
import "tui-image-editor/dist/tui-image-editor.css";
const { proxy } = getCurrentInstance();
// 是否显示编辑图片组件
const isTuiEditorVisible = ref(false);
// 当前需要编辑的图片
const currentEditingImage = ref(null);
// 编辑图片实例
const imageEditorInstances = ref(null);
// 编辑图片汉化配置
const zh_CN = {
    // 通用
    Load: "加载",
    Download: "下载",
    Undo: "撤销",
    Redo: "重做",
    Delete: "删除",
    DeleteAll: "清空", // 新增
    Reset: "重置",
    ZoomIn: "放大",
    ZoomOut: "缩小",
    Hand: "移动",
    Range: "范围",
    History: "历史", // 新增
  
    // 应用和取消按钮
    Apply: "应用", // 新增
    Cancel: "取消", // 新增
  
    // 裁剪菜单
    Crop: "裁剪",
    Custom: "自定义",
    Square: "正方形",
    "3:2": "3:2",
    "4:3": "4:3",
    "5:4": "5:4",
    "7:5": "7:5",
    "16:9": "16:9",
  
    // 翻转菜单
    Flip: "翻转",
    FlipX: "水平翻转",
    FlipY: "垂直翻转",
  
    // 旋转菜单
    Rotate: "旋转",
    RotateClockwise: "顺时针旋转",
    RotateCounterClockwise: "逆时针旋转",
  
    // 绘画菜单
    Draw: "绘画",
    Free: "自由绘画",
    Straight: "直线",
    Color: "颜色",
  
    // 形状菜单
    Shape: "形状",
    Rectangle: "矩形",
    Circle: "圆形",
    Triangle: "三角形",
    Fill: "填充",
    Stroke: "边框",
  
    // 图标菜单
    Icon: "图标",
    Arrow: "箭头",
    "Arrow-2": "箭头-2",
    "Arrow-3": "箭头-3",
    "Star-1": "星形-1",
    "Star-2": "星形-2",
    Polygon: "多边形",
    Location: "位置",
    Heart: "心形",
    Bubble: "气泡",
    "Custom icon": "自定义图标",
  
    // 文字菜单
    Text: "文字",
    Bold: "加粗",
    Italic: "斜体",
    Underline: "下划线",
    Left: "左对齐",
    Center: "居中对齐",
    Right: "右对齐",
    "Text size": "文字大小",
  
    // 滤镜菜单
    Filter: "滤镜",
    Grayscale: "灰度",
    Invert: "反相",
    Sepia: "怀旧",
    Sepia2: "怀旧2",
    Blur: "模糊",
    Sharpen: "锐化",
    Emboss: "浮雕",
    "Remove White": "移除白色",
    Distance: "距离",
    Brightness: "亮度",
    Noise: "噪点",
    Pixelate: "像素化",
    "Color Filter": "颜色滤镜",
    Threshold: "阈值",
    Tint: "色调",
    Multiply: "正片叠底",
    Blend: "混合",
  };
// 编辑图片主题颜色配置
const customTheme = {
    // 左上角图片
    "common.bi.image": "", // logo图片
    "common.bisize.width": "0px",
    "common.bisize.height": "0px",
    "common.backgroundImage": "none",
    "common.border": "1px solid #444",
    "common.backgroundColor": "rgba(0, 0, 0, 0)", // 整体背景颜色

    // header(头部)
    "header.backgroundImage": "none",
    "header.border": "0px",
    "header.backgroundColor": "rgba(0, 0, 0, 0)", // 头部的背景颜色

    // load button（上传按钮）
    "loadButton.backgroundColor": "#fff",
    "loadButton.border": "1px solid #ddd",
    "loadButton.color": "#222",
    "loadButton.fontFamily": "NotoSans, sans-serif",
    "loadButton.fontSize": "12px",
    "loadButton.display": "none", // 可以直接隐藏掉

    // download button（下载按钮）
    "downloadButton.backgroundColor": "#fdba3b",
    "downloadButton.border": "1px solid #fdba3b",
    "downloadButton.color": "#fff",
    "downloadButton.fontFamily": "NotoSans, sans-serif",
    "downloadButton.fontSize": "12px",
    "downloadButton.display": "none", // 可以直接隐藏掉

    // 菜单-普通状态 - 绿色
    "menu.normalIcon.color": "#2d8cf0",
    // 菜单-选中状态 - 蓝色
    "menu.activeIcon.color": "blue",
    // 菜单-禁用状态 - 灰色
    "menu.disabledIcon.color": "grey",
    // 菜单-鼠标悬浮状态 - 黄色
    "menu.hoverIcon.color": "yellow",

    "menu.iconSize.width": "24px",
    "menu.iconSize.height": "24px",
    "submenu.iconSize.width": "32px",
    "submenu.iconSize.height": "32px",

    // submenu primary color
    "submenu.backgroundColor": "#1e1e1e",
    "submenu.partition.color": "#858585",

    // submenu labels
    "submenu.normalLabel.color": "#858585",
    "submenu.normalLabel.fontWeight": "lighter",
    "submenu.activeLabel.color": "#fff",
    "submenu.activeLabel.fontWeight": "lighter",

    // checkbox style
    "checkbox.border": "1px solid #ccc",
    "checkbox.backgroundColor": "#fff",

    // rango style
    "range.pointer.color": "#fff",
    "range.bar.color": "#666",
    "range.subbar.color": "#d1d1d1",

    "range.disabledPointer.color": "#414141",
    "range.disabledBar.color": "#282828",
    "range.disabledSubbar.color": "#414141",

    "range.value.color": "#fff",
    "range.value.fontWeight": "lighter",
    "range.value.fontSize": "11px",
    "range.value.border": "1px solid #353535",
    "range.value.backgroundColor": "#151515",
    "range.title.color": "#fff",
    "range.title.fontWeight": "lighter",

    // colorpicker style
    "colorpicker.button.border": "1px solid #1e1e1e",
    "colorpicker.title.color": "#fff",
};
// 打开图片编辑器函数
const handleOpen = (imageUrl) => {
    // 记录当前正在编辑的字段名和图片
    currentEditingImage.value = imageUrl; // 当前图片的 URL
    isTuiEditorVisible.value = true; // 显示图片编辑器的弹出框


    nextTick(() => {
        const container = document.querySelector(".tui-editor-container"); // 获取编辑器的容器元素
        if (!container) {
            console.error("未找到编辑器容器 .tui-editor-container"); // 如果未找到容器，打印错误信息
            return;
        }

        container.innerHTML = ""; // 清空容器内的旧内容

        // 如果存在旧的编辑器实例，则销毁
        if (imageEditorInstances.value) {
            imageEditorInstances.value.destroy(); // 销毁旧的图片编辑器实例
        }

        // 初始化新的图片编辑器实例
        const instance = new ImageEditor(container, {
            includeUI: {
                loadImage: { path: imageUrl, name: "编辑图片" }, // 加载图片时的路径和图片名称
                menu: ["crop", "flip", "rotate", "draw", "shape", "icon", "text", "filter"], // 启用的工具菜单项
                // menu: ["crop", "flip", "rotate", "text"], // 启用的工具菜单项
                initMenu: "", // 默认打开的工具菜单项
                uiSize: { width: "970px", height: "750px" }, // 设置用户界面的宽度和高度
                menuBarPosition: "bottom", // 设置菜单栏位置为底部
                locale: zh_CN, // 传入自定义的中文配置
                theme: customTheme,
            },
            cssMaxWidth: 900, // 设置图片的最大宽度（CSS限制）
            cssMaxHeight: 600, // 设置图片的最大高度（CSS限制）
            usageStatistics: false, // 禁用使用统计信息
        });

        imageEditorInstances.value = instance; // 保存当前字段对应的图片编辑器实例
        // 手动设置背景透明
        document.querySelector('.tui-image-editor-container').style.backgroundColor = 'transparent';
        document.querySelector('.tui-image-editor-controls').style.backgroundColor = 'transparent';
        document.querySelector('.tui-image-editor-container .tui-image-editor-help-menu').style.backgroundColor = 'transparent';
        // 设置某些功能关闭
        document.querySelector('[tooltip-content="删除"]').style.display = 'none' // 删除选中编辑内容
        document.querySelector('[tooltip-content="清空"]').style.display = 'none' // 清空
        // 隐藏分割线
        document.querySelectorAll('.tui-image-editor-icpartition').forEach(item => {
            item.style.display = 'none'
        })
    });
}

// 保存图片函数
const saveEditedImage = () => {
    let editedImageUrl = imageEditorInstances.value.toDataURL("image/jpeg",0.8);
    const byteString = atob(editedImageUrl.split(",")[1]);
    const mimeString = editedImageUrl.split(",")[0].split(":")[1].split(";")[0];
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);

    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }

    const blob = new Blob([ab], { type: mimeString });

    emits("closeEditor",blob);
    proxy.$message.success("图片保存成功");
    // 关闭弹框
    isTuiEditorVisible.value = false;
}

// 关闭函数，不保存图片
const closeTuiEditor = () => {
    // 关闭弹框
    isTuiEditorVisible.value = false;
}

// 通知父组件   关闭编辑器（不保存）closeEditor：第一个参数为图片信息
const emits = defineEmits(["closeEditor"]);

// 父组件调用关闭
const handleClose = () => {
    // 如果存在编辑器实例，则销毁
    if (imageEditorInstances.value) {
        imageEditorInstances.value.destroy(); // 销毁旧的图片编辑器实例
    }
    // 关闭弹框
    isTuiEditorVisible.value = false;
}
// 方法暴露
defineExpose({
	handleOpen,
	handleClose,
});
</script>
<style lang="scss" scoped >
.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 10px;
}
</style>
tui.image-editor：使用HTML5 Canvas实现的全功能照片图像编辑器，配有很棒的过滤器-javascript
06-21
tui.image-editor：:bread::artist_palette: 使用HTML5 Canvas实现的全功能照片图像编辑器，配有很棒的过滤器 使用 HTML5 Canvas 的全功能图像编辑器。 它易于使用并提供强大的过滤器。 包装器 toast-ui.vue-image-editor：Vue 包装器组件由 NHN 提供支持。 toast-ui.react-image-editor：React 包装组件由 NHN 提供支持。 :triangular_flag: 目录 收集有关开源浏览器使用情况的统计数据 支持 具有坚持基本的完整功能。 照片处理 集成功能 强大的过滤功能 仅选择所需的功能 易于应用您想要的尺寸和设计 可以随处使用 漂亮的默认和完全可定制的主题 功能 通过包管理器安装 通过内容交付网络 (CDN) 下载源文件 用法 HTML JavaScript 菜单svg icon setting TypeScript Development Setup Run webpack-dev-server Documents Contributing Dependen
grapesjs-tui-image-editor:GrapesJS TOAST UI图像编辑器
05-14
GrapesJS TOAST UI图像编辑器 在GrapesJS的图像组件上添加 概括 插件名称： grapesjs-tui-image-editor 指令 tui-image-editor打开模态选项： target获取和更新图像的组件 选项 选项 描述 默认 config TOAST UI的配置 {} constructor 传递编辑器构造函数。 默认情况下，将调用tui.ImageEditor `` labelImageEditor 图像编辑器的标签（在模式中使用） Image Editor labelApply 应用按钮上使用的标签 Apply height 默认编辑器高度 650px width 默认编辑器宽度 100% commandId 用于创建图片编辑器命令的ID tui-image-editor toolbarIcon 组件工具栏中使
tui-image-editor 图片编辑组件
热门推荐
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-21 1万+
针对图片的涂鸦、缩放、标注等操作，需要借助canvas来操作，这里借助tui-image-editor绘图组件来实现基础的涂鸦等功能 可以参考一篇使用教程博客： 快给你的Vue项目添加一个编辑图片组件吧_Senar的博客-CSDN博客_vue 图片编辑组件https://blog.csdn.net/i_am_a_sb/article/details/109944501里面介绍的很详细，不过我对自己要使用的情况做了一些个性化，并封装成一个组件，方便调用 tui.image-editor-官方英文文档：.
[2025版最新】推荐几款富文本编辑器，从零基础到精通，收藏这篇就够了！
最新发布
logic1001的博客
07-16 920
富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛。作为一个技术人员，选择使用合适的富文本编辑器还是很有用的，以备日后项目集成使用。下面是汇总的7款比较受欢迎的富文本编辑器，大家可以一起来看看！一、Editor.md。
图片编辑器tui-image-editor
weixin_44434938的博客
03-08 2184
图片编辑器tui-image-editor
vue 中使用图片编辑器 tui-image-editor
weixin_44111864的博客
11-08 2159
使用HTML Canvas实现的全功能图片编辑器。
vue3--element-plus-抽屉文件上传和富文本编辑器
G24gg的博客
05-04 3390
element-plus下Update实现上传文件 配置属性： action：上传文件的服务器地址。 :on-success和:on-error：分别是上传成功和失败时的回调函数。 before-upload：文件上传前的钩子函数，可以在这里进行文件类型、大小等的校验。 ref="upload"：为组件设置一个引用，方便在方法中调用。 list-type="text"：定义上传列表的展示方式，这里使用text类型，不展示文件列表。
tui-editor1.3.3
07-16
tui-editor1.3.3/tui-editor/tui-editor死活下载不了
tui.image-editor：using使用画布的全功能照片图像编辑器。 这真的很容易，并且带有出色的过滤器
02-21
它易于使用，并提供强大的过滤器。 包装纸 ：Vue包装器组件由驱动。 ：React包装器组件由驱动。 :triangular_flag: 目录 收集有关使用开源的统计信息 TOAST UI ImageEditor...var imageEditor = new tui . Image
toast-ui.react-image-editor:用于React.js的TOAST UI ImageEditor包装器
03-18
用于React的TOAST UI图像编辑器 这是一个包装的React组件。... < ImageEditor xss=removed> 或者，包含tui-code-snippet.js （ v1.4.0或更高版本），然后立即编写以下选项： tui . usageStatistics = false
tui-editor压缩包下载
01-20
【tui-editor】是一款强大的富文本编辑器，广泛应用于网页端和移动端的文本内容创作、编辑和管理。它以其简洁的界面、丰富的功能以及高度的可定制性深受开发者喜爱。在下载的压缩包中，主要包含的就是`tui-editor`的...
tuiimageeditor使用HTML5Canvas实现的全功能照片图像编辑器配有很棒的过滤器
08-08
tui.image-editor：
vue使用图像编辑器tui-image-editor
qq_43548590的博客
08-30 7787
vue使用图像编辑器tui-image-editor
TUI Image Editor (版本 3.15.3)
chen271453865的博客
09-15 900
12. `redoStackChanged`：重做栈变化事件的处理函数。当重做栈中的操作发生变化时触发，你可以在此事件中执行相关操作。当撤销栈中的操作发生变化时触发，你可以在此事件中执行相关操作。7. `objectActivated`：对象激活事件的处理函数。8. `objectAdded`：对象添加事件的处理函数。10. `objectRotated`：对象旋转事件的处理函数。11. `objectScaled`：对象缩放事件的处理函数。9. `objectMoved`：对象移动事件的处理函数。
vue3中使用组件tui-image-editor进行图片处理
qq_39536826的博客
09-08 2899
vue3中使用tui-image-editor对图片进行处理
tui-image-editor 图片编辑功能
前端阿辉的博客
04-29 4870
原文地址 在这基础上改了一点东西 主要是源码部分 if (menuBarPosition === 'bottom') { if (height > this._editorElementWrap.scrollHeight - 150) { // top = (height - this._editorElementWrap.scrollHeight) / 2; top = 0 } else { // top = 150 / 2 * -1; top = 0 }
使用tui-image-editor 图片编辑 标注图片
_NIXIAKF的博客
03-13 2492
使用tui-image-editor 图片编辑 标注图片
探索下一代图像编辑器：NHN's TUI Image Editor
gitblog_00022的博客
03-20 501
探索下一代图像编辑器：NHN's TUI Image Editor 项目简介 是由韩国NHN公司开发的一款开源、轻量级的在线图像编辑器。它以Web技术为基础，支持多种图像处理功能，并且可以通过简单的API集成到任何网站或应用中，为用户提供无缝的图片编辑体验。 技术分析 TUI Image Editor是基于HTML5的Canvas技术构建的，这意味着它能在现代浏览器上运行，无需安装额外插件。它利用...
vue中使用图像编辑器tui-image-editor(一)
weixin_44867717的博客
12-06 6186
图片
tui-image-editor编辑图片的使用
mrlWork的博客
04-27 6232
tui-image-editor简单明了使用！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值