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
|
|