How to record and play editing events in a content div?

I am trying to find a way to write some unit tests that can be used to write / test new wysiwyg html editors or just the default browser behavior for content ads.

I want to record keystrokes (maybe other events too, but the most important keystrokes) or just record the events manually and then play them back later in the div. In the end, I would use it to simulate small html editing sessions and see if we get the expected serialized html in the end.

BUT, I can't get the following to trigger the default browser behavior:

$(mydiv).trigger('keydown', {type: "keydown", keyCode: 13, which: 13}); 

(It does not insert a line break or break a paragraph or do nothing.)

I also tried things like:

$(mydiv).trigger('textInput', {type: "textInput", data: 'H', target: mydiv});

(Which was to insert the letter H)

and I even tried to save the original event objects and then fire them like this:

$(mydiv).trigger(eventObject);

(where eventObject is the actual key event that I received earlier and then supported)

Part of the problem is that I don’t know which attributes of the minimal event object I must observe, and then send later. (All of this is not an option, because you cannot simply discard the entire event as JSON due to all circular references.)

Another part of the problem - I'm not even sure how to focus the editable

At a minimum, I need to create a new empty div, set contenteditable = "true", and then "insert some text", place the cursor in the middle and "press enter" by executing commands to read and play from the event log.


This is why I need it:

, , ( Chrome, Firefox, Opera , , IE9), , , . , , , 10- .

- , . , wysiwyg, "" - , - /, - .

, / , , / , , p h1 .. .

, javascript " ", , /, , ab ..

+3
1

, , . script : , ( , , ..) .

, , WHATWG API- -. execCommand() ( WHATWG , ). , , . DOM Range Selection. Enter . .

+3

All Articles