wangeditor富文本上传图片等配置

1、首先安装插件
vue版本时vue2,我使用的时第一个,使用第二个安装插件在我的项目中会有问题
在这里插入图片描述
然后根据官网提供模板的直接复制下来就行
官网地址:https://www.wangeditor.com/v5/for-frame.html#%E9%85%8D%E7%BD%AE
整晚这些就获得了一个富文本模板
2、配置上传图片
a、本地上传
在data中配置,看加粗部分

  data() {
    return {
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        //看这里
        //-----------------------------------
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
          
          //server必须要配置正确
            server: env.pross+"/upload/postfile",

            maxFileSize: 4 * 1024 * 1024, // 1M
            // 最多可上传几个文件,默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制,默认为 ['image/*'] 。如不想限制,则设置为 []
            allowedFileTypes: [],
            // 自定义上传参数,例如传递验证的 token 等。参数会被添加到 formData 中,一起上传到服务端。
            fieldName: "file",
            meta: {
            //官网中把token放到了这里,但是请求的时候会看不到token
            },
            headers: {
            //所以token放这里
              token: window.sessionStorage.token,
            },
            // 将 meta 拼接到 url 参数中,默认 false
            metaWithUrl: false,
            // 跨域是否传递 cookie ,默认为 false
            withCredentials: false,
            // 超时时间,默认为 10 秒
            timeout: 5 * 1000, // 5 秒
            customInsert(res, insertFn) {
              // JS 语法
              // res 即服务端的返回结果
              // 从 res 中找到 url alt href ,然后插图图片
              insertFn(res.data);
            },
          },
        },
      },
      mode: "default", // or 'simple'
    };
    //--------------------------------------------
  },

注意两点:1、server必须写
2、token放到headers中

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是WangEditor富文本编辑器的所有配置: 1. 基础配置 ``` editor.config.uploadImgUrl = '/upload'; // 上传图片的接口地址 editor.config.uploadImgFileName = 'file'; // 上传图片的文件名称 editor.config.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify', // 对齐方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入图片 'table', // 表格 'video', // 插入视频 'code', // 插入代码 'undo', // 撤销 'redo' // 重复 ]; ``` 2. 自定义菜单 ``` editor.config.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify', // 对齐方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入图片 'table', // 表格 'video', // 插入视频 'code', // 插入代码 'undo', // 撤销 'redo', // 重复 { name: 'customMenu1', // 菜单名称 text: '自定义菜单1', // 显示的文本 title: '自定义菜单1', // 鼠标悬浮时显示的文本 exec: function () { // 点击菜单时触发的回调函数 // 自定义菜单1的代码 } }, { name: 'customMenu2', text: '自定义菜单2', title: '自定义菜单2', exec: function () { // 自定义菜单2的代码 } } ]; ``` 3. 图片上传配置 ``` editor.config.uploadImgUrl = '/upload'; // 上传图片的接口地址 editor.config.uploadImgFileName = 'file'; // 上传图片的文件名称 editor.config.uploadImgFns.onload = function (resultText, xhr) { // 图片上传成功时的回调函数 // 图片上传成功的处理代码 }; editor.config.uploadImgFns.onerror = function (xhr) { // 图片上传失败时的回调函数 // 图片上传失败的处理代码 }; editor.config.uploadImgParams = { // 上传图片时需要携带的参数 'token': '123456' }; ``` 4. 视频上传配置 ``` editor.config.uploadVideoUrl = '/upload'; // 上传视频的接口地址 editor.config.uploadVideoFileName = 'file'; // 上传视频的文件名称 editor.config.uploadVideoFns.onload = function (resultText, xhr) { // 视频上传成功时的回调函数 // 视频上传成功的处理代码 }; editor.config.uploadVideoFns.onerror = function (xhr) { // 视频上传失败时的回调函数 // 视频上传失败的处理代码 }; editor.config.uploadVideoParams = { // 上传视频时需要携带的参数 'token': '123456' }; ``` 5. 表格配置 ``` editor.config.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify', // 对齐方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入图片 'table', // 表格 'video', // 插入视频 'code', // 插入代码 'undo', // 撤销 'redo' // 重复 ]; editor.config.menusConfig = { // 表格菜单的配置 table: { dropdown: ['insert', 'delete', 'colBefore', 'colAfter', 'rowBefore', 'rowAfter', 'colMerge', 'rowMerge', 'format'], trigger: '<span class="wangeditor-menu-img-table"></span>', className: '' } }; editor.config.tableDropdownConfig = { // 表格下拉菜单的配置 insert: { text: '插入表格', handler: function () { // 插入表格的代码 } }, delete: { text: '删除表格', handler: function () { // 删除表格的代码 } }, colBefore: { text: '在左侧插入列', handler: function () { // 在左侧插入列的代码 } }, colAfter: { text: '在右侧插入列', handler: function () { // 在右侧插入列的代码 } }, rowBefore: { text: '在上方插入行', handler: function () { // 在上方插入行的代码 } }, rowAfter: { text: '在下方插入行', handler: function () { // 在下方插入行的代码 } }, colMerge: { text: '合并列', handler: function () { // 合并列的代码 } }, rowMerge: { text: '合并行', handler: function () { // 合并行的代码 } }, format: { text: '表格格式化', handler: function () { // 表格格式化的代码 } } }; editor.config.tableDefaultStyle = { // 表格默认样式 borderWidth: '1px', borderColor: '#ccc', width: '100%' }; editor.config.tableInsertMaxRow = 10; // 插入表格时最大行数 editor.config.tableInsertMaxCol = 10; // 插入表格时最大列数 ``` 希望这些信息对你有所帮助。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值