Menu
I am trying to achieve project and I must do a WYSIWYG editor in JavaScript. I can't use an existing editor because I need use my plugins (for example a colorPicker or imagePicker).
For now I have this HTML:
<div class="K_editor" id="idExample">
<div class="K_links">
<div class="K_editor_link K_editor_linkBold">B</div>
<div class="K_editor_link K_editor_linkItalic">I</div>
<div class="K_editor_link K_editor_linkUnderline">U</div>
</div>
<iframe width="696" height="212" frameborder="0" src="js/myEditor_iFrame.php">
<html>
<head/>
<body>
<div id="contentIframe" contenteditable="true">
This is a test code, with <strong>bold</strong> text and <em>italic</em> text.
</div>
</body>
</html>
</iframe>
<input type="submit"/>
</div>
On event click on .K_editor_link, a function is open with arguments:
tagStart (example <u>, or <span style="color:#AB1;">)tagEnd (example </u>, or </span>)id (here idExample)I know get a Selection on Textarea but setSelectionRange(), .selectionStart and .selectionEnd are only for textbox (XUL), input (XHTML) or textarea (XHTML).
What can I do for do that?
668
asked Feb 25 '26 08:02
This is the code I use. I can not take credit for it since I found it here on SO a couple of months ago. Don't remember where. Hope it works out for you.
function getSelectionHtml()
{
var html = "";
if (typeof window.getSelection != "undefined")
{
var sel = window.getSelection();
if (sel.rangeCount)
{
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
return html;
}
Code is from this question: window.getSelection return html
154
answered Feb 28 '26 03:02
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With