关于Vue使用ueditor富文本编辑器上传图片

学习让我快乐```

已于 2022-05-19 17:51:55 修改

阅读量8.8k

点赞数 5

文章标签： uni-app 其他 vue.js

于 2022-04-02 10:22:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37225650/article/details/123912765

版权

1、使用的是vue-ueditor-wrap，前面操作网上都有，放到public下即可
2、ueditor上传图片会先请求服务器获取配置项，但是考虑我们的上传图片接口本身就有，后台那边也不想配合，只能自己改上传的代码
3、serverUrl就填服务器地址就行了，然后去修改UEditor ueditor.all.min.js的代码

 <vue-ueditor-wrap @ready="ready" v-model="msg" :config="myConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>

	myConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 720,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 服务器地址
          serverUrl: process.env.VUE_APP_BASE_API,
          //上传图片地址
          uploadUrl: process.env.VUE_APP_BASE_API + "/kjyl-server-doctor/doctor/file/uploadFile",
          // imageUrlPrefix:process.env.VUE_APP_BASE_API + '/doctor/file/uploadFile',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
          // UEDITOR_HOME_URL : process.env.NODE_ENV != 'development'?'/syyx/ue/':'/kjyl-doctor-web/ue/',
          UEDITOR_HOME_URL: process.env.NODE_ENV == 'test' ? '/kjyl-doctor-web/ue/' : process.env.NODE_ENV ==
            'production' ? '/syyx/ue/' : process.env.NODE_ENV == 'development' ? '/ue/' : '/kjyl-doctor-web/ue/',
          // UEDITOR_HOME_URL : process.env.NODE_ENV != 'development' || process.env.NODE_ENV != 'test'?'/syyx/ue/':'/ue/',
          // UEDITOR_HOME_URL: '/ue/',
          // UEDITOR_HOME_URL : '/syyx/ue/',
          token: 'Bearer ' + getToken(),
          toolbars: [
            [
              'undo', 'redo', '|',
              'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript',
              'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor',
              'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
              'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
              'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
              'directionalityltr', 'directionalityrtl', 'indent', '|',
              'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase',
              '|',
              'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
              'emotion', 'pagebreak', 'template', '|',
              'horizontal', 'date', 'time', 'spechars', 'simpleupload', '|',
              'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol',
              'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols',
              '|',
              'print', 'preview', 'searchreplace'
              // 'fullscreen', 'source', 'undo', 'redo', 'bold'
            ]
          ]
        },

4、我用的普通图片上传，找到相对应代码
在这里插入图片描述
修改action，改成上传接口地址

input.addEventListener('change', function(event) {
         if (!input.value) return;
         var loadingId = 'loading_' + (+new Date()).toString(36);
         var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));
         var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';
         // var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);
         //用me.options.uploadUrl的方式根据本地地址动态获取
         var action = me.options.uploadUrl;
         var allowFiles = me.getOpt('imageAllowFiles');
         me.focus();
         me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme + '/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');

         function showErrorLoader(title) {
           if (loadingId) {
             var loader = me.document.getElementById(loadingId);
             loader && domUtils.remove(loader);
             me.fireEvent('showmessage', {
               'id': loadingId,
               'content': title,
               'type': 'error',
               'timeout': 4000
             });
           }
         }

在这里插入图片描述
然后注释掉判断后端配置是否加载的代码，修改setRequestHeader，加上token，最后根据返回参数赋值就行了
me.options.token就能拿到config里面的token了

我目前的ueditor.all.min.js，还引用了网上大佬改的优化表格拖拽的内容
https://download.youkuaiyun.com/download/qq_37225650/85416976