Lấy giá trị textarea của văn bản ckeditor bằng javascript

Question

Tôi là người học theo cách JS đi và mặc dù tôi đã dành một vài giờ đọc qua các hướng dẫn đã giúp rất nhiều nhưng tôi vẫn gặp sự cố khi tìm ra chính xác làm thế nào tôi tìm ra những gì người dùng đang gõ vào một textarea ckeditor.

Những gì tôi đang cố gắng làm là có nó để khi ai đó nhập vào vùng văn bản, bất cứ điều gì họ nhập sẽ xuất hiện trong một div ở một phần khác của trang.

Tôi có một kiểu nhập văn bản đơn giản làm điều đó tốt nhưng vì vùng văn bản là ckEditor, mã tương tự không hoạt động.

Tôi biết câu trả lời là ở đây: ckEditor API textarea value nhưng tôi không biết đủ để tìm hiểu ý tôi muốn làm. Tôi không cho rằng bất cứ ai tưởng tượng sẽ giúp tôi?

Mã Tôi đã có làm việc là:

$('#CampaignTitle').bind("propertychange input", function() { 
    $('#titleBar').text(this.value); 
}); 

và

<label for="CampaignTitle">Title</label> 
<input name="data[Campaign][title]" type="text" id="CampaignTitle" /> 

và

<div id="titleBar" style="max-width:960px; max-height:76px;"></div> 

Answer 1

Tôi vẫn gặp sự cố khi tìm hiểu chính xác cách tôi tìm ra người dùng đang nhập vào văn bản ckeditor.

Ok, điều này khá dễ dàng. Giả sử trình chỉnh sửa của bạn có tên là "editor1", điều này sẽ cung cấp cho bạn cảnh báo với nội dung của nó:

alert(CKEDITOR.instances.editor1.getData()); 

Phần khó khăn hơn là phát hiện khi người dùng nhập. Từ những gì tôi có thể nói, không thực sự hỗ trợ để làm điều đó (và tôi không quá ấn tượng với tài liệu btw). Xem bài viết này: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html

Thay vào đó, tôi sẽ đề nghị thiết lập một bộ đếm thời gian có nghĩa là sẽ liên tục cập nhật div thứ hai của bạn với giá trị của textarea:

timer = setInterval(updateDiv,100); 
function updateDiv(){ 
    var editorText = CKEDITOR.instances.editor1.getData(); 
    $('#trackingDiv').html(editorText); 
} 

Điều này dường như chỉ làm việc tốt.Đây là điều toàn bộ cho rõ ràng:

<textarea id="editor1" name="editor1">This is sample text</textarea> 

<div id="trackingDiv" ></div> 

<script type="text/javascript"> 
    CKEDITOR.replace('editor1'); 

    timer = setInterval(updateDiv,100); 
    function updateDiv(){ 
     var editorText = CKEDITOR.instances.editor1.getData(); 
     $('#trackingDiv').html(editorText); 
    } 
</script> 

Answer 2

Vâng. Bạn hỏi về nhận giá trị từ textarea nhưng trong ví dụ của bạn, bạn đang sử dụng một đầu vào. Dù sao, ở đây chúng tôi đi:

$("#CampaignTitle").bind("keyup", function() 
{ 
    $("#titleBar").text($(this).val()); 
}); 

Nếu bạn thực sự muốn có một textarea thay đổi văn bản loại đầu vào của bạn để này

<textarea id="CampaignTitle"></textarea> 

Hy vọng nó giúp.

Answer 3

Bạn có thể tích hợp một chức năng trên JQuery

jQuery.fn.CKEditorValFor = function(element_id){ 
    return CKEDITOR.instances[element_id].getData(); 
} 

và đi qua như một tham số yếu tố ckeditor id

var campaign_title_value = $().CKEditorValFor('CampaignTitle'); 

Answer 4

Đơn giản chỉ cần thực hiện

CKEDITOR.instances[elementId].getData(); 

với phần tử id = id của phần tử được gán cho trình chỉnh sửa.

Answer 5

bạn có thể thêm mã sau đây: dữ liệu trường ckeditor sẽ được lưu trữ bằng $ ('# ELEMENT_ID'). Val() qua mỗi lần nhấp. Tôi đã sử dụng phương pháp và nó hoạt động rất tốt. Dữ liệu trường ckeditor sẽ được lưu theo thời gian thực và sẽ sẵn sàng để gửi.

$().click(function(){ 
    $('#ELEMENT_ID').val(CKEDITOR.instances['ELEMENT_ID'].getData()); 
}); 

Answer 6

Ít nhất là của ckeditor 4.4.5, bạn có thể thiết lập một người biết lắng nghe cho mỗi sự thay đổi nội dung của trình soạn thảo, thay vì chạy một timer:

CKEDITOR.on("instanceCreated", function(event) { 
    event.editor.on("change", function() { 
     $("#trackingDiv").html(event.editor.getData()); 
    }); 
}); 

Tôi nhận ra điều này có thể là quá muộn cho OP, và không hiển thị như là câu trả lời chính xác hoặc có bất kỳ phiếu (chưa), nhưng tôi nghĩ rằng tôi muốn cập nhật các bài cho độc giả trong tương lai.

Answer 7

var campaignTitle= CKEDITOR.instances['CampaignTitle'].getData();