Question

我正在尝试使用jQuery从编辑器本身外部向WYSIWYG CLEditor添加一些html标记。

到目前为止，我有......

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

但我不知道如何将字符串添加到WYSIWYG中，它开始让我发疯！

Answer 1

这将覆盖：

$("#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输入的ID。

此外，对此有一些讨论：

CLEditor dynamic adding text

Answer 2

对CCCasons解决方案进行了2次小编辑，使其按预期工作。

$('.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）首先抓取textarea的当前值以阻止它被图像覆盖。

再次，非常感谢CCCason！

从编辑器外部向WYSIWYG添加html（jQuery，ClEditor）

2 个答案: