91 lines
4.6 KiB
JavaScript
91 lines
4.6 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', () => {
|
|
if (window.removeEventListener) {
|
|
window.removeEventListener('message', _onMessage, false)
|
|
} else {
|
|
window.detachEvent('onmessage', _onMessage)
|
|
}
|
|
window.open('/file-manager/fm-button?wysiwyg=1', 'fm', 'width=1400,height=800');
|
|
if (window.addEventListener) {
|
|
window.addEventListener('message', _onMessage, false);
|
|
} else {
|
|
window.attachEvent('onmessage', _onMessage)
|
|
}
|
|
});
|
|
|
|
return view;
|
|
});
|
|
}
|
|
}
|