TinyMCE and WordPress Media Manager – Insert into post not working

2 Views

For the sake of this discussion , I’m trying to add the WYSIWYG editor TinyMCE to the WordPress add new comments field. (Actually, I’m hacking P2 but let’s not get distracted.)

I start with a textarea id=”posttext”.

Read More

A click triggers adding the editor: tinyMCE.init({mode : “exact”, elements: “posttext”});

The catch is, I also want to use WP Add Media. The Insert into Post works on the textarea. But once I init the editor WP loses track of where to insert. Since Add Media works with the editor on Admin posts I presume it’s possible but there’s something I don’t have just right.

Also, what id= does the Insert into Post look for? So far I’ve figured it can be posttext and content.

Thanks in advance for your help.

p.s. While I have your attention, is there anything special I need to know about submitting a change from the TinyMCE editor via Ajax. P2 has a plain ol’ textarea, what I want is to add WYSIWYG to that. Am I making sense?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. For informational sake, TinyMCE uses a Ajax script from /wp-admin/admin-ajax.php to submit an action called send-attachment-to-editor.

    This function is inside of /wp-includes/js/media-editor.min.js

    return wp.media.post("send-attachment-to-editor",{nonce:wp.media.view.settings.nonce.sendToEditor,attachment:d,html:e,post_id:wp.media.view.settings.post.id})

    Basically once a image item is selected and after hitting the “insert to post” button, it runs the Ajax script and sends the action: send-attachment-to-editor and all the img attachment information including nonce.

    Example Ajax Post:

    nonce=70b38cc7e2&attachment%5Bid%5D=824&attachment%5Bpost_content%5D=Specialized+S+Works+custom+work+by+Decal+Spec&attachment%5Bpost_excerpt%5D=&attachment%5Burl%5D=http%3A%2F%2Fdecal-spec.com%2Fwp-content%2Fuploads%2F2013%2F02%2FS-Works-5256.jpg&attachment%5Balign%5D=none&attachment%5Bimage-size%5D=large&attachment%5Bimage_alt%5D=Specialized+S+Works+Project&html=%3Ca+href%3D%22http%3A%2F%2Fdecal-spec.com%2Fwp-content%2Fuploads%2F2013%2F02%2FS-Works-5256.jpg%22%3E%3Cimg+src+width%3D%22625%22+height%3D%22942%22+alt%3D%22Specialized+S+Works+Project%22+class%3D%22wp-image-824+alignnone+size-large%22+%2F%3E%3C%2Fa%3E&post_id=0&action=send-attachment-to-editor

    Which then this responds with the img you requested over and puts it inside the editor:

    {"success":true,"data":"<a href="http://decal-spec.com/wp-content/uploads/2013/02/S-Works-5256.jpg"><img src="http://decal-spec.com/wp-content/uploads/2013/02/S-Works-5256-679x1024.jpg" alt="Specialized S Works Project" width="625" height="942" class="alignnone size-large wp-image-824" /></a>"}

    And for your second question I believe by default the content area ID would equal to #page_contents which you could manually add the content yourself through JS/JQuery.

    With all this the only concern I have is how are you going to show the contents of add media and the functionality of the upload/img managment. This particular section would need some permissions I believe and would cause it to have control over the pictures that are currently on the site already. I would be interested to see how you would handle the task of displaying this information and practical usage inside the comment section.

    I know this plugin is out of date and probably doesn’t even work but it might help you http://wordpress.org/extend/plugins/tinymcecomments/