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.
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.
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.
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. 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>
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.
Look inside the ckeditor/ckeditor. js file. At the top of the file, you can find the version.
Ckeditor 4 allows you to replace multiple textareas with editors based on classname: CKEDITOR.
I'm still having problems figuring out exactly how I find out what a user is typing into a ckeditor textarea.
Ok, this is fairly easy. Assuming your editor is named "editor1", this will give you an alert with your its contents:
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
Instead, I would suggest setting a timer that is going to continuously update your second div with the value of the textarea:
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.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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With