par
semsem » 05 mars 2024, 16:25
Mon TinyMCE ne s'affiche plus... je vois seulement l'éditeur par défaut d'EasyAdmin...
<?php
/***************************************************
* Only these origins are allowed to upload images *
***************************************************/
$accepted_origins = array("http://localhost:8000");
/*********************************************
* Change this line to set the upload folder *
*********************************************/
$imageFolder = "assets/images/";
$name = uniqid();
if (isset($_SERVER['HTTP_ORIGIN'])) {
// same-origin requests won't set an origin. If the origin is set, it must be valid.
if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
} else {
header("HTTP/1.1 403 Origin Denied");
return;
}
}
// Don't attempt to process the upload on an OPTIONS request
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header("Access-Control-Allow-Methods: POST, OPTIONS");
return;
}
reset($_FILES);
$temp = current($_FILES);
if (is_uploaded_file($temp['tmp_name'])) {
/*
If your script needs to receive cookies, set images_upload_credentials : true in
the configuration and enable the following two headers.
*/
// header('Access-Control-Allow-Credentials: true');
// header('P3P: CP="There is no P3P policy."');
// Sanitize input
if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
header("HTTP/1.1 400 Invalid file name.");
return;
}
// Verify extension
if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
header("HTTP/1.1 400 Invalid extension.");
return;
}
// Accept upload if there was no origin, or if it is an accepted origin
// assets/images/
$extension = pathinfo($temp['name'], PATHINFO_EXTENSION);
$filetowrite = $imageFolder . $name . "." . $extension;
move_uploaded_file($temp['tmp_name'], $filetowrite);
// Determine the base URL
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on' ? "https://" : "http://";
$baseurl = $protocol . $_SERVER["HTTP_HOST"] . rtrim(dirname($_SERVER['REQUEST_URI']), "/") . "/";
// Respond to the successful upload with JSON.
// Use a location key to specify the path to the saved image resource.
// { location : '/your/uploaded/image/file'}
echo json_encode(array('location' => $filetowrite));
} else {
// Notify editor that the upload failed
header("HTTP/1.1 500 Server Error");
}
Code : Tout sélectionner
{% extends '@EasyAdmin/crud/form_theme.html.twig' %}
{% block ea_text_editor_widget %}
<textarea id="{{ id }}" name="Article[contenu]"class="trix-content tinymce" role="textbox">{{ data }}</textarea>
<script src="{{ asset('assets/bundles/tinymce/ext/tinymce/tinymce.min.js') }}"></script>
<script src="{{ asset('bundles/tinymce/ext/tinymce-webcomponent.js') }}" type="module"></script>
<script>
tinymce.init({
selector: '#image',
height: 1000,
plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
tinycomments_mode: 'embedded',
// images_upload_url: 'upload.php',
images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'upload.php');
xhr.upload.onprogress = (e) => {
progress(e.loaded / e.total * 100);
};
xhr.onload = () => {
if (xhr.status === 403) {
reject({
message: 'HTTP Error: ' + xhr.status,
remove: true
});
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
console.log(xhr);
reject('HTTP Error: ' + xhr.status + ' ' + xhr.statusText);
return;
}
const json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
reject('Invalid JSON: ' + xhr.responseText);
return;
}
resolve(json.location);
};
xhr.onerror = () => {
reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
const formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
})
});
// colocar imagem no tinymce
const images = document.querySelectorAll('.image');
images.forEach(image => {
image.addEventListener('click', event => {
// tinymce.activeEditor.execCommand('mceInsertContent', false, image.outerHTML);
tinymce.get('image').execCommand('mceInsertContent', false, image.outerHTML);
// tinymce.activeEditor.setContent(image.outerHTML);
console.log(event);
})
})
</script>
{% endblock %}
<?php
namespace App\Controller\Admin;
use App\Entity\Article;
use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
use EasyCorp\Bundle\EasyAdminBundle\Field\AssociationField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextEditorField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
class ArticleCrudController extends AbstractCrudController
{
public static function getEntityFqcn(): string
{
return Article::class;
}
public function configureCrud(Crud $crud): Crud
{
return $crud
->setFormThemes(['@EasyAdmin/crud/form_theme.html.twig', 'admin/articleForm.html.twig']); // On ajoute un thème pour le formulaire
}
public function configureFields(string $pageName): iterable
{
return [
TextField::new('titre'),
TextEditorField::new('contenu'),
AssociationField::new('sousCategorie') // Champ pour sélectionner une sous-catégorie
->setLabel('Sous-catégorie')
->setRequired(true),
// AssociationField::new('categorie') // Champ pour sélectionner une sous-catégorie
// ->setLabel('Catégorie')
// ->setRequired(true),
];
}
}
Et Mon JS de BASE qui fonctionne mais avec le blob/base64 :
Code : Tout sélectionner
{% extends '@EasyAdmin/crud/form_theme.html.twig' %}
{% block ea_text_editor_widget %}
<textarea id="{{ id }}" name="Article[contenu]"class="trix-content tinymce" role="textbox">{{ data }}</textarea>
<script src="{{ asset('assets/bundles/tinymce/ext/tinymce/tinymce.min.js') }}"></script>
<script src="{{ asset('bundles/tinymce/ext/tinymce-webcomponent.js') }}" type="module"></script>
<script>
tinymce.init({
selector: '.tinymce',
plugins: 'image file-manager link', // Ajoutez le plugin 'link' à la liste des plugins activés
toolbar: 'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image | filemanager | link | exportpdf', // Ajoutez le bouton 'link' à la barre d'outils
file_picker_callback: function(cb, value, meta) {
const input = document.createElement('input');
input.setAttribute('type', 'file');
// Event listeners
input.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.addEventListener('load', () => {
// Handle data processing with a blob
const id = 'blobid' + (new Date()).getTime();
const blobCache = tinymce.activeEditor.editorUpload.blobCache;
const base64 = reader.result.split(',')[1];
const blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
});
reader.readAsDataURL(file);
});
input.click();
},
images_reuse_filename: true,
paste_data_images: true,
// content_css: '/style.css',
setup: function (editor) {
// Ajoutez la fonction pour exporter en PDF avec html2pdf
editor.ui.registry.addButton('exportpdf', {
text: 'Exporter au format PDF',
onAction: function () {
exportToPDF(editor.getContent());
}
});
}
});
function exportToPDF(content) {
var element = document.createElement('div');
element.innerHTML = content;
html2pdf(element, {
margin: 10,
filename: 'output.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
});
}
</script>
{% endblock %}
Mon TinyMCE ne s'affiche plus... je vois seulement l'éditeur par défaut d'EasyAdmin... 8-|
[PHP]
<?php
/***************************************************
* Only these origins are allowed to upload images *
***************************************************/
$accepted_origins = array("http://localhost:8000");
/*********************************************
* Change this line to set the upload folder *
*********************************************/
$imageFolder = "assets/images/";
$name = uniqid();
if (isset($_SERVER['HTTP_ORIGIN'])) {
// same-origin requests won't set an origin. If the origin is set, it must be valid.
if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
} else {
header("HTTP/1.1 403 Origin Denied");
return;
}
}
// Don't attempt to process the upload on an OPTIONS request
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
header("Access-Control-Allow-Methods: POST, OPTIONS");
return;
}
reset($_FILES);
$temp = current($_FILES);
if (is_uploaded_file($temp['tmp_name'])) {
/*
If your script needs to receive cookies, set images_upload_credentials : true in
the configuration and enable the following two headers.
*/
// header('Access-Control-Allow-Credentials: true');
// header('P3P: CP="There is no P3P policy."');
// Sanitize input
if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
header("HTTP/1.1 400 Invalid file name.");
return;
}
// Verify extension
if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
header("HTTP/1.1 400 Invalid extension.");
return;
}
// Accept upload if there was no origin, or if it is an accepted origin
// assets/images/
$extension = pathinfo($temp['name'], PATHINFO_EXTENSION);
$filetowrite = $imageFolder . $name . "." . $extension;
move_uploaded_file($temp['tmp_name'], $filetowrite);
// Determine the base URL
$protocol = isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on' ? "https://" : "http://";
$baseurl = $protocol . $_SERVER["HTTP_HOST"] . rtrim(dirname($_SERVER['REQUEST_URI']), "/") . "/";
// Respond to the successful upload with JSON.
// Use a location key to specify the path to the saved image resource.
// { location : '/your/uploaded/image/file'}
echo json_encode(array('location' => $filetowrite));
} else {
// Notify editor that the upload failed
header("HTTP/1.1 500 Server Error");
}
[/PHP]
[code]
{% extends '@EasyAdmin/crud/form_theme.html.twig' %}
{% block ea_text_editor_widget %}
<textarea id="{{ id }}" name="Article[contenu]"class="trix-content tinymce" role="textbox">{{ data }}</textarea>
<script src="{{ asset('assets/bundles/tinymce/ext/tinymce/tinymce.min.js') }}"></script>
<script src="{{ asset('bundles/tinymce/ext/tinymce-webcomponent.js') }}" type="module"></script>
<script>
tinymce.init({
selector: '#image',
height: 1000,
plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
tinycomments_mode: 'embedded',
// images_upload_url: 'upload.php',
images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'upload.php');
xhr.upload.onprogress = (e) => {
progress(e.loaded / e.total * 100);
};
xhr.onload = () => {
if (xhr.status === 403) {
reject({
message: 'HTTP Error: ' + xhr.status,
remove: true
});
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
console.log(xhr);
reject('HTTP Error: ' + xhr.status + ' ' + xhr.statusText);
return;
}
const json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
reject('Invalid JSON: ' + xhr.responseText);
return;
}
resolve(json.location);
};
xhr.onerror = () => {
reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
const formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
})
});
// colocar imagem no tinymce
const images = document.querySelectorAll('.image');
images.forEach(image => {
image.addEventListener('click', event => {
// tinymce.activeEditor.execCommand('mceInsertContent', false, image.outerHTML);
tinymce.get('image').execCommand('mceInsertContent', false, image.outerHTML);
// tinymce.activeEditor.setContent(image.outerHTML);
console.log(event);
})
})
</script>
{% endblock %}
[/code]
[PHP]
<?php
namespace App\Controller\Admin;
use App\Entity\Article;
use EasyCorp\Bundle\EasyAdminBundle\Config\Crud;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
use EasyCorp\Bundle\EasyAdminBundle\Field\AssociationField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextEditorField;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextField;
class ArticleCrudController extends AbstractCrudController
{
public static function getEntityFqcn(): string
{
return Article::class;
}
public function configureCrud(Crud $crud): Crud
{
return $crud
->setFormThemes(['@EasyAdmin/crud/form_theme.html.twig', 'admin/articleForm.html.twig']); // On ajoute un thème pour le formulaire
}
public function configureFields(string $pageName): iterable
{
return [
TextField::new('titre'),
TextEditorField::new('contenu'),
AssociationField::new('sousCategorie') // Champ pour sélectionner une sous-catégorie
->setLabel('Sous-catégorie')
->setRequired(true),
// AssociationField::new('categorie') // Champ pour sélectionner une sous-catégorie
// ->setLabel('Catégorie')
// ->setRequired(true),
];
}
}
[/PHP]
Et Mon JS de BASE qui fonctionne mais avec le blob/base64 :
[code]
{% extends '@EasyAdmin/crud/form_theme.html.twig' %}
{% block ea_text_editor_widget %}
<textarea id="{{ id }}" name="Article[contenu]"class="trix-content tinymce" role="textbox">{{ data }}</textarea>
<script src="{{ asset('assets/bundles/tinymce/ext/tinymce/tinymce.min.js') }}"></script>
<script src="{{ asset('bundles/tinymce/ext/tinymce-webcomponent.js') }}" type="module"></script>
<script>
tinymce.init({
selector: '.tinymce',
plugins: 'image file-manager link', // Ajoutez le plugin 'link' à la liste des plugins activés
toolbar: 'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image | filemanager | link | exportpdf', // Ajoutez le bouton 'link' à la barre d'outils
file_picker_callback: function(cb, value, meta) {
const input = document.createElement('input');
input.setAttribute('type', 'file');
// Event listeners
input.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.addEventListener('load', () => {
// Handle data processing with a blob
const id = 'blobid' + (new Date()).getTime();
const blobCache = tinymce.activeEditor.editorUpload.blobCache;
const base64 = reader.result.split(',')[1];
const blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
});
reader.readAsDataURL(file);
});
input.click();
},
images_reuse_filename: true,
paste_data_images: true,
// content_css: '/style.css',
setup: function (editor) {
// Ajoutez la fonction pour exporter en PDF avec html2pdf
editor.ui.registry.addButton('exportpdf', {
text: 'Exporter au format PDF',
onAction: function () {
exportToPDF(editor.getContent());
}
});
}
});
function exportToPDF(content) {
var element = document.createElement('div');
element.innerHTML = content;
html2pdf(element, {
margin: 10,
filename: 'output.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
});
}
</script>
{% endblock %}
[/code]
