Add html to WYSIWYG from outside the editor (jQuery, ClEditor)

Question

I'm trying to add some html markup to the WYSIWYG CLEditor from outside of the editor itself using jQuery.

So far I have...

$('.add-image').click(
    function()
    {
        theurl = $(this).text();
        theimage = '<a href="' + theurl + '" class="lightbox"><img src="' + theurl + '" /></a>';
        // Now What? 
    }
);

But I'm at a loss as to how to add the string in to the WYSIWYG and it's starting to drive me crazy!

Answer 1

This will overwrite:

$("#inputID").val(theimage); 
$("#inputID").cleditor()[0].updateFrame();

This will append:

currentval = $("#inputID").val();
$("#inputID").val(theimage);
$("#inputID").val(currentval + theimage); 

Or maybe try this:

$('#inputID').val('new text data').blur();

Where inputID is the ID of your CLEditor input.

Also, this has some discussion around this:

CLEditor dynamic adding text

Answer 2

Just made 2 small edits to CCCasons solution to make it work as intended.

$('.add-image').click(
function()
{
    theurl = $(this).text();
    theimage = '<a href="' + theurl + '" class="thelightbox" style="display: block"><img src="' + theurl + '" /></a><br/>';

    // Get the current value of the textarea otherwise it will be overwritten
    currentval = $("textarea.wysiwyg").val();

    $("textarea.wysiwyg").val(currentval + theimage); 
    $("textarea.wysiwyg").cleditor()[0].updateFrame();                  
}
);

1) Added a line break to the end of the inserted link. Otherwise when you try to type in the wysiwyg after adding the image it inputs inside the link.

2) Grabbed the current value of the textarea first to stop it being overwritten by the image.

Again, thanks a lot to CCCason!