Use rich text ueditor in Vue to solve image upload problem
Official documents may be indispensable for learning new content
The vue-ueditor-wrap component is currently used , which repackages ueditor, and it is also convenient to integrate third-party plug-ins such as Xiumi
https://hc199421.gitee.io/vue-ueditor-wrap/#/home
1. Install components
Note that vue-ueditor-wrap v3 only supports Vue 3
For Vue2, download it
npm i vue-ueditor-wrap2. Download UEditor
https://cdn.zhenghaochuan.com/p/vue-ueditor-wrap/zip/utf8-php.zip
3. Register the component
<template>
<div>
<vue-ueditor-wrap v-model="html" :config="ueConfig" mode="observer">
</vue-ueditor-wrap>
</div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
export default {
components:{
VueUeditorWrap
},
name: 'UeditorTxt',
props: ['txt'],
watch: {
html(val) {
this.$emit('text_content', val);
},
},
data() {
return {
html: '',
html_of: this.txt,
dialogVisible: false,
imageList: [],
ueConfig: {
UEDITOR_HOME_URL: '/UEditor/',
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',
'insertimage',
//"emotion",
//"scrawl",
//"insertvideo",
//"music",
//"attachment",
//"map",
//"gmap",
//"insertframe",
//"insertcode",
//"webapp",
'pagebreak',
//"template",
//"background",
'|',
'horizontal',
//"date",
//"time",
'spechars',
//"snapscreen",
//"wordimage",
'|',
'inserttable',
'deletetable',
'insertparagraphbeforetable',
'insertrow',
'deleterow',
'insertcol',
'deletecol',
'mergecells',
'mergeright',
'mergedown',
'splittocells',
'splittorows',
'splittocols',
//"charts",
//"|",
//"print",
//"preview",
//"searchreplace",
//"drafts",
//"help"
],
],
fontfamily: [
{
label: '',
name: 'songti',
val: '宋体,SimSun',
},
{
label: '仿宋',
name: 'fangsong',
val: '仿宋,FangSong',
},
{
label: '仿宋_GB2312',
name: 'fangsong',
val: '仿宋_GB2312,FangSong',
},
{
label: '',
name: 'kaiti',
val: '楷体,楷体_GB2312, SimKai',
},
{
label: '',
name: 'yahei',
val: '微软雅黑,Microsoft YaHei',
},
{
label: '',
name: 'heiti',
val: '黑体, SimHei',
},
{
label: '',
name: 'lishu',
val: '隶书, SimLi',
},
{
label: '',
name: 'andaleMono',
val: 'andale mono',
},
{
label: '',
name: 'arial',
val: 'arial, helvetica,sans-serif',
},
{
label: '',
name: 'arialBlack',
val: 'arial black,avant garde',
},
{
label: '',
name: 'comicSansMs',
val: 'comic sans ms',
},
{
label: '',
name: 'impact',
val: 'impact,chicago',
},
{
label: '',
name: 'timesNewRoman',
val: 'times new roman',
},
],
autoHeightEnabled: false, // 编辑器不自动被内容撑高
// 初始容器高度
initialFrameHeight: 300,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口
serverUrl: "http://127.0.0.1:3300/uploadsimg" ,
imageActionName: 'uploadimage',
imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
imageCompressBorder: 1600,
imageCompressEnable: true,
imageFieldName: 'file',
imageInsertAlign: 'none',
imageMaxSize: 20480000,
imagePathFormat: '/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}',
imageUrlPrefix: '',
},
};
},
created() {
if (this.html_of != '') {
this.html = this.html_of;
}
},
methods: {
openModule(e) {
this.html = e;
},
},
};
</script>
<style scoped></style>
write a custom component
use components
Because the backend has already written the image upload interface, but sometimes the required request parameters or the content of the returned parameters and the request header are inconsistent, so we need to customize the front end.
The above is the request and return parameters for me to upload pictures normally using elementUI
To troubleshoot image upload issues,
You need the ueditor api address to be http://127.0.0.1:3300/uploadsimg and request for post
The request headers must be consistent (otherwise browsers will easily report cross-domain issues)
The request parameter is file
The absolute path of the picture is returned, and the inserted picture needs to take the data value directly
Modify the dialogs-"image.js file
I just deleted the request header
Then modify the returned content as long as the content of the this.imageList array has the attribute URL as the image address.
If you upload multiple pictures, you will be fine.