1

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

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?

1 Answer 1

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/

6
  • Thank you. Re: "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." But this I'm guessing is not happening? Or my TinyMCE isn't "hearing" that message? I've read what you've shared and I'm still a bit fuzzy. Perhaps you can offer me a couple "Try this..." if not "Try this...". As for the uploader, I'm simply using what's already there in P2 (p2theme.com) the different is, I want to have WYSIWYG and Media for anything added Feb 25, 2013 at 13:27
  • I do not know if this will work on the new versions. here is a reference on this topic wordpress.org/support/topic/…
    – Robert Lee
    Feb 25, 2013 at 14:23
  • I'll check that as well. Just to clarify, the add New Media is working. And I can get it to add to the "active" testarea. The issue is, if I change that textarea to a TinyMCE editor then WP no longer sees it and doesn't do the insert. I must be missing a setting or something, the question is...what? Any thoughts? Much appreciated. Feb 25, 2013 at 16:49
  • Have you tried using Javascript or JQuery to append text to the text area manually from the add media function based on the #ID of the text area? Without any reference to any code I would not have much suggestions for you.
    – Robert Lee
    Feb 25, 2013 at 19:36
  • I'm not sure I follow: "...from the add media function based on the #ID..." I apologize for seeming vague but that's kinda where I'm at. I can get certain things to work under certain conditions but I'm missing some key insight(s). I guess that's why I'm here. Anything else to suggest? More detailed too. Part of my problem is a lack of understanding of the finer points of sorting out this solutions. Thanks in advance. Mar 6, 2013 at 2:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.