how to detect content from a richtext editor on keyup

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Kim Andersen 1447 posts 2196 karma points MVP

Jul 10, 2014 @ 11:54
0

How to detect content from a richtext editor on keyup

UI Questions
Hi there everybody

I'm in a situation where I need to read content from some fields "on the fly" while the editors are typing. This task is pretty easy when working with a textstring or a textarea. In those cases I can just do like this:
```
var propertyInUmbracoElem = jQuery('#body_prop_content');    
propertyInUmbraco.on('keyup', function (e) {
    //This is the value from the field:
    var fieldContent = propertyInUmbraco.val()
}
```
The above piece of code works perfectly, and everytime an editor presses a key in the field, the new value can be read.

So now I need to do the same stuff with a richtext editor. My problem is that the richtext editor field is made by a hidden textarea that's only updated when the page is saved. The visible editor is located in a span-element with an iframe inside. The text is written inside the body-element in that iframe. I can grab the iframe, but I can't figure out how to do the same stuff as described above with this field. Or if it's possible at all?

By the way the Umbraco version is a 4.11.8.

I hope any of you have some pointers to what might solve the issue or can give me some heads up.

Thanks in advance :)

/Kim A
Copy Link
Rasmus Fjord 675 posts 1566 karma points c-trib

Jul 10, 2014 @ 13:20
100
How about something like this :
```
tinyMCE.get('tinymce_id').getContent();
```
http://www.tinymce.com/wiki.php/API3:method.tinymce.dom.Selection.getContent
Copy Link
Kim Andersen 1447 posts 2196 karma points MVP

Jul 10, 2014 @ 14:26

0

Hmm... looks like I might be able to grab the content with that function. I'll test a bit more.

But I still have an issue triggering the function everytime an editor presses a key in the richtext editor. So I need this content everytime an editor changes something in the texteditor. So maybe that's actually. Don't know if it's possible to detect when something changes in the editor or something like that. Or just fire the ".on('keyup' etc." on that specific editor.

/Kim A

Copy Link
Kim Andersen 1447 posts 2196 karma points MVP

Jul 10, 2014 @ 14:36

0

Okay, I found out that you idea Worked Rasmus.

I inserted a button that fired your code, and then I get the content from the richtext editor. And when I changed something in the editor, and clicked the button, I got the new content as well.

So now I "just" need to fire this function everytime something changes in the editor... :-/

You got a clue on how to do that as well? :)

/Kim

Copy Link
Rasmus Fjord 675 posts 1566 karma points c-trib

Jul 10, 2014 @ 14:39

0

Hmm thats a good one give me a sec will think of something :)

Copy Link
Rasmus Fjord 675 posts 1566 karma points c-trib

Jul 10, 2014 @ 14:48
1
How about doing something like this, happy hunting :
```
var my_handler =function(event){ alert('my handler fired!');};var ed = tinyMCE.get('my_editor_id'); $(ed.getDoc()).bind('keyup', my_handler);
```
Copy Link
Kim Andersen 1447 posts 2196 karma points MVP

Jul 10, 2014 @ 15:02
1
Hi Rasmus

I think I found the solution to that problem myself. I found this: http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp

So I'm doing something like this:
```
var tinyMceOnChange = tinyMCE.get('body_prop_content').onKeyUp.add(function (ed, l) {
    //Fires everytime someone is typing inside the editor
});
```
Great, think I got my problem solved for now. Thank you so much for your help :)

/Kim A
Copy Link
Rasmus Fjord 675 posts 1566 karma points c-trib

Jul 10, 2014 @ 15:06

0

Awesome champ ! :)

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?