CODEWITHSUNDEEP
javascripthtmlcontenteditable
Matthieu Napoli
Matthieu Napoli

Reputation: 49533

Listen to specific changes on contenteditable?

Warning: not duplicate with existing questions, read through

I know I can have an event listen on changes on an contenteditable element.

What I would like is to be able to know what the changes are.

For example:

Is that possible? (other than by doing a diff I mean)

The reason for this is to make a WYSIWYG editor of other languages than HTML, for example Markdown.

So I'd like to apply the changes to the Markdown source (instead of having to go from HTML to Markdown).

Upvotes: 6

Views: 2280

Answers (4)

Tim Down
Tim Down

Reputation: 324507

You may be able to do something with MutationObservers (falling back to DOM Mutation events in older browsers, although IE <= 8 supports neither) but I suspect it will still be hard work to achieve what you want.

Here's a simple example using MutationObservers:

http://jsfiddle.net/timdown/4n2Gz/

Upvotes: 4

Bryce
Bryce

Reputation: 6610

The API you're looking for does not exist, as DOM nodes do not store their previous states.

The data / events you're wishing to get back are not native implementations in any browser Ive come across, and I struggle to think of a datatype that would be able to generically handle all those cases. perhaps something like this:

function getChanges() {

    /* do stuff here to analyse changes */

    var change = {
        changeType : 'contentAdded',
        changeStart : 50, /* beginning character */
        changeContent : 'This is a sentence'
    }

    return change;
}

Since you're trying to get custom events / data, you're probably going to need a custom module or micro-library. Either way, to look at the changes of something, you need somehow be aware of what has changed, which can only be done by comparing what it was to what it is now.

Upvotes: -2

dcro
dcro

Reputation: 13649

Sorry, but there is no way to find out what the changes are without doing a diff between the original content and the modified one when changes occur.

Upvotes: 2

chetan mehta
chetan mehta

Reputation: 369

Are you looking for this

var strong=document.createElement("strong");
var range=window.getSelection().toString().getRangeAt(0);
range.surroundContents(strong);

this was for third part

You just need to select what you want to surround using real User interaction.

If you wanna do it dynamically 

var range=document.createRange();
range.setStart(parentNode[textNode],index to start[X])
range.setEnd(parentNode[textNode],index to end[Y])
range.surroundContents(strong);

For 2nd Part 

range.deleteContents()

1st part can be done by using simple iteration

var textnode=// node of the Element you are working with

textnode.splitText(offset)

offset- position about which text node splitting takes place[here==X] Two child Nodes have been created of the parent editable Element

Now use simple insertBefore() on parent editable Element Node.

hope you will find it useful

Upvotes: 1

Related Questions