vue-ueditor-wrap 通过后台接口上传图片并回显

vue-ueditor-wrap 通过后台接口上传图片并回显

<vue-ueditor-wrap
      v-model="datacontent"
      :config="myConfig"
      @ready="onEditorReady($event)"
      @change="onEditorChange"
></vue-ueditor-wrap>
export default {
	data() {
    	return {
			myConfig: {
		        autoHeightEnabled: false,
		        initialFrameHeight: 0,
		        initialFrameWidth: "100%",
		        UEDITOR_HOME_URL: "/UEditor/",
		        serverUrl: '图片上传接口地址',
		        enableAutoSave: true,
		        imageFieldName:'后台接收图片key',
		   }
	}
}

在ueditor.all.min文件中大约在24521行左右的img标签中添加style="width: 200px"这一步是默认上传后回显图片的大小
然后在大约24563行左右的xhr.onload方法中修改

//xhr.onload
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                       var res = JSON.parse(xhr.responseText)
                       console.log('接口走完--->>>', res);
                       var sign = res;
                       console.log('sign=----1', sign);
                       console.log('accessid=----', sign['accessid']);
                       console.log('filename=----', imgfiles);
                       if (res.state == 'SUCCESS') {
                           var form = {};
                           form.file = res.url; //获取后端返回的地址
                           console.log('form--->>', form);
                           $.ajax({ 
                               url: '后端上传图片的地址',
                               data: form,
                               processData: false,
                               contentType: false,
                               type: 'POST'
                           }).done(function (ret) {
                               console.log('上传成功')
                               var link = sign['url'];
                               loader = me.document.getElementById(loadingId);
                               loader.setAttribute('src', link);
                               loader.setAttribute('_src', link);
                               loader.setAttribute('title', res.title || '');
                               loader.setAttribute('alt', res.original || '');
                               loader.removeAttribute('id');
                               domUtils.removeClasses(loader, 'loadingclass');
                               me.fireEvent("contentchange");
                           });
                       } else {
                           showErrorLoader(res.state);
                       }
                   } else {
                       showErrorLoader(me.getLang('simpleupload.loadError'));
                   }

附加一个在ueditor.config 中配置常用的toolbars按钮

toolbars: [[
            'fullscreen', 'source', '|', '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', '|',
            'simpleupload', 'emotion', 'insertcode', 'template', '|',
            'horizontal', 'date', 'time', 'spechars', 'wordimage', '|',
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
            'print', 'preview', 'searchreplace', 'drafts', 'help'
        ]]