2012-02-05 4 views
3

jQuery를 사용하여 편집기 외부에서 WYSIWYG CLEditor에 html 마크 업을 추가하려고합니다.편집기 외부에서 WYSIWYG에 html 추가 (jQuery, ClEditor)

지금까지 내가 가지고 ...

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

하지만 난 WYSIWYG에 문자열을 추가하는 방법으로 손해를보고있어 나를 미치게 시작입니다!

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

이 추가합니다 :

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

을 아니면이 시도 :

답변

4

이 덮어 쓰게됩니다 inputID이 CLEditor 입력의 ID입니다

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

합니다.

또한,이이 주위 논의가 있습니다

CLEditor dynamic adding text

+0

정말 멋지다! 완벽하게 작동, 고마워요 :) –

1

그냥 의도 한대로 작동하도록 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) 텍스트 영역의 현재 값을 가져 와서 이미지에서 덮어 쓰지 않도록합니다.

다시 CCCason에 감사드립니다.

+0

내 대답을 업데이 트했습니다, 나는 당신이 덮어 쓰기를 원한다고 생각했습니다. 미안합니다. 나는이 문제를 가지고있는 다음 사람이 선택할 수 있도록 양쪽 모두에 코드를 넣는다. = D – Jason