content-editable | An HTML element that makes its content editable | Editor library

Is it possible to append html tags from a content-editable div to another div? I wanted to make an html editor, and I wanted to make automatic preview.

Here is the jsfiddle code: https://jsfiddle.net/eqw8L4to/12/

And here is the js code where I tried getting html tags from .html, and tried appending it to .result:

My goal is to create an input div that checks whether numeric values are provided a currency tag or not. The content-editable div should locate numeric values and preferably convert them to individual components which each can show an option tooltip for the user to assign a currency value to each value.

Here is what I am currently working on: https://codesandbox.io/s/keen-silence-4uizr

• Using the current react-contenteditable component, prevents me from rendering anything but pure HTML, but if I use a normal div with attribute contenteditable, the caret f***s around, and overall the callbacks and UX is better using the react-contenteditable component.
• Due to state changes when displaying the options section, all custom JS added to target the current selected element is gone, and can't seem to persist this in any way.

If you go to Facebook and start writing a new status update, and you start writing out the name of a friend, it will display a list of options and assign these to the element you are currently writing. Knowing how to do that, should make it easy to do the same for numeric values and currency values I believe.

Basically I am just afraid (well also hoping for...) that I am overcomplicating things here, and someone out there can tell me:

Dude! this is like the easiest thing ever! Just do like this!

In a content-editable div, I want to surround selected text with a , or modify an existing when I select all the text within it. I can do the first, but not the second.

In the second case, if I have ABC and I select B, the selection shows the anchorNode as A, the focusNode as C, and toString() returns B. The parent node is the enclosing paragraph, not the . I cannot find any way to distinguish between selecting B in ABC and in ABC, since I can't find any way to discover the existence of the element that surrounds B in the first case. There must be a way to do this, surely? Can someone tell me how to do this?

Here is the code:

I want to add a div inside a content-editable div on a click of a button in vue js. So, I'm looking for the correct way to do it.

I'm brand new to Svelte (3.0+)...and for my latest project, I'd like to emulate the functionality of many "todo" lists that allow you to edit todo items previously submitted by double-clicking on them (Here's an example of the functionality I'm looking for).

I imagine, the first step is figuring out how to make a div contentEditable with Svelte with the on:dblclick event handler. I'm having trouble figuring out the syntax for this task (though I can do it with vanilla javascript).

Here's the Svelte code I have so far: ( Here it is on CodeSandBox.io - see page: CEDiv.svelte)