プロジェクトシーン：
ヒント：前回、ckeditorの簡単なアプリケーションを分析しました。相互作用の関係があるため、JQureyを使用し、アップロード方法を使用しました。インターフェイスの共同デバッグプロセス中の画像のアップロードと表示の問題は次のとおりです。
- 画像アップロードファイルに必要なパラメータが見つかりません、ファイル
- 画像位置調整、サイズ調整が不便
- データが返された後、スタイルが一致しません-表示されるのは取得したものです
- データの保存とデータの解析は、インラインスタイルのタグの形式でのみ行うことができます
問題の説明と原因の分析::
促す：
//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'
]
},
//
- データが返された後、スタイルが一致しません-表示されるものが取得されるものです
画像によって返されるスタイルは、合意されたスタイルで表示できません - 保存されたデータと解析されたデータは、インラインスタイルのタグの形式でのみ使用できます。
ファイルのアップロードに関しては、バックエンドがファイルを解析してから標準のHTML形式のデータを解析し、ckeditorは独自の表示のみをサポートします。
解決：
促す：
- 画像アップロードファイルに必要なパラメータが見つからず、ファイル
ドキュメントを直接使用できます。
// 填坑
constructor(loader) {
loade.file.then(data=>{
this.file=data
}
data.append("upload", this.loader.file);
- 公式文書を読んで、サイズを制御するプラグインをロードし、画像を再構成し、
左右の位置を調整し、事前に作成されたサイズを選択する必要があることがわかりました
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
- データが返された後、スタイルが一致しません-
表示されているものが取得されたものです。画像によって返されたスタイルは、合意されたスタイルで表示できません。
画像データが返された後、imgサイズが一致していないことがわかります。セット
する必要があります。image_resized img {幅：100％} - ファイルのアップロードに関しては、バックエンドはPOIを介してファイルを分析し、データは標準のHTML形式であり、ckeditorは独自の表示のみをサポートしているため、解決策はバックエンドがHTML形式をに変換することです。インラインスタイルのラベルフォーム。