I am in the process of building a custom WYSIWYG text editor but am struggling to get started because I need it to be cross browser. I will be using a div for the text and images with event handlers for the controls (bold, italic etc). My problem is creating a function / functions which return the cursor position or the start and end positions (if text is highlighted).
Code:
<script type="text/javascript">
function bold(){
var e = document.getElementById('wysiwyg');
! What can I use here to get the selected index / cursor position !
}
</script>
<div id="wysiwyg" contenteditable>
TEXT GOES HERE
</div>
<input type="button" value="B" onClick="bold();">
Thank you for the prompt response... on reading the link you sent me I have the following code which returns the start and end index for a selection in Firefox. However, I need it to work in Internet Explorer also.
Code:
var userSelection;
if (window.getSelection) {
userSelection = window.getSelection();
}
var start = userSelection.anchorOffset;
var end = userSelection.focusOffset;
...another consideration is that the values given for start and end are relative to the window / document. how can I get values relative to the div (wysiwyg)?
The start and end positions of the current highlighted selection in a div. These values need to be relative to the start of the div.innerHTML
remembering that contentEditables can have more than one selection, what format would the data you you want to see take?
just two values for the start and end indexed to be stored in local variables to be passed to a function.
in a textarea, simple [start,end] coords work great, but an element is FAR more complicated.
as i see it, you would need to know [[startElm,startOffset,endElm,elmOffset]] at least.
That would probably be okay dependant on the size of the page.
is that what you are looking for?
In short, all I need is a way to extract the start index of a highlighted selection from a contenteditable div along with the end index of the highlighted selection. In the event of text not being highlighted / selected I would want the cursor position (i.e. the start and end indexes would be the same value). These would be requested by a javascript function from an onClick event button thrown by an element outside of the div. If the bold function was called I would use the start index to split the div.innerHTML and insert <b>. I would use the end index to add </b>. Does this make sense?
In short, all I need is a way to extract the start index of a highlighted selection from a contenteditable div along with the end index of the highlighted selection. In the event of text not being highlighted / selected I would want the cursor position (i.e. the start and end indexes would be the same value). These would be requested by a javascript function from an onClick event button thrown by an element outside of the div. If the bold function was called I would use the start index to split the div.innerHTML and insert <b>. I would use the end index to add </b>. Does this make sense?
i feel your pain, as ironically, i am working on this exact problem right now.
i am creating a pseudo textarea from a <pre> tag with the DOM api of a real textarea, independent of markup.
but, it's not easy; i'm about 40 hours in, and still haven't gotten .selectionStart to be set correctly, though it can be get'd just fine...
in short, i think you'll find it much easier to use the native WYSIWYG edit features to add your markup. you can use ranges or document.execCommand.
i have a huge existing set of editing functionality tied up in my existing textarea-based editor, so i am locked into a text based approach.
if you don't have that encumbrance, it's a lot easier to edit html via dom instead of text.
if you have to do it stringy:
i can't post any code from my project.
But, i will tell you that if you have less than a few dozen KB, inserting a special char via DOM-based selection methods, and splitting the .innerHTML or .textContent on that char is the simplest and often the fastest way to get TO the cursor's pos in a string. that's a big hint.
you can also iterate childNodes and count .data.length, but perhaps i've already said to much..
good luck man, it's a challenge.
perhaps a library might provide some heavy lifting, I didn't look but if anyone reading this knows of one, I'd love to check it out.
Reply With Quote
Originally Posted by vouzamo
Bookmarks