Project scene:
Tip: I analyzed the simple application of ckeditor last time. Because of the interaction relationship, I used JQurey and used the upload method. Now the problem of image upload and display encountered in the process of interface joint debugging is as follows:
- The parameters required for the image upload file cannot be found, file
- Picture position adjustment, size adjustment is not convenient enough
- The style does not match after the data is returned-what you see is what you get
- Save data and parse data can only be in the form of inline style tags
Problem description and cause analysis::
prompt:
//1. 图片上传文件所需要的参数找不到，file
class UploadAdapter {
constructor(loader) {
this.loader = loader;
}
upload() {
return new Promise((resolve, reject) => {
const data = new FormData();
// 此处有坑
data.append("upload", this.loader.file);
data.append("allowSize", 10); //允许图片上传的大小/兆
$.ajax({
url: "http:www.baidu.com",
type: "POST",
data: data,
dataType: "json",
processData: false,
contentType: false,
success: function (data) {
if (data.res) {
resolve({
default: data.url,
});
} else {
reject(data.msg);
}
},
});
});
}
abort() {
}
}
// 加载了适配器
editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
return new UploadAdapter(loader);
};
// 2. 图片位置调整，尺寸调整不够便捷
image: {
toolbar: [
'imageTextAlternative','imageStyle:full','imageStyle:side'
]
},
//
- After the data is returned, the style does not match-what you see is what you get
The style returned by the picture cannot be displayed in the agreed style - Saved data and parsed data can only be in the form of inline style tags. When it
comes to file upload, the back-end parses the file and then the standard HTML format data, and ckeditor only supports its own unique display.
solution:
prompt:
- The parameters needed for the image upload file cannot be found, and the file
document can be used directly.
// 填坑
constructor(loader) {
loade.file.then(data=>{
this.file=data
}
data.append("upload", this.loader.file);
- Read the official documents and found that you need to load a plug-in that controls the size, reconfigure the picture,
you can adjust the left and right position, and select the pre-made size
image: {
// Configure the available styles.
styles: ["alignLeft", "alignCenter", "alignRight"],
// Configure the available image resize options.
resizeOptions: [
{
name: "imageResize:original",
label: "Original",
value: null,
},
{
name: "imageResize:50",
label: "50%",
value: "50",
},
{
name: "imageResize:75",
label: "75%",
value: "75",
},
],
toolbar: [
"imageStyle:alignLeft",
"imageStyle:alignCenter",
"imageStyle:alignRight",
"|",
"imageResize",
"|",
"imageTextAlternative",
],
},```
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1
- After the data is returned, the style does not match-what you see is what you get
. The returned style of the picture cannot be displayed in the agreed style.
After the picture data is returned, it is found that the img size is not set. You
only need to do it. image_resized img {width:100%} - When it comes to file uploading, the back-end analyzes the file through POI, and the data is in standard HTML format, while ckeditor only supports its own unique display, so the solution is that the back-end converts the HTML format into inline style Label form.