[英]Getting the textarea value of a ckeditor textarea with javascript
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 value but I don't know enough to figure out what I'm meant to do.我知道答案就在这里: ckEditor API textarea value但我不知道我想做什么。 I don't suppose anyone fancies helping me out?
我想没有人愿意帮助我吗?
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>
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>
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 来说可能为时已晚,并且没有显示为正确答案或有任何投票(还),但我想我会为未来的读者更新帖子。
Simply execute只需执行
CKEDITOR.instances[elementId].getData();
with element id = id
of element assigned the editor.元素
id = id
分配给编辑器的元素的id = id
。
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');
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 );
} );
Well.好。 You asked about get value from textarea but in your example you are using a input.
您询问了从 textarea 获取值的问题,但在您的示例中,您使用的是输入。 Anyways, here we go:
无论如何,我们开始:
$("#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.希望能帮助到你。
you can add the following code : the ckeditor field data will be stored in $('#ELEMENT_ID').val() via each click.您可以添加以下代码:每次单击时,ckeditor 字段数据将存储在 $('#ELEMENT_ID').val() 中。 I've used the method and it works very well.
我用过这个方法,效果很好。 ckeditor field data will be saved realtime and will be ready for sending.
ckeditor 字段数据将被实时保存并准备发送。
$().click(function(){
$('#ELEMENT_ID').val(CKEDITOR.instances['ELEMENT_ID'].getData());
});
var campaignTitle= CKEDITOR.instances['CampaignTitle'].getData();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.