CODEWITHSUNDEEP
htmlgoogle-chromedom-manipulation
Wottensprels
Wottensprels

Reputation: 3327

How is this element manipulation implemented?

In Google Chrome, you can use shortcuts for elements with contenteditable='true':

CTRL + B : Set the highlighted text to bold, for example

What happens under the hood is, the <b> tag is attached or removed to the marked phrase, word whatever.

How is this done? Where do "they" know from, whether the element is already set to bold, and, primary question, where it is located?

I am asking this because i can't get rid of this problem, mentioned earlier today:

Get the highlighted text position in .html() and .text()

Edit:

I tried the following

Rich-Text-Editing

But first, it won't load correctly, but this should be caused by my own failure. Second, for learning purposes, i would like to implent my own minified version.

As i am really at JavaScript, i could not figure out how this is be done.

Upvotes: 4

Views: 105

Answers (1)

Powerslave
Powerslave

Reputation: 1428

document.getSelection() / window.getSelection() should work for whatever you'd like to do with the selected stuff. Element styles get inherited. How this is kept track of depends on the CSS implementation. Taking a look at the source code of Chrome might pretty much help.

Upvotes: 1

Related Questions