ldc-loue/resources/js/LaravelFileManager.js
2022-09-19 09:10:04 +00:00

115 lines
5.3 KiB
JavaScript

import Swal from "sweetalert2";
import Plugin from "./vendor/ckeditor/node_modules/@ckeditor/ckeditor5-core/src/plugin";
import imageIcon from "./vendor/ckeditor/node_modules/@ckeditor/ckeditor5-core/theme/icons/image.svg";
import ButtonView from "./vendor/ckeditor/node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview";
export default class LaravelFileManager extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add("laravelFileManager", (locale) => {
const view = new ButtonView(locale);
const _onMessage = (event) => {
if (
window.location.origin
.toLowerCase()
.indexOf(event.origin.toLowerCase()) == 0
) {
if (event.data.sender == "calliopeWysiwyg") {
let imageURL = new URL(event.data.message).pathname
.replace(new RegExp("^[/]+"), "")
.replace(/^/, "/");
if (
!["jpg", "png", "jpeg", "gif", "mp4"].includes(
imageURL.split(".").pop()
)
) {
if (Swal) {
Swal.fire({
title: "Impossible d'ajouter le fichier",
text: "Seule les images (jpg, jpeg, png, gif) et les vidéos (mp4) sont supportées.",
icon: "error",
});
} else {
alert(
"Impossible d'ajouter le fichier: Seule les images (jpg, jpeg, png, gif) sont supportées."
);
}
return;
}
if (imageURL.split(".").pop() === "mp4") {
// editor.model.change((writer) => {
// const oembed = writer.createElement("oembed", {
// url: imageURL,
// });
// const figure = writer.createElement(
// "figure",
// { class: "media" },
// [oembed]
// );
// const p = writer.createElement(
// "p",
// null,
// "fofofo"
// );
// // < video controls allowfullscreen style = "max-width: 90%; margin: 0 auto; display: block;" > ' +
// // `<source src="${path}" type="video/mp4">` +
// // `<p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici <a href="${path}">un lien pour télécharger la vidéo</a>.</p>` +
// // '</>
// // Insert the oembed video in the current selection location.
// // editor.model.insertContent(p, editor.model.document.selection);
// // console.log('insert')
// // const insertPosition = editor.model.document.selection.getFirstPosition();
// // writer.insertText('foo', insertPosition);
// // editor.model.insertContent(p, insertPosition);
// // editor.model.insertContent(figure, insertPosition);
// // console.log(imageURL)
// editor.execute("mediaEmbed", imageURL);
// });
} else {
editor.model.change((writer) => {
const imageElement = writer.createElement(
"imageBlock",
{
src: imageURL,
}
);
// Insert the image in the current selection location.
editor.model.insertContent(
imageElement,
editor.model.document.selection
);
});
}
}
}
};
view.set({
label: "Insert image",
icon: imageIcon,
tooltip: true,
});
view.on("execute", () => {
window.removeEventListener("message", _onMessage, false);
window.open(
"/file-manager/fm-button?wysiwyg=1",
"fm",
"width=1400,height=800"
);
window.addEventListener("message", _onMessage, false);
});
return view;
});
}
}