Jump to content

get selected text from editable div with html?


Nati323
 Share

Recommended Posts

hey, i have editable div , and i want to get the selected text from.

the problem was is that i want that when i press some button in the page it will wrap the selected text with something, but it dosent work because when you press on the button the selection is gone so i did onmouseup event in the div that call the function getsel(below) that save the current selection:

function getsel (s)  { text = s.toString(); start = s.anchorOffset; end = s.focusOffset;}

and then when i press a my button i did this function:

function show () {div = document.getElementById('bla');div.innerHTML = div.innerHTML.slice(0, start - 1) + "<b>" + text + "</b>" + div.innerHTML.slice(end);}

its work great, but only with something like BBcode,because the getselection object refers to the selected text only without the html inside him, for example if i have in my div the next text: "Hello World";

and now i will select the word "Hello" and bold it with my function it work great, but now if i want to bold: "World", there is a problem, because the location of the start and the end that i get from the getselection object match to the string without the html, and the innerHTML including the html tag and then when i use the location in slice method its not match to the innerHTML text.

what can i do?

Edited by Nati323
Link to comment
Share on other sites

i passing to getSel the object getSelection().

so if toString remove the html code how can i get the selected text with the html ?

EDIT:

i dont think you right, because the the start and the end positions suitable to a string without html tags, so its have nothing with the toString method.

Edited by Nati323
Link to comment
Share on other sites

The Selection and Range objects look like they contain some properties or methods that you might be able to use to extract the entire selected markup rather than only the text.https://developer.mozilla.org/en-US/docs/Web/API/Selectionhttps://developer.mozilla.org/en-US/docs/Web/API/Range

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...