I have a site where people post news, it is written in PHP.
Up to now, people who post stories had a textarea for the text input, and a form field to upload an image for the story.
Now I am upgrading the site, and I am considering giving people more flexibility, so I plan to use a javascript WYSIWYG text editor.
After reviewing the most popoular, or at least the ones I found googling, I think tinyMCE is the best documented and thats why I think I'm going to go with it, though I've just worked with it for around 4-5 hours, so I don't really care if I'll have to switch to another editor.
When you drag-drop images in the textarea, tinyMCE encodes the image in base64 and uses it as the src attribute for the image tag.
I was wondering, is there a way to make tinyMCE upload the images to the server as files so that I can handle them with php (make thumbnails, name and store them as I wish)?
If not, is there an editor where that would be an option?
Local images can be uploaded to TinyMCE through the use of the new editor. uploadImages() function. This functionality is handled asynchronously, meaning that it is possible for users to save their content before all images have completed uploading.
When you're using TinyMCE in your apps, and a user requirement is to edit content previously stored somewhere else (like in a CMS, which Tiny works well with), what you need is a way to populate the editor with that content. You can do this using the setContent() API method.
To upload a new image open the upload panel in the image browser. Open the Image info tab and click Browse server. A new window will open where you see all your uploaded images. Open the Settings to choose another upload path.
I recommend "Responsive File Manager"
Which is a free open-source file manager and image manager made with the jQuery library, CSS3, PHP and HTML5 that offers a nice and elegant way to upload and insert files, images and videos.
GREAT FEATURES :
and ...
There is another plugin for tiny mce which is free and open source. You can use this
http://justboil.me/tinymce-images-plugin/
There is a paid plugin file manager called MCImageManager
Or you could integrate uplodify or such into the add image popup, then when an image is uploaded update the tinyMCEImageList.js file.
Here's a simple option for uploading images from TinyMCE directly from a toolbar button using Plupload without needing additional popup windows. Note - this allows you to select the file using your file picker but doesn't support drag drop.
Add a button to tinymce with an ID 'mybutton' and no click event:
tinymce.init({selector:'.use-tinymce',
plugins: "code link visualblocks",
menubar: false,
extended_valid_elements : "span[!class]",
toolbar: "undo redo | formatselect | link code | mybutton",
visualblocks_default_state: true,
setup: function(editor) {
editor.addButton('mybutton', {
type: 'button',
title: 'Insert image',
icon: 'image',
id: 'mybutton'
});
editor.on('init', function(e) {
var pluploadHandler = new PluploadHandler(jQuery, plupload);
});
}
});
Reference this button in the Plupload initialization:
var PluploadHandler = function( $, plupload ) {
...
this.uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : document.getElementById('mybutton'),
url : '/path/to/upload/the/image',
You'll need to write the server side code for your upload path /path/to/upload/the/image
to save the image and respond with the URL to the new image.
Lastly catch the uploaded response and add your image tag to TinyMCE:
this.uploader.init();
this.uploader.bind("FilesAdded", handlePluploadFilesAdded);
this.uploader.bind("FileUploaded", handlePluploadFileUploaded);
function handlePluploadFilesAdded(up, files) {
console.log("+ handlePluploadFilesAdded");
up.start();
}
function handlePluploadFileUploaded(up, file, res) {
console.log("++ res.response: " + JSON.stringify(res.response));
var img = "<img src='" + res.response + "?" + Date.now() + "'>";
tinymce.activeEditor.execCommand('mceInsertContent', false, img);
}
}
Full source code is here (Tested on TinyMCE 4.1.9; Plupload 2.1.2): https://gist.github.com/danielflippance/e1599fd58ada73b56bfb
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With