使用javascript獲取ckeditor textarea的textarea值

儘管我已經花了好幾個小時閱讀了很多幫助過的教程，但我仍然遇到了問題我如何找出用戶輸入到ckeditor textarea中的內容。使用javascript獲取ckeditor textarea的textarea值

我想要做的就是讓有人輸入textarea時，無論他們輸入什麼，都會出現在頁面不同部分的div中。

我有一個簡單的文本輸入做得很好，但因爲文本區域是一個ckEditor類似的代碼不起作用。

我知道答案在這裏：ckEditor API textarea value但我不知道我的意思是做什麼。我不認爲有人幻想幫助我？

我有工作的代碼是：

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

和

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

和

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

來源

2011-10-26 Didju Juzphart

我仍然有問題搞清楚我是如何找出用戶輸入到ckeditor textarea中的。

好的，這很簡單。假設你的編輯器被命名爲「editor1」，這會給你一個警報，您的內容：

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

較難的部分被檢測到時，用戶類型。從我可以告訴的是，實際上並沒有支持這樣做（並且我對btw文檔印象不深）。看到這篇文章： http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html

相反，我建議設置是要與textarea的價值不斷更新你的第二個div定時器：

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

這似乎工作得很好。下面是爲清楚起見，整個事情：

<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>

來源

2011-10-26 18:45:09 Jere

非常感謝。完美的作品。大象果汁:) –

但有一件事。在我的ckeditor上，我有用於粗體下劃線和大小的工具欄。如果您應用這些樣式，則不會應用到相應的trackingDiv中 - 除了下劃線之外，這很奇怪。但大小，粗體，下劃線和斜體不起作用。有任何想法嗎？ –

Ckeditor正在使用強大的粗體，以斜體表示。我的猜測是，您使用的瀏覽器或框架不會將粗體和斜體樣式應用於這些標籤。你必須自己做。 http://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em – Jere

嘛。你問過從textarea獲得價值，但在你的例子中你使用了一個輸入。不管怎麼說，在這裏我們去：

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

如果你真的想要一個文本輸入的文本類型更改爲這個

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

希望它能幫助。

來源

2011-10-26 17:02:14

你可以jQuery的

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

整合功能和作爲參數傳遞的CKEditor的元素的id

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

來源

2013-01-12 16:17:43 p1nox

簡單的執行

CKEDITOR.instances[elementId].getData();

with元素分配編輯器的元素id = id。

來源

2014-02-25 06:41:52 itzmukeshy7

這是最好的解決方案。 – Ahsan

我接受的答案在我的情況下不起作用。它看起來很酷，因爲它使用主域ID作爲實例ID。好樣的！它也可以像CKEDITOR.instances.elementId.getData（）一樣使用。 – naf4me

@ naf4me是的，我們也可以這樣做，但我們不能使用動態是。 – itzmukeshy7

-1

您可以添加以下代碼： ckeditor字段數據將通過每次單擊存儲在$（'＃ELEMENT_ID'）。val（）中。我使用了這個方法，效果很好。 ckeditor現場數據將被實時保存並準備發送。

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

來源

2014-04-20 12:28:25

爲什麼在文檔上點擊事件？ –

請解釋爲什麼這是問題的答案，或者希望刪除這個答案。 –

@Marcel Gwerder：文檔可以被刪除，但不作任何改變。 –

至少爲CKEDITOR 4.4.5，你可以設立一個監聽器的每一個變化給編輯的內容，而不是運行定時器：

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

我知道這可能爲時已晚對於OP來說，並沒有顯示出正確的答案或者沒有任何投票（但是），但我想我會爲未來的讀者更新帖子。

來源

2014-11-12 16:50:08 Lindsay

複製並粘貼上述代碼並馬上工作 – Chad

-1

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

來源

2016-10-17 06:37:43 Isuru

此代碼可能會回答問題，但是您能否解釋一下這個問題？ – Jimbou

不需要回答。這在5年前得到了公認的答案。另外，你還沒有解釋你的任何代碼。 – Novocaine

使用javascript獲取ckeditor textarea的textarea值

回答

相關問題