Добавьте html в WYSIWYG извне редактора (jQuery, ClEditor)

Я пытаюсь добавить html-разметку в WYSIWYG CLEditor снаружи самого редактора, используя jQuery.

Пока у меня есть...

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

Но я не знаю, как добавить строку в WYSIWYG, и это начинает сводить меня с ума!

Источник

2 ответа

Решение

Это перезапишет:

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

Это добавит:

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

Или, может быть, попробуйте это:

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

Где inputID - это идентификатор вашего входа CLEditor.

Кроме того, у этого есть некоторое обсуждение вокруг этого:

CLEditor динамическое добавление текста

Источник

Просто сделали 2 небольших изменения в решении CCCasons, чтобы оно работало как задумано.

$('.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) Добавлен разрыв строки в конце вставленной ссылки. В противном случае, когда вы пытаетесь ввести wysiwyg после добавления изображения, оно вводится внутри ссылки.

2) Сначала захватите текущее значение текстовой области, чтобы оно не перезаписывалось изображением.

Еще раз большое спасибо CCCason!

Источник
Другие вопросы по тегам