Drag n' Drop text into WordPress Editor using jQuery

  • Hi,
    I’m having trouble accessing the tinymce content area via jQuery. I created a meta box for Pages and Posts, which displays a list of drag-able text items. I’d like to be able to drop these into the WP content editor at the current caret position.

    I’ve adapted the code from:

    https://skfox.com/2008/11/26/jquery-example-inserting-text-with-drag-n-drop/
    (a demo is available here)
    https://skfox.com/jqExamples/insertAtCaret.html

    The only changes I made were to convert the $("#txtMessage") and $(".txtDropTarget") selections to $('.wp-editor')

    and I added the following at the top:
    $('.wp-editor').addClass('ui-droppable');

    However, I’m getting the following JavaScript error at run time:

    $(“.wp-editor”).droppable is not a function
    https://localhost/wordpress/wp-content/plugins/…/meta-box.js?ver=1.0
    Line 15
    drop: function(ev, ui) {

    I understand from looking at the HTML output in Firebug that the WordPress tinymce editor is embedded in an iframe like so:

    <td class="mceIframeContainer mceFirst mceLast">
<iframe id="content_ifr" frameborder="0" src="javascript:""" title="Rich Text Area Press ALT F10 for toolbar. Press ALT 0 for help." style="width: 100%; height: 352px;">
<html>
<head xmlns="https://www.w3.org/1999/xhtml">
<body id="tinymce" class="mceContentBody wp-editor" dir="ltr">

    I consider myself to have an intermediate understanding of jQuery, but I’m stumped on this one. How can I select the content area inside the iframe, and is that the correct approach? Is there another way I should be doing this? I seem to recall other WordPress plugins having the ability to insert items from meta boxes into the current caret position in the WordPress editor.

    TIA!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter bcwp

    (@bcwp)

    Update:

    I’ve narrowed the problem down to the loading time required for tinymce’s iframe. I also should have been selecting $('#content_ifr').contents().find('body') instead of just $('.wp-editor'), but I’m still having issues, nonetheless.

    The following test code should work, but it fails to set the background color because .ready() fires BEFORE tinymce is fully loaded:

    $('#content_ifr').ready(function() {		$('#content_ifr').contents().find('body').css("background-color", "#f33");
});

    The following test code DOES work, but ONLY if I wait until the tinymce WordPress editor is completely finished loading before I click the title box to fire the .click() event.

    $('#title').click(function() {
	$('#content_ifr').contents().find('body').css("background-color", "#f33");
});

    This is extremely frustrating. After doing an exhaustive search on Google, it seems iframes are notorious for being difficult to work with in JavaScript, yet here they are. Why not just use DIV tags? I’m also surprised that table layouts are frequently used throughout WordPress. <end rant>

    Can anyone help me? This seems overly complicated!

    Thread Starter bcwp

    (@bcwp)

    It appears I’ve been going about this all wrong and shouldn’t be trying to manipulate the iframe content directly, but rather the hidden content textarea.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Drag n' Drop text into WordPress Editor using jQuery’ is closed to new replies.