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!

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!

• javascript
• jquery
• wysiwyg
• jwysiwyg
• cleditor

Share Improve this question Follow edited Apr 27, 2017 at 9:56 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Feb 5, 2012 at 1:09 Martin HuntMartin Hunt 1,15522 gold badges1414 silver badges2323 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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!