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

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

3 голосов
/ 05 февраля 2012

Я пытаюсь добавить 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 ]

4 голосов
/ 05 февраля 2012

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

$("#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 динамическое добавление текста

1 голос
/ 05 февраля 2012

Только что сделали 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!

...