|
J
jacques author
hi, I found a working solution for tinyMCE to upload images to the server, use and modify them.
It works on windows and on MacOS with PHPRunner 11. The requirement is to create a folder called uploads.
In the file RTEControl.js tinymce.init must be changed to
tinymce.init({
selector: "#" + this.valContId,
menubar: false,
branding: false,
image_advtab: true, // Enable the Advanced tab in the image dialog
setup: function( editor ) {
ctrl.editor = editor;
editor.on('init', function( e ) {
ctrl.setDefaultValue();
ctrl.initCustomEvents();
// ugly fix
$("[title='Insert/edit image']", editor.getContainer())
.on("click", function() {
if ( $( ctrl.pageObj.pageCont ).is(".bs-popup") ) {
$( ctrl.pageObj.pageCont ).removeAttr("tabIndex");
}
});
});
if ( ctrl.valueElem.closest(".bs-popup").length ) {
// see Modal.prototype.enforceFocus
// mce plugins markup is outside the popup content
// plugin element focus simulates popup focus and then stopes
$(document).off("focusin.bs.modal");
}
},
images_upload_url: 'upload.php', // Handles direct image uploads
file_picker_types: 'image', // Enables file picker for images
images_upload_handler: function (blobInfo, success, failure) {
let formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
fetch('upload.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(result => {
if (result.location) {
success(result.location); // TinyMCE inserts the image
} else {
failure('Upload failed');
}
})
.catch(() => failure('Upload error'));
},
file_picker_callback: function (callback, value, meta) {
fetch('list_images.php')
.then(response => response.json())
.then(images => {
let imageList = images.map(img =>
`<img src="${img}" onclick="selectImage('${img}')" style="width:100px; margin:5px; cursor:pointer;">`
).join('');
tinymce.activeEditor.windowManager.open({
title: "Select an Image",
body: { type: "panel", items: [{ type: "htmlpanel", html: imageList }] },
buttons: [
{ type: "cancel", text: "Cancel" }
]
});
window.selectImage = function (url) {
callback(url, { alt: "Selected Image" });
tinymce.activeEditor.windowManager.close();
};
})
.catch(error => console.error('Error loading images:', error));
},
plugins: "lists advlist code link image charmap hr table image imagetools",
height: $("#" + this.valContId).height(),
toolbar: [ 'styleselect fontselect fontsizeselect forecolor backcolor table',
'bold italic underline | alignleft aligncenter alignright hr | ' +
' bullist numlist outdent indent | code link image charmap '],
/*inline: ctrl.isInline,*/
});- list_images.php must be created with the following code
<?php
$dir = "uploads/";
$images = array();
if (is_dir($dir)) {
foreach (scandir($dir) as $file) {
if ($file !== '.' && $file !== '..' && preg_match('/\.(jpg|jpeg|png|gif)$/i', $file)) {
$images[] = $dir . $file;
}
}
}
echo json_encode($images);
?>- upload.php must be created with the following code
<?php
if ($_FILES['file']['error'] == UPLOAD_ERR_OK) {
$targetDir = "uploads/"; // Make sure this directory exists
$fileName = basename($_FILES["file"]["name"]);
$targetFile = $targetDir . $fileName;
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
echo json_encode(['location' => $targetFile]);
} else {
echo json_encode(['error' => 'Failed to move uploaded file']);
}
} else {
echo json_encode(['error' => 'File upload error']);
}
?>the RteControl.js file can be found in PHPRunner 11 windows
\AppData\Local\PHPRunner11\app- 11.0.14\resources\source\include\common\runnerJS\editControls\RteControl.js macos
Apps > PHPRunner 11 Enterprise.app > Contents > Resources > source > include > common > runnerJS > RteControl.js gr
Jacques |
|