4

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.

Community
  • 1
  • 1
Wottensprels
  • 3,307
  • 2
  • 29
  • 38
  • To answer your first set of questions, it's done natively in WebKit. There are some exposed APIs (selection and range) that will allow you to emulate what contentEditable does in client-side JS but I don't think it matches what you could do in native code. We use WebKit as a rendering engine in a project and we've had to make dozens of native changes to contentEditable especially for selection in tables. – skyline3000 Apr 25 '13 at 17:34

1 Answers1

1

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.

Powerslave
  • 1,408
  • 15
  • 16