The problem is that when I click on the HTML code editor option / button -> < > and paste some code, content, text or whatever, the code HTML shown in it <textarea> is encoding to HTML entities.
$(function() {
function formatHtmlCode(str) {
var p = document.createElement('p');
p.innerHTML = str.trim();
return format(p, 0).innerHTML;
}
function format(node, level) {
var indentBefore = new Array(level++ + 1).join(' '),
indentAfter = new Array(level - 1).join(' '),
textNode;
for (var i = 0; i < node.children.length; i++) {
textNode = document.createTextNode('\n' + indentBefore);
node.insertBefore(textNode, node.children[i]);
format(node.children[i], level);
if (node.lastElementChild == node.children[i]) {
textNode = document.createTextNode('\n' + indentAfter);
node.appendChild(textNode);
}
}
return node;
}
$('#editControls a').click(function(e) {
switch ($(this).data('role')) {
case 'h2':
case 'h3':
case 'p':
document.execCommand('formatBlock', false, $(this).data('role'));
break;
case 'code':
codeMode = !codeMode;
if (codeMode) {
var formattedHtml = formatHtmlCode(htmlDiv.html());
htmlDiv.css("white-space", "pre");
htmlDiv.text(formattedHtml);
var editor = $("#editor");
editor.addClass("black-bg-colr codeMode");
//editor.attr('id', 'editor newID');
} else {
htmlDiv.css("white-space", "normal");
htmlDiv.html(htmlDiv.text().replace(/\r?\n|\r/g, ""));
var editor = $("#editor");
editor.removeClass("black-bg-colr codeMode");
//editor.attr('id', 'editor');
}
break;
default:
document.execCommand($(this).data('role'), false, null);
break;
}
});
let codeMode = false;
let htmlDiv = $("#editor");
htmlDiv.on('keyup', function(e) {
if (!e.shiftKey && e.keyCode === 13) {
document.execCommand('formatBlock', false, 'p');
} else if (e.shiftKey) {
document.execCommand('formatBlock', false, 'p');
}
});
htmlDiv.on("paste", function(e) {
e.preventDefault();
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('formatBlock', false, 'p');
document.execCommand('insertText', false, text);
});
htmlDiv.on("input", function(e) {
$(".editor-preview").val(htmlDiv.html());
$(".editor-preview").keyup();
});
$('.editor-preview').keyup(function() {
var contentAttr = $(this).attr('class');
if (!codeMode) {
var value = $(this).val();
$('.' + contentAttr).html(value);
} else {
$('.' + contentAttr).html(htmlDiv.text());
}
});
});.fieldsets {
border: 1px solid #ccc;
padding: 1em;
}
#editControls {
overflow: auto;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-color: silver;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: .5em 1em .5em 1em;
background-color: #fbfbfb;
width: 100%;
/* max-width: 950px; */
}
#editor {
resize: vertical;
overflow: auto;
border: 1px solid silver;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
min-height: 100px;
padding: 1em;
background-color: white;
width: 100%;
color: #333;
/* max-width: 950px; */
}
#preview {
padding: 1em;
margin: 0 auto;
width: 97%;
border-top: 1px dotted #c8ccd0;
border-bottom: 1px dotted #c8ccd0;
clear: both;
}
.btn-group>.btn-editor:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group a {
text-decoration: none;
}
.btn-not-space {
position: relative;
float: left;
margin-left: 0 !important;
border-radius: inherit;
border: 1px solid transparent;
border-color: #ccc;
}
.btn-editor {
height: 30px;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 11px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border-radius: 4px;
border: 1px solid transparent;
color: #333;
background-color: #fff;
border-color: #ccc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="fieldsets">
<div class="form-group">
<div class="editor-wrapper">
<div id="editControls">
<div class="btn-group">
<a class="btn-editor btn-not-space" data-role="bold" data-ref="#">
<i class="icon-bold">B</i>
</a>
<a class="btn-editor btn-not-space" data-role="italic" data-ref="#">
<i class="icon-italic">I</i>
</a>
<a class="btn-editor btn-not-space" data-role="underline" data-ref="#">
<i class="icon-underline">U</i>
</a>
</div>
<div class="btn-group">
<a class="btn-editor btn-not-space" data-role="code" data-ref="#">
<i class="icon-code-view"><></i>
</a>
</div>
</div>
<div id="editor" contenteditable=""></div>
<br><br><br>
<textarea id="textarea" class="editor-preview" name="detail"></textarea>
<br><br><br>
<div id="preview" class="editor-preview"></div>
</div>
</div> </fieldset>To be clearer I attach an image of the problem, in number 1, I write some text, you can see that in the <textarea> said text it is attached with a code HTML that text is written from the div editable, now in image 2, I click on the code editor function < > is the problem there, because when I paste some code or text the HTML code becomes HTML entities as can be seen in the <textarea> of image 3.
In conclusion, what I want to achieve is that the textarea only keeps the HTML code without it being encoded in HTML entities, everything that was written in the editable div, that HTML code that is generated from there is kept in the textarea
