Rectangle 27 1

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.

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);
    }
}

What would a PHP response snippet look like for this? Much appreciated.

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 8

There is another plugin for tiny mce which is free and open source. You can use this http://justboil.me/tinymce-images-plugin/

with this plugin I can upload an image to the server?? I also want the uploaded images to apperar within text

I am confused whether I should start with it, because of plenty of not positive comments

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 7

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.

  • Upload files with a simple drag & drop.
  • Use as stand-alone file manager, as TinyMCE, CKEditor or CLEditor plugin or as crossdomain.
  • Many customisation parameters such as Automatic resizing of uploaded images, Optional limiting of image dimensions, Files allowed lists.
  • Full preview of uploaded images, videos and audios.
  • Automatic creation of thumbnails and Automatic realignment of thumbnails after external changes

and ...

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 3

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.

Doesn't play nice with mod_security

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 0

DOCUMENTROOT defined here will point only to www or htdocs directory. So if you have sub-folder in which(which happens when testing locally) your website files are hosted; add that too to the $uploadpath.

php - PDW File Browser for TinyMCE - Upload Path - Stack Overflow

php javascript jquery file-upload tinymce
Rectangle 27 0

Try PDW File Browser. Unlike its web page, it is really good (and intuitive, in my opinion, since it offers GUI similar to MS Windows File Explorer).

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 0

Thank you, Im trying to put this work but Im having some problems, do you have exprience with this plugin?

Maybe if you explain what additional functionality you need that can't be provided by a simple file upload input we can find a solution that fits best for your case :-)

Thanks for your answer, Im just looking for a free plugin that enables to upload pdf and images! Im trying to use this that you said, I follow the documentation to use it on my tinymce4 but its not working. I think everything correct so Im not finding where is the problem

If you only want a simple single file upload, why not go with something basic?

I know that method but its to a administration panel and I think its more user friendly if I use a good plugin that is already created with good reputation!

php - It is possible use tinymce to upload pdf? - Stack Overflow

php pdf tinymce tinymce-4
Rectangle 27 0

I had the same issue a couple of weeks ago.

First of all is important to be concern about the tinymce textarea will shows images and elements like a web browser will do, so you must to enter a right path for the href atribute image label (external published url o local url).

Once you ensure the url, you will change your configuration in order to avoid the tinyMce control will drop the image label from your code. I got this point with this configuration (using absolute paths):

tinyMCE.init({
    ...
    //your initialization rules
    ...
    // Drop lists for link/image/media/template dialogs
    template_external_list_url : 'lists/template_list.js',
    external_link_list_url     : 'lists/link_list.js',
    external_image_list_url    : 'lists/image_list.js',
    media_external_list_url    : 'lists/media_list.js',
    relative_urls              : false,
    remove_script_host         : false,
    convert_urls               : true,
    extended_valid_elements    : 'iframe[src|frameborder|style|scrolling|class|width|height|name|align]'
    });

javascript - Tinymce image upload php plugin or something - Stack Over...

javascript php image upload tinymce
Rectangle 27 0

In my opinion , I think that you should use separate field to upload images to server as this helps you control them , resize , determine file name and upload path

you can use form_open_multipart() Codeigniter function to upload files

then you can make a DB table field called image and insert the uploaded file name to it

then retrieving the post you can

<img src="<?php echo $post->image; ?>" />

<p><?php echo $post->content ?></p>

This is what I decided to do first, but what if in a single post I have more than one images? if I loop through the <img> to display them all, I' ll have a banch of images and then the text, which I don't think that will look nice. Is there any way to upload an image to the server through tinymce and control them , resize them etc etc through the Image library too??

No there is not :(

I always use the Iframe method to upload files as if they were uploaded by ajax and i think this would be useful for you

php - CodeIgniter upload image through tinymce - Stack Overflow

php codeigniter file-upload tinymce codeigniter-2
Rectangle 27 0

There is another plugin for tiny mce which is free and open source. You can use this http://justboil.me/tinymce-images-plugin/

with this plugin I can upload an image to the server?? I also want the uploaded images to apperar within text

I am confused whether I should start with it, because of plenty of not positive comments

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 0

try a beginning slash in the image path

$config['img_path'] = '/test/admin/uploads'; // Relative to domain name

php - TINYMCE - Path to upload images folder with jbimages plugin does...

php tinymce-4
Rectangle 27 0

In my opinion , I think that you should use separate field to upload images to server as this helps you control them , resize , determine file name and upload path

you can use form_open_multipart() Codeigniter function to upload files

then you can make a DB table field called image and insert the uploaded file name to it

then retrieving the post you can

<img src="<?php echo $post->image; ?>" />

<p><?php echo $post->content ?></p>

This is what I decided to do first, but what if in a single post I have more than one images? if I loop through the <img> to display them all, I' ll have a banch of images and then the text, which I don't think that will look nice. Is there any way to upload an image to the server through tinymce and control them , resize them etc etc through the Image library too??

No there is not :(

I always use the Iframe method to upload files as if they were uploaded by ajax and i think this would be useful for you

php - CodeIgniter upload image through tinymce - Stack Overflow

php codeigniter file-upload tinymce codeigniter-2
Rectangle 27 0

I got it! I need define a javascript function, called "file_browser_callback",and "file_browser_callback" attribute to the function,for example:

function myCustomFileBrowser(field_name, url, type, win) {
    // Do custom browser logic
    win.document.forms[0].elements[field_name].value = 'my browser value';
}

tinyMCE.init({
        ...
        file_browser_callback : "myCustomFileBrowser"
});

tinymce 4 - How to show image browse button in tinymce4 and upload ima...

php tinymce-4
Rectangle 27 0

There are two approaches to this.

You either keep an upload field outside TinyMCE and use ajax/iframe file upload.

Write a TinyMCE plugin with an ability to upload an image.

Please note that both of these approaches take some effort to implement.

As far as handling the file on the server side is concerned, you can go through the Codeigniter Docs to get you started.

you mean to have a plugin that will use the file upload and the image manipulation classes?? how can i do this??

TinyMCE has it's own way of writing plugins tinymce.com/wiki.php/API3:class.tinymce.Plugin .You will want one that opens a dialog box, with an upload button and allows the user to choose an image and upload the image. Of course, to handle the uploading itself on the server, you could use image manipulation class offered by codeigniter.

How can I do this you said? is there any tutorial available or any link that shows how to embed the tinymce's plugin with the codeigniter's image class???

php - CodeIgniter upload image through tinymce - Stack Overflow

php codeigniter file-upload tinymce codeigniter-2
Rectangle 27 0

There are two approaches to this.

You either keep an upload field outside TinyMCE and use ajax/iframe file upload.

Write a TinyMCE plugin with an ability to upload an image.

Please note that both of these approaches take some effort to implement.

As far as handling the file on the server side is concerned, you can go through the Codeigniter Docs to get you started.

you mean to have a plugin that will use the file upload and the image manipulation classes?? how can i do this??

TinyMCE has it's own way of writing plugins tinymce.com/wiki.php/API3:class.tinymce.Plugin .You will want one that opens a dialog box, with an upload button and allows the user to choose an image and upload the image. Of course, to handle the uploading itself on the server, you could use image manipulation class offered by codeigniter.

How can I do this you said? is there any tutorial available or any link that shows how to embed the tinymce's plugin with the codeigniter's image class???

php - CodeIgniter upload image through tinymce - Stack Overflow

php codeigniter file-upload tinymce codeigniter-2
Rectangle 27 0

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.

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);
    }
}

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 0

while building the src just use str_replace for a quick fix.

str_replace('\"','',image_src)

This is the quick fix without editing the plugin code.

Where should I add this as surely the building is done within the WP_editor function?

You can add where the image is rendered. If its in the WP_editor, then while displaying the content you can use this. Instead of image_src you use the the_content() function, so wherever the matching quotes comes in image it will replace with empty literals. Try this

php - Wordpress TinyMCE Image upload issue - Stack Overflow

php wordpress wordpress-plugin tinymce
Rectangle 27 0

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.

Doesn't play nice with mod_security

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor
Rectangle 27 0

Try PDW File Browser. Unlike its web page, it is really good (and intuitive, in my opinion, since it offers GUI similar to MS Windows File Explorer).

php - tinyMCE - how to handle image uploads - Stack Overflow

php javascript jquery wysiwyg text-editor