Develop Reference

contenteditable div is showing raw html instead of rendered html

When I replace the user selection in a contenteditable div using this function below, then the "new" HTML appears as text (raw HTML) instead of rendered HTML in the div.
In other words, the <h2> tag is being inserted as <h2>, so the display is <h2> instead of a "html heading line".
What am I doing wrong?
function replaceWYS() {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
selT = window.getSelection().getRangeAt(0);
replacementText = "<h2>" + selT + "</h2>";
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(replacementText));
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.text = replacementText;
}
}
<div id="wys" contenteditable>
This is line<br><br> This line should be heading after replacement
<br><br> Select it and click the replace button
</div>
<p><button onclick="replaceWYS(); return false;"> Replace now </button></p>

document.createTextNode renders your HTML as text (if you log it you get "<h2>...</h2>" instead of <h2>...</h2>). You can create an HTML element manually.
function replaceWYS() {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
selT = window.getSelection().getRangeAt(0);
const h = document.createElement("h2");
h.innerText = selT;
if (sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode(h);
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.text = replacementText;
}
}
<div id="wys" contenteditable>
This is line<br><br> This line should be heading after replacement
<br><br> Select it and click the replace button
</div>
<p><button onclick="replaceWYS(); return false;"> Replace now </button></p>

Get and set cursor position with contenteditable div

I have a contenteditable div which I would like to be able to have users insert things such as links, images or YouTube videos. At the moment this is what I have:
function addLink() {
var link = $('#url').val();
$('#editor').focus();
document.execCommand('createLink', false, link);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Text Editor -->
<div id="editor" contenteditable="true"></div>
<!-- Add Link -->
<input type="text" id="url">
<button onclick="addLink()">Submit</button>
As you can see, the user has to type into a separate text box to enter the link address. As a result, when the link is added to the editor, it is not added to the position that the pointer/caret was on.
My question is how I can get and set the location of the pointer/caret. I have seen other questions such as this for setting the pointer however I would prefer to have a solution which is supported in all modern browsers, including Chrome, Safari, Firefox and IE9+.
Any ideas? Thanks.
Edit:
I found the code below which gets the position however, it only gets the position according to the line it is on. For example if I had this (where | is the cursor):
This is some text
And som|e more text
Then I would be returned the value 7, not 24.
function getPosition() {
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt) {
return sel.getRangeAt(0).startOffset;
}
}
return null;
}

There's a ton of related info onsite. This one works for me and my clients.
DEMO
https://stackoverflow.com/a/6249440/2813224
function setCaret(line, col) {
var ele = document.getElementById("editable");
var rng = document.createRange();
var sel = window.getSelection();
rng.setStart(ele.childNodes[line], col);
rng.collapse(true);
sel.removeAllRanges();
sel.addRange(rng);
ele.focus();
}
//https://stackoverflow.com/a/6249440/2813224
var line = document.getElementById('ln').value;
var col = document.getElementById('cl').value;
var btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
var lineSet = parseInt(line, 10);
var colSet = parseInt(col, 10);
setCaret(lineSet, colSet);
}, true);
<div id="editable" contenteditable="true">
<br/>text text text text text text
<br/>text text text text text text
<br/>text text text text text text
<br/>
<br/>
</div>
<fieldset>
<button id="btn">focus</button>
<input type="button" class="fontStyle" onclick="document.execCommand('italic',false,null);" value="I" title="Italicize Highlighted Text">
<input type="button" class="fontStyle" onclick="document.execCommand('bold',false,null);" value="B" title="Bold Highlighted Text">
<input id="ln" placeholder="Line#" />
<input id="cl" placeholder="Column#" />
</fieldset>

A good rich-text editor is one of the harder things to do currently, and is pretty much a project by itself (unfriendly API, huge number of corner cases, cross-browser differences, the list goes on). I would strongly advise you to try and find an existing solution.
Some libraries that can be used include:
Quill (http://quilljs.com)
WYSGIHTML (http://wysihtml.com)
CodeMirror library (http://codemirror.net)

I have tried to find a solution,
With a little help it can be perfected.
It is a combination of answers I've found on SO, and my exp.
Its tricky, its messy... but if you must, you can use it but it requires a bit of work to support inner links (if you cursor is on an anchor it will create anchor inside anchor)
Here's the JS:
var lastPos;
var curNode = 0;
function setCaret() {
curNode=0;
var el = document.getElementById("editor");
var range = document.createRange();
var sel = window.getSelection();
console.log(el.childNodes);
if (el.childNodes.length > 0) {
while (lastPos > el.childNodes[curNode].childNodes[0].textContent.length) {
lastPos = lastPos - el.childNodes[curNode].childNodes[0].textContent.length;
curNode++;
}
range.setStart(el.childNodes[curNode].childNodes[0], lastPos);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
el.focus();
};
function savePos() {
lastPos = getCaretCharacterOffsetWithin(document.getElementById('editor'));
}
function addLink() {
console.log(lastPos);
setCaret();
console.log(getCaretCharacterOffsetWithin(document.getElementById('editor')));
console.log('focus');
// $("#editor").focus();
var link = $('#url').val();
document.execCommand('createLink', false, link);
}
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
}
} else if ((sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
fiddle

This is what you asked for, in your bounty: on the following example you can see how to detect the exact number of characters of the actual point where you clicked the mouse on:
<!-- Text Editor -->
<div id="editor" class="divClass" contenteditable="true">type here some text</div>
<script>
document.getElementById("editor").addEventListener("mouseup", function(key) {
alert(getCaretCharacterOffsetWithin(document.getElementById("editor")));
}, false);
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
}
} else if ( (sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
</script>

I found a problem with emojis. Emojis have a length which is more than 1.
I solved it.
<script>
function getCursorPosition() {
if(window.getSelection()){
var sel = window.getSelection();
if(sel.getRangeAt){
var pos = sel.getRangeAt(0).startOffset;
var endPos = pos + Array.from(editor.innerHTML.slice(0,pos)).length - editor.innerHTML.slice(0,pos).split("").length;
return endPos;
}
}
return null;
}
var editor = document.querySelector("#editor");
var output = document.querySelector("#output");
editor.addEventListener("input",function(){
output.innerHTML = "Selection: " + getCursorPosition();
});
</script>
<div contenteditable id="editor">text</div>
<div id="output">Selection:</div>

javasscript allow writing rtl and ltr in sentence

i am trying to write rtl and ltr in one sentence in contenteditable div,but the whole sentence screwup..
i have tried to stick the cursor to end while writing but the words mirrored
like ybab instead of baby and i cant seprate the words with space
var div = document.getElementById("editor_content");
div.onkeydown = function() {
var sel, range;
if (window.getSelection && document.createRange) {
range = document.createRange();
range.selectNodeContents(div);
range.collapse(true);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(div);
range.collapse(true);
range.select();
}
};
please help me

I dont know exactly what you want to do, but i guess you want to type text from left to right and then have it mirrored from right to left....by words...not by letters.
<div id="content-left" style="min-height: 10em;" contenteditable="true">L </div>
<div id="content-right" style="min-height: 10em;" contenteditable="true">R </div>
var content = document.getElementById("content-left");
var mirror = document.getElementById("content-right");
var update = function() {
}
window.onkeyup = function(evt) {
var text = content.innerText;
var words;
if (!text) {return ;}
words = text.split(" ");
words = words.reverse();
mirror.innerText = words.join( " " );
}
#content-left, #content-right {background: #FAFAFA;padding: 0;margin: 0;width: 49.5%;float: left;}
#content-right {float: right;}
http://jsfiddle.net/rainerpl/asrny8zd/1/

Behaviour Of Enter Key In Contenteditable Div

I'm trying to make a rich text editor and i have near to my success. I'm trying to change the behaviour of enter key in contenteditable div because when pressing enter firefox produced <br> thats ok but Chrome and IE produced a <p> and <div> here i'm trying to force all browser to produce <br> when press enter under <div contenteditable="true"></div>. Everything working fine in internet explorer but in all browsers would have to press enter two times for new line or <br>.
Here is my code.
<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
<script type="text/javascript">
function preview() {
var textbox = document.getElementById('textBox');
document.getElementById("view").innerHTML=textbox.innerHTML;
}
function enterKeyPressHandler(evt) {
var sel, range, br, addedBr = false;
evt = evt || window.event;
var charCode = evt.which || evt.keyCode;
if (charCode == 13) {
if (typeof window.getSelection != "undefined") {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
br = document.createElement("br");
range.insertNode(br);
range.setEndAfter(br);
range.setStartAfter(br);
sel.removeAllRanges();
sel.addRange(range);
addedBr = true;
}
} else if (typeof document.selection != "undefined") {
sel = document.selection;
if (sel.createRange) {
range = sel.createRange();
range.pasteHTML("<br>");
range.select();
addedBr = true;
}
}
// If successful, prevent the browser's default handling of the keypress
if (addedBr) {
if (typeof evt.preventDefault != "undefined") {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
}
}
function onload(){
var el = document.getElementById("textBox");
if (typeof el.addEventListener != "undefined")
{
el.addEventListener("keypress", enterKeyPressHandler , false);
}
else if (typeof el.attachEvent != "undefined")
{
el.attachEvent("onkeypress", enterKeyPressHandler);
}
}
</script>
</head>
<body onload="javascript:onload();">
<form name="myform" method="POST">
<div id="textBox" contenteditable="true" style="width:500px; height:150px; padding:20px; border:solid thin #000"></div>
</form>
<br>
<div id="view" style="width:500px; height:150px; padding:20px; border:solid thin #000"></div>
<br>
<button onClick="javascript:preview();">Preview</button>
</body>
</html
Demo JSFiddle

My solution is to handle an enter button. Different options for different tags. Look at https://codepen.io/MaratKh/pen/oKXxvV
const ed = document.getElementById('editable'),
ta = document.getElementById('txt');
const key13 = function(ev){
if(ev.keyCode==13) {
ev.preventDefault();
const selection = window.getSelection(),
range = selection.getRangeAt(0),
node = document.getSelection().anchorNode,
pNode = node.parentNode;
var tag = pNode.nodeName.toUpperCase();
switch(tag) {
case 'P':
tag = 'BR';
break;
case 'DIV':
tag = 'p';
break;
case 'SPAN':
tag = 'span';
break;
case 'BR':
tag = NULL;
break;
default:
tag = 'BR';
}
const el = document.createElement( tag );
range.deleteContents();
range.insertNode(el);
if ('BR'===tag) {
range.setStartAfter(el);
range.setEndAfter(el);
} else {
range.setStart(el, 0);
range.setEnd(el, 0);
}
const ze = document.createTextNode("\u200B");
range.insertNode(ze);
range.setStartBefore(ze);
range.setEndBefore(ze);
selection.removeAllRanges();
selection.addRange(range);
ev.stopPropagation();
}
ta.value = ed.innerHTML;
}
ed.addEventListener( 'keydown', key13, false);
.xrow {
display: block;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
}
.xrow .col {
display: block;
flex: 1;
}
.xrow .col:first-child{
border-right:#669 1px dashed;
margin-right:20px;
}
textarea {
width:100%;
height:300px;
}
#editable{
padding:16px 9px;
border: 2px dashed #ddc;
}
<div class="xrow">
<div class="col">
<h3>Editable</h3>
<div id="editable" contenteditable="true">
<h1>Hi</h1>
<div>div</div>
<p>p</p>
text
</div>
</div>
<div class="col">
<h3>Result</h3>
<textarea id="txt"></textarea>
</div>
</div>

IT WORKS!!!
if (window.getSelection) {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement("br");
range.deleteContents();
range.insertNode(br);
var newLine=document.createTextNode('\n');
range.setStartAfter(br);
range.setEndAfter(br);
range.insertNode(newLine);
selection.removeAllRanges();
selection.addRange(range);
}

How to show markup color code in my phpbb BBCode

I have default [code] [/code] BBCode on my phpbb forum. But it does not show the color for code's markup. I want to see the exact color for every php, html, css color etc color.
I used bellows code there to create BBCode.
HTML Replacement :
<script type="text/javascript">
// select all function
function selectCode(a)
{
// Get ID of code block
var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
// Not IE and IE9+
if (window.getSelection)
{
var s = window.getSelection();
// Safari
if (s.setBaseAndExtent)
{
s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
}
// Firefox and Opera
else
{
// workaround for bug # 42885
if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
{
e.innerHTML = e.innerHTML + ' ';
}
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
}
// Some older browsers
else if (document.getSelection)
{
var s = document.getSelection();
var r = document.createRange();
r.selectNodeContents(e);
s.removeAllRanges();
s.addRange(r);
}
// IE
else if (document.selection)
{
var r = document.body.createTextRange();
r.moveToElementText(e);
r.select();
}
}
//expand - collapse settings
function expandcollapse(a) {
var ee = a.parentNode.parentNode.getElementsByTagName('dd')[0];
if (ee.style.maxHeight == '200px')
{
ee.style.maxHeight = '2000px';
a.innerHTML = 'collapse';
}
else {
ee.style.maxHeight = '200px';
a.innerHTML = 'expand';
};
}
</script>
<![if !IE]>
<script type="text/javascript">
function scrolltest(k) {
var eee = k.getElementsByTagName('dd')[0];
var old = eee.scrollTop;
eee.scrollTop += 1;
if (eee.scrollTop > old) {
eee.scrollTop -= 1;
k.getElementsByTagName('a')[1].style.visibility = "visible";
}
}
</script>
<![endif]>
<div class="pre" onmouseover="scrolltest(this); return false;">
<dt class="pre_header">
<b>Code: </b>
Select all
<a style="float:right; visibility:hidden;" href="#" onclick="expandcollapse(this); return false;">expand</a>
</dt>
<dd style="max-height:200px; overflow:auto;">
<code>
{TEXT}
</code>
</dd>
</div>

If you're looking for a syntax highlighter, check out this phpbb plugin/mod:
http://sourceforge.net/projects/geshi-phpbb/
Read GeSHi for more.