首页 > 其他分享 >WangEdit

WangEdit

时间:2023-04-25 15:12:24浏览次数:29  
标签:res fileName editorConfig file 上传 WangEdit insertFn

1.需要重写 编辑器 对象

//上传图片
import { IEditorConfig } from '@wangeditor/editor'

//编辑器对象//初始化一个 配置对象修改 菜单功能
const editorConfig: Partial<IEditorConfig> = {  // TS 语法
// const editorConfig = {                       // JS 语法
    MENU_CONF: {}
    // 其他属性...
} 

2.oss 联动 wangeditor 上传功能实现 图片 视频上传

//图片上传
type InsertFnType = (url: string, alt: string, href: string) => void
editorConfig.MENU_CONF!['uploadImage'] = {
    async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法
        let fileName = 'article/'+new Date().getTime()+'_'+file.name
        oss.put(fileName,file).then((res:any)=>{
            insertFn(res.url,file.name , 'http://www.gotang.cn')
        })
    }
}
// 视频上传
editorConfig.MENU_CONF!['uploadVideo'] = {
    // 自定义上传
    async customUpload(file: File, insertFn: InsertFnType) {  // TS 语法
        let fileName = 'article/'+new Date().getTime()+'_'+file.name;
        oss.put(fileName,file).then((res:any)=>{
            insertFn(res.url,file.name , 'http://www.gotang.cn')
        }) 
    }
}

 

标签:res,fileName,editorConfig,file,上传,WangEdit,insertFn
From: https://www.cnblogs.com/apon/p/17352643.html

相关文章

  • wangEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
    ​在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。 通过知乎提供的思路找到粘贴的原理,通过TheViper找到粘贴图片的方法。其原理为一下步骤:监听粘贴事件;【用于插入图片】获取光标位......
  • 记录在vue3项目中使用wangeditor富文本编译器以及微信小程序中的渲染
    首先,管理后台中的使用npminstallwangeditor//f封装成了组件,以下是组件中的内容<template>  <divstyle="border:1pxsolid#ccc;maxwidth:600px">   <!--工具栏-->   <Toolbar    style="border-bottom:1pxsolid#ccc"    :......
  • Vue3 +element-plus+ wangEditor 富文本编辑器+前端七牛云上传
    我用的vue3,element-plus,没用ts搭建wangEditor 参考地址 https://www.cnblogs.com/xbxxf/p/16791084.html七牛云安装参考地址 https://blog.csdn.net/ldoit/article/details/121533204本来就是抄大佬的,就不复制粘贴了主要是整理关于七牛云部分的代码,秉着复制就能用的原则,我......
  • Vue3 代码块高亮显示并可使用富文本编辑器编辑(highlight.js + wangEditor)
    在Vue项目中实现以下功能:  功能1.在页面中显示代码,并将其中的关键字高亮显示。  功能2.允许对代码块进行编辑,编辑时代码关键字也高亮显示。  功能3.可在编辑器中添加多个代码块,动态渲染代码关键字高亮。 Step1:安装所需插件(本文使用npm安装,若需使用其他方式请查......
  • wangeditor5 vue2 安装后运行报错 Error in ./node_modules/@wangeditor/editor/d
    问题解决方法:原因就是引入的链接不对,使用cnpm、npm、pnpm、yarn安装插件的时候,路径都是不一样的,所以要对应着改路径就可以了链接:https://github.com/wangeditor-team/wangEditor/issues/4041......
  • wangEditor粘贴图片自动上传到服务器(Java版)
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@     page contentType="text/html;cha......
  • 在react中使用wangEditorV5
    wangEditor是基于JavaScript和css的一款web富文本编辑器,是国内比较好用的一款轻量级富文本编辑器,上手简单,易用且开源免费.官方文档:http://www.wangeditor.com/本文讲述的是在react中如何去使用这款富文本编辑器首先引入编辑器yarnadd@wangeditor/editor-for-reactnpmi......
  • wangeditor 引入国际化支持
    看了wangeditor的源码,发现是有翻译支持的: 且内置了中英文: 那现在的问题就变成了如何使用,根据地址查看文档(https://www.i18next.com/overview/getting-started)发现只需要下载并引入即可: 那本地editor就可以设置配置:importi18nextfrom'i18next';instance.......
  • thinkphp wangEditor 图片上传
    1.html<divid="editor"></div><!--wangEditor无法设置name属性为上传添加一个隐藏的textarea--><textareaid="tarea"name="content"hidden></textarea>......
  • wangEditor的使用
    第一步,将其下载,并引入项目中。第二步,引入js<scripttype="text/javascript"src="/plugin/wangEditor/release/wangEditor.min.js"></script>第三步,初始化对象<span......