Javascript 使用javascript获取ckeditor textarea的textarea值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7906085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting the textarea value of a ckeditor textarea with javascript
提问by Didju Juzphart
I'm a learner as far as JS goes and although I've spent a good few hours reading through tutorials which has helped lots but I'm still having problems figuring out exactly how I find out what a user is typing into a ckeditor textarea.
就 JS 而言，我是一名学习者，虽然我花了好几个小时阅读教程，这对我有很大帮助，但我仍然无法弄清楚我如何找出用户在 ckeditor textarea 中输入的内容.
What I'm trying to do is have it so that when someone types into the textarea, whatever they type appears in a div in a different part of the page.
我想要做的是让它当有人输入文本区域时，他们输入的任何内容都会出现在页面不同部分的 div 中。
I've got a simple text input doing that just fine but because the text area is a ckEditor the similar code doesn't work.
我有一个简单的文本输入，但因为文本区域是一个 ckEditor，类似的代码不起作用。
I know the answer is here: ckEditor API textarea valuebut I don't know enough to figure out what I'm meant to do. I don't suppose anyone fancies helping me out?
我知道答案就在这里：ckEditor API textarea value但我不知道我想做什么。我想没有人愿意帮助我吗？
The code I've got working is:
我工作的代码是：
$('#CampaignTitle').bind("propertychange input", function() {
$('#titleBar').text(this.value);
});
and
和
<label for="CampaignTitle">Title</label>
<input name="data[Campaign][title]" type="text" id="CampaignTitle" />
and
和
<div id="titleBar" style="max-width:960px; max-height:76px;"></div>
回答by Jere
I'm still having problems figuring out exactly how I find out what a user is typing into a ckeditor textarea.
我仍然无法弄清楚我如何找出用户在 ckeditor textarea 中输入的内容。
Ok, this is fairly easy. Assuming your editor is named "editor1", this will give you an alert with your its contents:
好的，这很容易。假设你的编辑器被命名为“editor1”，这会给你一个关于你的内容的警报：
alert(CKEDITOR.instances.editor1.getData());
The harder part is detecting when the user types. From what I can tell, there isn't actually support to do that (and I'm not too impressed with the documentation btw). See this article: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html
更难的部分是检测用户何时输入。据我所知，实际上并没有支持这样做（顺便说一句，我对文档印象不深）。见这篇文章：http: //alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html
Instead, I would suggest setting a timer that is going to continuously update your second div with the value of the textarea:
相反，我建议设置一个计时器，该计时器将使用 textarea 的值不断更新您的第二个 div：
timer = setInterval(updateDiv,100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
$('#trackingDiv').html(editorText);
}
This seems to work just fine. Here's the entire thing for clarity:
这似乎工作得很好。为了清楚起见，这里是整个事情：
<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>
回答by Lindsay
At least as of CKEDITOR 4.4.5, you can set up a listener for every change to the editor's contents, rather than running a timer:
至少从 CKEDITOR 4.4.5 开始，您可以为编辑器内容的每次更改设置一个侦听器，而不是运行计时器：
CKEDITOR.on("instanceCreated", function(event) {
event.editor.on("change", function () {
$("#trackingDiv").html(event.editor.getData());
});
});
I realize this may be too late for the OP, and doesn't show as the correct answer or have any votes (yet), but I thought I'd update the post for future readers.
我意识到这对于 OP 来说可能为时已晚，并且没有显示为正确答案或有任何投票（还），但我想我会为未来的读者更新帖子。
回答by itzmukeshy7
Simply execute
只需执行
CKEDITOR.instances[elementId].getData();
with element id = idof element assigned the editor.
元素id = id的元素分配给编辑器。
回答by p1nox
You could integrate a function on JQuery
您可以在 JQuery 上集成一个函数
jQuery.fn.CKEditorValFor = function( element_id ){
return CKEDITOR.instances[element_id].getData();
}
and passing as a parameter the ckeditor element id
并将 ckeditor 元素 ID 作为参数传递
var campaign_title_value = $().CKEditorValFor('CampaignTitle');
回答by Rodrigo Manguinho
Well. You asked about get value from textarea but in your example you are using a input. Anyways, here we go:
好。您询问了从 textarea 获取值的问题，但在您的示例中，您使用的是输入。无论如何，我们开始：
$("#CampaignTitle").bind("keyup", function()
{
$("#titleBar").text($(this).val());
});
If you really wanted a textarea change your input type text to this
如果您真的想要一个 textarea，请将您的输入类型文本更改为此
<textarea id="CampaignTitle"></textarea>
Hope it helps.
希望能帮助到你。
回答by harshit mishra
i found following code working for ckeditor 5
我发现以下代码适用于 ckeditor 5
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
editor.model.document.on( 'change:data', () => {
editorData = editor.getData();
} );
} )
.catch( error => {
console.error( error );
} );
回答by Saeed Zam
you can add the following code : the ckeditor field data will be stored in $('#ELEMENT_ID').val() via each click. I've used the method and it works very well. ckeditor field data will be saved realtime and will be ready for sending.
您可以添加以下代码：每次单击时，ckeditor 字段数据将存储在 $('#ELEMENT_ID').val() 中。我用过这个方法，效果很好。ckeditor 字段数据将被实时保存并准备发送。
$().click(function(){
$('#ELEMENT_ID').val(CKEDITOR.instances['ELEMENT_ID'].getData());
});
回答by Isuru
var campaignTitle= CKEDITOR.instances['CampaignTitle'].getData();
