How to implement custom code editor with HTML/JavaScript?

How to implement custom code editor with HTML/JavaScript? - javascript

hello I'm trying to create syntax highlight in my web texteditor and my function is working and not at the same time I don't know why
when I type the word:
but in the editor:
this is the code:
const textarea = document.getElementById('editor');
updateText(textarea.value);
textarea.addEventListener("keydown", function(e) {
setTimeout(() =>{
updateText(textarea.value);
},0)
})
function updateText(text)
{
textarea.innerHTML = colorize(text.replace(/\n/g, "<br>").replace(/\t/g," "));
}
function colorize(text)
{
var words = ["int","class","#include","namespace"];
for(const keyword of words)
{
text = text.replaceAll(keyword,`<span style="color:#569cd6">${keyword}</span>`)
text = text.replaceAll(keyword.toLowerCase(),`<span style="color:#569cd6">${keyword.toLowerCase()}</span>`)
}
return text
}
I tried to make it change color

So here's what I have tried following your approach, it still needs improvement, thou:
const textarea = document.getElementById("editor");
function moveCursorAtTheEnd() {
var selection = document.getSelection();
var range = document.createRange();
var contenteditable = document.querySelector('div[contenteditable="true"]');
if (contenteditable.lastChild.nodeType == 3) {
range.setStart(contenteditable.lastChild, contenteditable.lastChild.length);
} else {
range.setStart(contenteditable, contenteditable.childNodes.length);
}
selection.removeAllRanges();
selection.addRange(range);
}
textarea.addEventListener("keydown", function (e) {
if (e.keyCode == 32 || e.keyCode == 13) updateText(textarea.textContent);
textarea.innerHTML = textarea.innerHTML + " ";
moveCursorAtTheEnd();
});
function updateText(text) {
textarea.innerHTML = colorize(
text.replace(/\n/g, "<br>").replace(/\t/g, " ")
);
}
function colorize(text) {
var words = ["int", "class", "#include", "namespace"];
for (const keyword of words) {
text = text.replaceAll(
keyword,
`<span style="color:#569cd6">${keyword}</span>`
);
text = text.replaceAll(
keyword.toLowerCase(),
`<span style="color:#569cd6">${keyword.toLowerCase()}</span>`
);
}
return text;
}
#editor {
background: lightgrey;
height: 100vh;
}
[contenteditable]:focus {
outline: 0px solid transparent;
}
<div contentEditable="true" id="editor" onfocus="this.value = this.value;"></div>
After all, for a robust editor, I'd recommend you to use ACE editor, you can have a look at the live demo here: https://ace.c9.io/build/kitchen-sink.html It's not that difficult to implement. Hope it helps!

You can't do this inside a , not one that's editable. It sounds like you're after a WYSIWYG editor, most of which use a to do this.
There are several JavaScript options for this, to name a few:
TinyMCE
CKEditor

Related

how to listen to the deletion of a specific character javascript

Im having trouble trying to find a solution to this..
How can I listen for the deletion/backspace of a certain character
So I know I can listen for a backspace event like so..
function() {
const textarea = document.querySelector('textarea');
const backspace = 8;
textarea.addEventListener('keydown', (event) => {
if(event.keyCode === backspace) {
// do something
}
});
}
but what I want to do is if I backspace and the character that was removed was an # - then do something
How could I do something like this??
Any help would be appreciated!
Thanks

You can get the selectionStart of the textarea to get the caret position, then access that index of the value (minus one) to get the character that's going to be deleted:
const textarea = document.querySelector('textarea');
const backspace = 8;
textarea.addEventListener('keydown', (event) => {
if (event.keyCode === backspace) {
console.log('backspace');
const { value } = textarea;
const charToBeDeleted = value[textarea.selectionStart - 1];
if (charToBeDeleted === '#') {
console.log('deleting #...');
}
}
});
textarea {
width: 100%;
height: 200px;
}
<textarea></textarea>
Also make sure you use === to check for equality - = is assignment.
If you want to check for the possibility of the user deleting more than just one character via selection, then you'll have to check selectionEnd as well, and slice the value appropriately:
const textarea = document.querySelector('textarea');
const backspace = 8;
textarea.addEventListener('keydown', (event) => {
if (event.keyCode === backspace) {
console.log('backspace');
const { value, selectionStart, selectionEnd } = textarea;
const stringToBeDeleted =
selectionStart === selectionEnd
? value[selectionStart - 1]
: value.slice(selectionStart, selectionEnd);
console.log(stringToBeDeleted);
if (stringToBeDeleted.includes('#')) {
console.log('deleting #...');
}
}
});
textarea {
width: 100%;
height: 200px;
}
<textarea></textarea>

Change text on button when clicked with JavaScript

I'm trying to change the text of a button when it's pressed with JavaScript. Should be very straightforward, however, it's not working. Can anyone explain? Here's my code:
function changeInnerHTML() {
var buttonValue = document.getElementById('elementTEST').innerHTML;
var buttonValueInnerHTMLBegin = '<p id="elementTEST">';
var buttonValueInnerHTMLEnd = '</p>';
alert("buttonValue = " + typeof(buttonValue)); // -> "string"
if (buttonValue == "Online") {
alert("turn off"); // -> "turn off"
buttonValue = buttonValueInnerHTMLBegin + "Offline" + buttonValueInnerHTMLEnd; // -> DOESN'T CHANGE ANYTHING
alert("turned off"); // -> "turned off"
} else if (buttonValue == "Offline") {
buttonValue = "Online";
} else {
alert("There's a problem");
}
}
<div class="containerTEST">
<div class="divTEST" onclick="changeInnerHTML()">
<p id="elementTEST">Online</p>
</div>
</div>
I have run this both with and without the "buttonValueInnerHTMLBegin/End" variables being included, and I get the same result.
I get the alerts (shown as comments in the code), but the text/innerHTML doesn't change.
Thanks for any help!

It's not a reference, you'll have to set it directly at the end:
document.getElementById('elementTEST').innerHTML = buttonValue

try this:
var buttonValue = document.getElementById('elementTEST');
function changeInnerHTML(){
if (buttonValue.innerHTML == "Online")
buttonValue.innerHTML= "Offline";
else if (buttonValue.innerHTML == "Offline")
buttonValue.innerHTML = "Online";
}
codepen: example

There's absolutely no reason to change the HTML. Change only the textContent
(Use Element.innerHTML = "bla" to set a new inner HTML)
Use Element.textContent = "bla" to set a new text content
Don't use inline JS onclick - it's discouraged for code maintainability reasons
Use a <button> for semantic reasons and accessibility
Here's a simpler version
[...document.querySelectorAll(".toggleOnline")].forEach( el =>
el.addEventListener("click", () => {
el.textContent = /online/i.test(el.textContent) ? "Offline" : "Online";
})
);
.toggleOnline {
border: none;
border-radius: 0;
background: #ddd;
padding: 8px 16px;
}
<button class="toggleOnline" type="button" aria-live="assertive" aria-atomic="true">
Online
</button>
Now you can also tab your element and use Spacebar or Enter to toggle your button.

Allow only text to be pasted in a content editable div [duplicate]

I have a basic editor based on execCommand following the sample introduced here. There are three ways to paste text within the execCommand area:
Ctrl+V
Right Click -> Paste
Right Click -> Paste As Plain Text
I want to allow pasting only plain text without any HTML markup. How can I force the first two actions to paste Plain Text?
Possible Solution: The way I can think of is to set listener for keyup events for (Ctrl+V) and strip HTML tags before paste.
Is it the best solution?
Is it bulletproof to avoid any HTML markup in paste?
How to add listener to Right Click -> Paste?

It will intercept the paste event, cancel the paste, and manually insert the text representation of the clipboard:
http://jsfiddle.net/HBEzc/.
This should be the most reliable:
It catches all kinds of pasting (Ctrl+V, context menu, etc.)
It allows you to get the clipboard data directly as text, so you don't have to do ugly hacks to replace HTML.
I'm not sure of cross-browser support, though.
editor.addEventListener("paste", function(e) {
// cancel paste
e.preventDefault();
// get text representation of clipboard
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
// insert text manually
document.execCommand("insertHTML", false, text);
});

I couldn't get the accepted answer here to work in IE so I did some scouting around and came to this answer which works in IE11 and the latest versions of Chrome and Firefox.
$('[contenteditable]').on('paste', function(e) {
e.preventDefault();
var text = '';
if (e.clipboardData || e.originalEvent.clipboardData) {
text = (e.originalEvent || e).clipboardData.getData('text/plain');
} else if (window.clipboardData) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
});

A close solution as pimvdb. But it's working of FF, Chrome and IE 9:
editor.addEventListener("paste", function(e) {
e.preventDefault();
if (e.clipboardData) {
content = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('insertText', false, content);
}
else if (window.clipboardData) {
content = window.clipboardData.getData('Text');
document.selection.createRange().pasteHTML(content);
}
});

Of course the question is already answered and the topic very old but I want to provide my solution as it is simple an clean:
This is inside my paste-event on my contenteditable-div.
var text = '';
var that = $(this);
if (e.clipboardData)
text = e.clipboardData.getData('text/plain');
else if (window.clipboardData)
text = window.clipboardData.getData('Text');
else if (e.originalEvent.clipboardData)
text = $('<div></div>').text(e.originalEvent.clipboardData.getData('text'));
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertHTML', false, $(text).html());
return false;
}
else { // IE > 7
that.find('*').each(function () {
$(this).addClass('within');
});
setTimeout(function () {
// nochmal alle durchlaufen
that.find('*').each(function () {
// wenn das element keine klasse 'within' hat, dann unwrap
// http://api.jquery.com/unwrap/
$(this).not('.within').contents().unwrap();
});
}, 1);
}
The else-part is from another SO-post I couldn't find anymore...
UPDATE 19.11.2014:
The other SO-post

None of the posted answers really seems to work cross browser or the solution is over complicated:
The command insertText is not supported by IE
Using the paste command results in stack overflow error in IE11
What worked for me (IE11, Edge, Chrome and FF) is the following:
$("div[contenteditable=true]").off('paste').on('paste', function(e) {
e.preventDefault();
var text = e.originalEvent.clipboardData ? e.originalEvent.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');
_insertText(text);
});
function _insertText(text) {
// use insertText command if supported
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
}
// or insert the text content at the caret's current position
// replacing eventually selected content
else {
var range = document.getSelection().getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<textarea name="t1"></textarea>
<div style="border: 1px solid;" contenteditable="true">Edit me!</div>
<input />
</body>
Note that the custom paste handler is only needed/working for contenteditable nodes. As both textarea and plain input fields don't support pasting HTML content at all, so nothing needs to be done here.

Note that execCommand() is deprecated, so avoid using it in your production environments. Do something like this instead:
const editor = document.querySelector('[contentEditable]')
editor.addEventListener('paste', handlePaste)
function handlePaste(e) {
e.preventDefault()
const text = (e.clipboardData || window.clipboardData).getData('text')
const selection = window.getSelection()
if (selection.rangeCount) {
selection.deleteFromDocument()
selection.getRangeAt(0).insertNode(document.createTextNode(text))
}
}
[contentEditable] {
padding: 1em;
border: 1px solid black;
}
<div contentEditable>Paste HTML here</div>
References:
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

Firefox does not allow you to access the clipboard data so you'll need to make a 'hack' to get it to work. I've not been able to find a complete solution, however you can fix it for ctrl+v pastes by creating a textarea & pasting to that instead:
//Test if browser has the clipboard object
if (!window.Clipboard)
{
/*Create a text area element to hold your pasted text
Textarea is a good choice as it will make anything added to it in to plain text*/
var paster = document.createElement("textarea");
//Hide the textarea
paster.style.display = "none";
document.body.appendChild(paster);
//Add a new keydown event tou your editor
editor.addEventListener("keydown", function(e){
function handlePaste()
{
//Get the text from the textarea
var pastedText = paster.value;
//Move the cursor back to the editor
editor.focus();
//Check that there is a value. FF throws an error for insertHTML with an empty string
if (pastedText !== "") document.execCommand("insertHTML", false, pastedText);
//Reset the textarea
paster.value = "";
}
if (e.which === 86 && e.ctrlKey)
{
//ctrl+v => paste
//Set the focus on your textarea
paster.focus();
//We need to wait a bit, otherwise FF will still try to paste in the editor => settimeout
window.setTimeout(handlePaste, 1);
}
}, false);
}
else //Pretty much the answer given by pimvdb above
{
//Add listener for paster to force paste-as-plain-text
editor.addEventListener("paste", function(e){
//Get the plain text from the clipboard
var plain = (!!e.clipboardData)? e.clipboardData.getData("text/plain") : window.clipboardData.getData("Text");
//Stop default paste action
e.preventDefault();
//Paste plain text
document.execCommand("insertHTML", false, plain);
}, false);
}

I was also working on a plain text paste and I started to hate all the execCommand and getData errors, so I decided to do it the classic way and it works like a charm:
$('#editor').bind('paste', function(){
var before = document.getElementById('editor').innerHTML;
setTimeout(function(){
var after = document.getElementById('editor').innerHTML;
var pos1 = -1;
var pos2 = -1;
for (var i=0; i<after.length; i++) {
if (pos1 == -1 && before.substr(i, 1) != after.substr(i, 1)) pos1 = i;
if (pos2 == -1 && before.substr(before.length-i-1, 1) != after.substr(after.length-i-1, 1)) pos2 = i;
}
var pasted = after.substr(pos1, after.length-pos2-pos1);
var replace = pasted.replace(/<[^>]+>/g, '');
var replaced = after.substr(0, pos1)+replace+after.substr(pos1+pasted.length);
document.getElementById('editor').innerHTML = replaced;
}, 100);
});
The code with my notations can be found here:
http://www.albertmartin.de/blog/code.php/20/plain-text-paste-with-javascript

function PasteString() {
var editor = document.getElementById("TemplateSubPage");
editor.focus();
// editor.select();
document.execCommand('Paste');
}
function CopyString() {
var input = document.getElementById("TemplateSubPage");
input.focus();
// input.select();
document.execCommand('Copy');
if (document.selection || document.textSelection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
}
Above code works for me in IE10 and IE11 and now also works in Chrome and Safari. Not tested in Firefox.

In IE11, execCommand doesn't work well. I use below code for IE11
<div class="wmd-input" id="wmd-input-md" contenteditable=true>
is my div box.
I read clipboard data from window.clipboardData and modify div's textContent and give caret.
I give timeout for setting caret, because if I don't set timeout, a caret goes to end of div.
and you should read clipboardData in IE11 in below way. If you don't do it, newline caracter is not handled properly, so caret goes wrong.
var tempDiv = document.createElement("div");
tempDiv.textContent = window.clipboardData.getData("text");
var text = tempDiv.textContent;
Tested on IE11 and chrome. It may not work on IE9
document.getElementById("wmd-input-md").addEventListener("paste", function (e) {
if (!e.clipboardData) {
//For IE11
e.preventDefault();
e.stopPropagation();
var tempDiv = document.createElement("div");
tempDiv.textContent = window.clipboardData.getData("text");
var text = tempDiv.textContent;
var selection = document.getSelection();
var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;
selection.removeAllRanges();
setTimeout(function () {
$(".wmd-input").text($(".wmd-input").text().substring(0, start)
+ text
+ $(".wmd-input").text().substring(end));
var range = document.createRange();
range.setStart(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);
range.setEnd(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);
selection.addRange(range);
}, 1);
} else {
//For Chrome
e.preventDefault();
var text = e.clipboardData.getData("text");
var selection = document.getSelection();
var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;
$(this).text($(this).text().substring(0, start)
+ text
+ $(this).text().substring(end));
var range = document.createRange();
range.setStart($(this)[0].firstChild, start + text.length);
range.setEnd($(this)[0].firstChild, start + text.length);
selection.removeAllRanges();
selection.addRange(range);
}
}, false);

After along search and trying I have found somehow kind of optimal solution
what is important to keep in mind
// /\x0D/g return key ASCII
window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))
and give the css style white-space: pre-line //for displaying
var contenteditable = document.querySelector('[contenteditable]')
contenteditable.addEventListener('paste', function(e){
let text = ''
contenteditable.classList.remove('empty')
e.preventDefault()
text = (e.originalEvent || e).clipboardData.getData('text/plain')
e.clipboardData.setData('text/plain', '')
window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))// /\x0D/g return ASCII
})
#input{
width: 100%;
height: 100px;
border: 1px solid black;
white-space: pre-line;
}
<div id="input"contenteditable="true">
<p>
</p>
</div>

OK as everybody is trying to work around clipboard data, checking keypress event, and using execCommand.
I thought of this
CODE
handlePastEvent=()=>{
document.querySelector("#new-task-content-1").addEventListener("paste",function(e)
{
setTimeout(function(){
document.querySelector("#new-task-content-1").innerHTML=document.querySelector("#new-task-content-1").innerText.trim();
},1);
});
}
handlePastEvent();
<div contenteditable="true" id="new-task-content-1">You cann't paste HTML here</div>

In 2022, you can use CSS user-modify: read-write-plaintext-only to archive this
.plain-text-only {
user-modify: read-write-plaintext-only;
-moz-user-modify: read-write-plaintext-only;
-webkit-user-modify: read-write-plaintext-only;
}
div[contenteditable] {
padding: 1rem 0.5rem;
border: 2px solid #eee;
border-radius: 4px;
margin-bottom: 2rem;
}
<div contenteditable class="plain-text-only">Can't paste HTML here</div>
<div contenteditable>HTML styled text free</div>

How to make contenteditable div content as text only [duplicate]

I have a basic editor based on execCommand following the sample introduced here. There are three ways to paste text within the execCommand area:
Ctrl+V
Right Click -> Paste
Right Click -> Paste As Plain Text
I want to allow pasting only plain text without any HTML markup. How can I force the first two actions to paste Plain Text?
Possible Solution: The way I can think of is to set listener for keyup events for (Ctrl+V) and strip HTML tags before paste.
Is it the best solution?
Is it bulletproof to avoid any HTML markup in paste?
How to add listener to Right Click -> Paste?

It will intercept the paste event, cancel the paste, and manually insert the text representation of the clipboard:
http://jsfiddle.net/HBEzc/.
This should be the most reliable:
It catches all kinds of pasting (Ctrl+V, context menu, etc.)
It allows you to get the clipboard data directly as text, so you don't have to do ugly hacks to replace HTML.
I'm not sure of cross-browser support, though.
editor.addEventListener("paste", function(e) {
// cancel paste
e.preventDefault();
// get text representation of clipboard
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
// insert text manually
document.execCommand("insertHTML", false, text);
});

I couldn't get the accepted answer here to work in IE so I did some scouting around and came to this answer which works in IE11 and the latest versions of Chrome and Firefox.
$('[contenteditable]').on('paste', function(e) {
e.preventDefault();
var text = '';
if (e.clipboardData || e.originalEvent.clipboardData) {
text = (e.originalEvent || e).clipboardData.getData('text/plain');
} else if (window.clipboardData) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
});

A close solution as pimvdb. But it's working of FF, Chrome and IE 9:
editor.addEventListener("paste", function(e) {
e.preventDefault();
if (e.clipboardData) {
content = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('insertText', false, content);
}
else if (window.clipboardData) {
content = window.clipboardData.getData('Text');
document.selection.createRange().pasteHTML(content);
}
});

Of course the question is already answered and the topic very old but I want to provide my solution as it is simple an clean:
This is inside my paste-event on my contenteditable-div.
var text = '';
var that = $(this);
if (e.clipboardData)
text = e.clipboardData.getData('text/plain');
else if (window.clipboardData)
text = window.clipboardData.getData('Text');
else if (e.originalEvent.clipboardData)
text = $('<div></div>').text(e.originalEvent.clipboardData.getData('text'));
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertHTML', false, $(text).html());
return false;
}
else { // IE > 7
that.find('*').each(function () {
$(this).addClass('within');
});
setTimeout(function () {
// nochmal alle durchlaufen
that.find('*').each(function () {
// wenn das element keine klasse 'within' hat, dann unwrap
// http://api.jquery.com/unwrap/
$(this).not('.within').contents().unwrap();
});
}, 1);
}
The else-part is from another SO-post I couldn't find anymore...
UPDATE 19.11.2014:
The other SO-post

None of the posted answers really seems to work cross browser or the solution is over complicated:
The command insertText is not supported by IE
Using the paste command results in stack overflow error in IE11
What worked for me (IE11, Edge, Chrome and FF) is the following:
$("div[contenteditable=true]").off('paste').on('paste', function(e) {
e.preventDefault();
var text = e.originalEvent.clipboardData ? e.originalEvent.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');
_insertText(text);
});
function _insertText(text) {
// use insertText command if supported
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
}
// or insert the text content at the caret's current position
// replacing eventually selected content
else {
var range = document.getSelection().getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<textarea name="t1"></textarea>
<div style="border: 1px solid;" contenteditable="true">Edit me!</div>
<input />
</body>
Note that the custom paste handler is only needed/working for contenteditable nodes. As both textarea and plain input fields don't support pasting HTML content at all, so nothing needs to be done here.

Note that execCommand() is deprecated, so avoid using it in your production environments. Do something like this instead:
const editor = document.querySelector('[contentEditable]')
editor.addEventListener('paste', handlePaste)
function handlePaste(e) {
e.preventDefault()
const text = (e.clipboardData || window.clipboardData).getData('text')
const selection = window.getSelection()
if (selection.rangeCount) {
selection.deleteFromDocument()
selection.getRangeAt(0).insertNode(document.createTextNode(text))
}
}
[contentEditable] {
padding: 1em;
border: 1px solid black;
}
<div contentEditable>Paste HTML here</div>
References:
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

Firefox does not allow you to access the clipboard data so you'll need to make a 'hack' to get it to work. I've not been able to find a complete solution, however you can fix it for ctrl+v pastes by creating a textarea & pasting to that instead:
//Test if browser has the clipboard object
if (!window.Clipboard)
{
/*Create a text area element to hold your pasted text
Textarea is a good choice as it will make anything added to it in to plain text*/
var paster = document.createElement("textarea");
//Hide the textarea
paster.style.display = "none";
document.body.appendChild(paster);
//Add a new keydown event tou your editor
editor.addEventListener("keydown", function(e){
function handlePaste()
{
//Get the text from the textarea
var pastedText = paster.value;
//Move the cursor back to the editor
editor.focus();
//Check that there is a value. FF throws an error for insertHTML with an empty string
if (pastedText !== "") document.execCommand("insertHTML", false, pastedText);
//Reset the textarea
paster.value = "";
}
if (e.which === 86 && e.ctrlKey)
{
//ctrl+v => paste
//Set the focus on your textarea
paster.focus();
//We need to wait a bit, otherwise FF will still try to paste in the editor => settimeout
window.setTimeout(handlePaste, 1);
}
}, false);
}
else //Pretty much the answer given by pimvdb above
{
//Add listener for paster to force paste-as-plain-text
editor.addEventListener("paste", function(e){
//Get the plain text from the clipboard
var plain = (!!e.clipboardData)? e.clipboardData.getData("text/plain") : window.clipboardData.getData("Text");
//Stop default paste action
e.preventDefault();
//Paste plain text
document.execCommand("insertHTML", false, plain);
}, false);
}

I was also working on a plain text paste and I started to hate all the execCommand and getData errors, so I decided to do it the classic way and it works like a charm:
$('#editor').bind('paste', function(){
var before = document.getElementById('editor').innerHTML;
setTimeout(function(){
var after = document.getElementById('editor').innerHTML;
var pos1 = -1;
var pos2 = -1;
for (var i=0; i<after.length; i++) {
if (pos1 == -1 && before.substr(i, 1) != after.substr(i, 1)) pos1 = i;
if (pos2 == -1 && before.substr(before.length-i-1, 1) != after.substr(after.length-i-1, 1)) pos2 = i;
}
var pasted = after.substr(pos1, after.length-pos2-pos1);
var replace = pasted.replace(/<[^>]+>/g, '');
var replaced = after.substr(0, pos1)+replace+after.substr(pos1+pasted.length);
document.getElementById('editor').innerHTML = replaced;
}, 100);
});
The code with my notations can be found here:
http://www.albertmartin.de/blog/code.php/20/plain-text-paste-with-javascript

function PasteString() {
var editor = document.getElementById("TemplateSubPage");
editor.focus();
// editor.select();
document.execCommand('Paste');
}
function CopyString() {
var input = document.getElementById("TemplateSubPage");
input.focus();
// input.select();
document.execCommand('Copy');
if (document.selection || document.textSelection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
}
Above code works for me in IE10 and IE11 and now also works in Chrome and Safari. Not tested in Firefox.

In IE11, execCommand doesn't work well. I use below code for IE11
<div class="wmd-input" id="wmd-input-md" contenteditable=true>
is my div box.
I read clipboard data from window.clipboardData and modify div's textContent and give caret.
I give timeout for setting caret, because if I don't set timeout, a caret goes to end of div.
and you should read clipboardData in IE11 in below way. If you don't do it, newline caracter is not handled properly, so caret goes wrong.
var tempDiv = document.createElement("div");
tempDiv.textContent = window.clipboardData.getData("text");
var text = tempDiv.textContent;
Tested on IE11 and chrome. It may not work on IE9
document.getElementById("wmd-input-md").addEventListener("paste", function (e) {
if (!e.clipboardData) {
//For IE11
e.preventDefault();
e.stopPropagation();
var tempDiv = document.createElement("div");
tempDiv.textContent = window.clipboardData.getData("text");
var text = tempDiv.textContent;
var selection = document.getSelection();
var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;
selection.removeAllRanges();
setTimeout(function () {
$(".wmd-input").text($(".wmd-input").text().substring(0, start)
+ text
+ $(".wmd-input").text().substring(end));
var range = document.createRange();
range.setStart(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);
range.setEnd(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);
selection.addRange(range);
}, 1);
} else {
//For Chrome
e.preventDefault();
var text = e.clipboardData.getData("text");
var selection = document.getSelection();
var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;
$(this).text($(this).text().substring(0, start)
+ text
+ $(this).text().substring(end));
var range = document.createRange();
range.setStart($(this)[0].firstChild, start + text.length);
range.setEnd($(this)[0].firstChild, start + text.length);
selection.removeAllRanges();
selection.addRange(range);
}
}, false);

After along search and trying I have found somehow kind of optimal solution
what is important to keep in mind
// /\x0D/g return key ASCII
window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))
and give the css style white-space: pre-line //for displaying
var contenteditable = document.querySelector('[contenteditable]')
contenteditable.addEventListener('paste', function(e){
let text = ''
contenteditable.classList.remove('empty')
e.preventDefault()
text = (e.originalEvent || e).clipboardData.getData('text/plain')
e.clipboardData.setData('text/plain', '')
window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))// /\x0D/g return ASCII
})
#input{
width: 100%;
height: 100px;
border: 1px solid black;
white-space: pre-line;
}
<div id="input"contenteditable="true">
<p>
</p>
</div>

OK as everybody is trying to work around clipboard data, checking keypress event, and using execCommand.
I thought of this
CODE
handlePastEvent=()=>{
document.querySelector("#new-task-content-1").addEventListener("paste",function(e)
{
setTimeout(function(){
document.querySelector("#new-task-content-1").innerHTML=document.querySelector("#new-task-content-1").innerText.trim();
},1);
});
}
handlePastEvent();
<div contenteditable="true" id="new-task-content-1">You cann't paste HTML here</div>

In 2022, you can use CSS user-modify: read-write-plaintext-only to archive this
.plain-text-only {
user-modify: read-write-plaintext-only;
-moz-user-modify: read-write-plaintext-only;
-webkit-user-modify: read-write-plaintext-only;
}
div[contenteditable] {
padding: 1rem 0.5rem;
border: 2px solid #eee;
border-radius: 4px;
margin-bottom: 2rem;
}
<div contenteditable class="plain-text-only">Can't paste HTML here</div>
<div contenteditable>HTML styled text free</div>

Javascript trick for 'paste as plain text` in execCommand

I have a basic editor based on execCommand following the sample introduced here. There are three ways to paste text within the execCommand area:
Ctrl+V
Right Click -> Paste
Right Click -> Paste As Plain Text
I want to allow pasting only plain text without any HTML markup. How can I force the first two actions to paste Plain Text?
Possible Solution: The way I can think of is to set listener for keyup events for (Ctrl+V) and strip HTML tags before paste.
Is it the best solution?
Is it bulletproof to avoid any HTML markup in paste?
How to add listener to Right Click -> Paste?

It will intercept the paste event, cancel the paste, and manually insert the text representation of the clipboard:
http://jsfiddle.net/HBEzc/.
This should be the most reliable:
It catches all kinds of pasting (Ctrl+V, context menu, etc.)
It allows you to get the clipboard data directly as text, so you don't have to do ugly hacks to replace HTML.
I'm not sure of cross-browser support, though.
editor.addEventListener("paste", function(e) {
// cancel paste
e.preventDefault();
// get text representation of clipboard
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
// insert text manually
document.execCommand("insertHTML", false, text);
});

I couldn't get the accepted answer here to work in IE so I did some scouting around and came to this answer which works in IE11 and the latest versions of Chrome and Firefox.
$('[contenteditable]').on('paste', function(e) {
e.preventDefault();
var text = '';
if (e.clipboardData || e.originalEvent.clipboardData) {
text = (e.originalEvent || e).clipboardData.getData('text/plain');
} else if (window.clipboardData) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
});

A close solution as pimvdb. But it's working of FF, Chrome and IE 9:
editor.addEventListener("paste", function(e) {
e.preventDefault();
if (e.clipboardData) {
content = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('insertText', false, content);
}
else if (window.clipboardData) {
content = window.clipboardData.getData('Text');
document.selection.createRange().pasteHTML(content);
}
});

Of course the question is already answered and the topic very old but I want to provide my solution as it is simple an clean:
This is inside my paste-event on my contenteditable-div.
var text = '';
var that = $(this);
if (e.clipboardData)
text = e.clipboardData.getData('text/plain');
else if (window.clipboardData)
text = window.clipboardData.getData('Text');
else if (e.originalEvent.clipboardData)
text = $('<div></div>').text(e.originalEvent.clipboardData.getData('text'));
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertHTML', false, $(text).html());
return false;
}
else { // IE > 7
that.find('*').each(function () {
$(this).addClass('within');
});
setTimeout(function () {
// nochmal alle durchlaufen
that.find('*').each(function () {
// wenn das element keine klasse 'within' hat, dann unwrap
// http://api.jquery.com/unwrap/
$(this).not('.within').contents().unwrap();
});
}, 1);
}
The else-part is from another SO-post I couldn't find anymore...
UPDATE 19.11.2014:
The other SO-post

None of the posted answers really seems to work cross browser or the solution is over complicated:
The command insertText is not supported by IE
Using the paste command results in stack overflow error in IE11
What worked for me (IE11, Edge, Chrome and FF) is the following:
$("div[contenteditable=true]").off('paste').on('paste', function(e) {
e.preventDefault();
var text = e.originalEvent.clipboardData ? e.originalEvent.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');
_insertText(text);
});
function _insertText(text) {
// use insertText command if supported
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
}
// or insert the text content at the caret's current position
// replacing eventually selected content
else {
var range = document.getSelection().getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<textarea name="t1"></textarea>
<div style="border: 1px solid;" contenteditable="true">Edit me!</div>
<input />
</body>
Note that the custom paste handler is only needed/working for contenteditable nodes. As both textarea and plain input fields don't support pasting HTML content at all, so nothing needs to be done here.

Note that execCommand() is deprecated, so avoid using it in your production environments. Do something like this instead:
const editor = document.querySelector('[contentEditable]')
editor.addEventListener('paste', handlePaste)
function handlePaste(e) {
e.preventDefault()
const text = (e.clipboardData || window.clipboardData).getData('text')
const selection = window.getSelection()
if (selection.rangeCount) {
selection.deleteFromDocument()
selection.getRangeAt(0).insertNode(document.createTextNode(text))
}
}
[contentEditable] {
padding: 1em;
border: 1px solid black;
}
<div contentEditable>Paste HTML here</div>
References:
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

Firefox does not allow you to access the clipboard data so you'll need to make a 'hack' to get it to work. I've not been able to find a complete solution, however you can fix it for ctrl+v pastes by creating a textarea & pasting to that instead:
//Test if browser has the clipboard object
if (!window.Clipboard)
{
/*Create a text area element to hold your pasted text
Textarea is a good choice as it will make anything added to it in to plain text*/
var paster = document.createElement("textarea");
//Hide the textarea
paster.style.display = "none";
document.body.appendChild(paster);
//Add a new keydown event tou your editor
editor.addEventListener("keydown", function(e){
function handlePaste()
{
//Get the text from the textarea
var pastedText = paster.value;
//Move the cursor back to the editor
editor.focus();
//Check that there is a value. FF throws an error for insertHTML with an empty string
if (pastedText !== "") document.execCommand("insertHTML", false, pastedText);
//Reset the textarea
paster.value = "";
}
if (e.which === 86 && e.ctrlKey)
{
//ctrl+v => paste
//Set the focus on your textarea
paster.focus();
//We need to wait a bit, otherwise FF will still try to paste in the editor => settimeout
window.setTimeout(handlePaste, 1);
}
}, false);
}
else //Pretty much the answer given by pimvdb above
{
//Add listener for paster to force paste-as-plain-text
editor.addEventListener("paste", function(e){
//Get the plain text from the clipboard
var plain = (!!e.clipboardData)? e.clipboardData.getData("text/plain") : window.clipboardData.getData("Text");
//Stop default paste action
e.preventDefault();
//Paste plain text
document.execCommand("insertHTML", false, plain);
}, false);
}

I was also working on a plain text paste and I started to hate all the execCommand and getData errors, so I decided to do it the classic way and it works like a charm:
$('#editor').bind('paste', function(){
var before = document.getElementById('editor').innerHTML;
setTimeout(function(){
var after = document.getElementById('editor').innerHTML;
var pos1 = -1;
var pos2 = -1;
for (var i=0; i<after.length; i++) {
if (pos1 == -1 && before.substr(i, 1) != after.substr(i, 1)) pos1 = i;
if (pos2 == -1 && before.substr(before.length-i-1, 1) != after.substr(after.length-i-1, 1)) pos2 = i;
}
var pasted = after.substr(pos1, after.length-pos2-pos1);
var replace = pasted.replace(/<[^>]+>/g, '');
var replaced = after.substr(0, pos1)+replace+after.substr(pos1+pasted.length);
document.getElementById('editor').innerHTML = replaced;
}, 100);
});
The code with my notations can be found here:
http://www.albertmartin.de/blog/code.php/20/plain-text-paste-with-javascript

function PasteString() {
var editor = document.getElementById("TemplateSubPage");
editor.focus();
// editor.select();
document.execCommand('Paste');
}
function CopyString() {
var input = document.getElementById("TemplateSubPage");
input.focus();
// input.select();
document.execCommand('Copy');
if (document.selection || document.textSelection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
}
Above code works for me in IE10 and IE11 and now also works in Chrome and Safari. Not tested in Firefox.

In IE11, execCommand doesn't work well. I use below code for IE11
<div class="wmd-input" id="wmd-input-md" contenteditable=true>
is my div box.
I read clipboard data from window.clipboardData and modify div's textContent and give caret.
I give timeout for setting caret, because if I don't set timeout, a caret goes to end of div.
and you should read clipboardData in IE11 in below way. If you don't do it, newline caracter is not handled properly, so caret goes wrong.
var tempDiv = document.createElement("div");
tempDiv.textContent = window.clipboardData.getData("text");
var text = tempDiv.textContent;
Tested on IE11 and chrome. It may not work on IE9
document.getElementById("wmd-input-md").addEventListener("paste", function (e) {
if (!e.clipboardData) {
//For IE11
e.preventDefault();
e.stopPropagation();
var tempDiv = document.createElement("div");
tempDiv.textContent = window.clipboardData.getData("text");
var text = tempDiv.textContent;
var selection = document.getSelection();
var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;
selection.removeAllRanges();
setTimeout(function () {
$(".wmd-input").text($(".wmd-input").text().substring(0, start)
+ text
+ $(".wmd-input").text().substring(end));
var range = document.createRange();
range.setStart(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);
range.setEnd(document.getElementsByClassName("wmd-input")[0].firstChild, start + text.length);
selection.addRange(range);
}, 1);
} else {
//For Chrome
e.preventDefault();
var text = e.clipboardData.getData("text");
var selection = document.getSelection();
var start = selection.anchorOffset > selection.focusOffset ? selection.focusOffset : selection.anchorOffset;
var end = selection.anchorOffset > selection.focusOffset ? selection.anchorOffset : selection.focusOffset;
$(this).text($(this).text().substring(0, start)
+ text
+ $(this).text().substring(end));
var range = document.createRange();
range.setStart($(this)[0].firstChild, start + text.length);
range.setEnd($(this)[0].firstChild, start + text.length);
selection.removeAllRanges();
selection.addRange(range);
}
}, false);

After along search and trying I have found somehow kind of optimal solution
what is important to keep in mind
// /\x0D/g return key ASCII
window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))
and give the css style white-space: pre-line //for displaying
var contenteditable = document.querySelector('[contenteditable]')
contenteditable.addEventListener('paste', function(e){
let text = ''
contenteditable.classList.remove('empty')
e.preventDefault()
text = (e.originalEvent || e).clipboardData.getData('text/plain')
e.clipboardData.setData('text/plain', '')
window.document.execCommand('insertHTML', false, text.replace('/\x0D/g', "\\n"))// /\x0D/g return ASCII
})
#input{
width: 100%;
height: 100px;
border: 1px solid black;
white-space: pre-line;
}
<div id="input"contenteditable="true">
<p>
</p>
</div>

OK as everybody is trying to work around clipboard data, checking keypress event, and using execCommand.
I thought of this
CODE
handlePastEvent=()=>{
document.querySelector("#new-task-content-1").addEventListener("paste",function(e)
{
setTimeout(function(){
document.querySelector("#new-task-content-1").innerHTML=document.querySelector("#new-task-content-1").innerText.trim();
},1);
});
}
handlePastEvent();
<div contenteditable="true" id="new-task-content-1">You cann't paste HTML here</div>

In 2022, you can use CSS user-modify: read-write-plaintext-only to archive this
.plain-text-only {
user-modify: read-write-plaintext-only;
-moz-user-modify: read-write-plaintext-only;
-webkit-user-modify: read-write-plaintext-only;
}
div[contenteditable] {
padding: 1rem 0.5rem;
border: 2px solid #eee;
border-radius: 4px;
margin-bottom: 2rem;
}
<div contenteditable class="plain-text-only">Can't paste HTML here</div>
<div contenteditable>HTML styled text free</div>

Develop Reference

JavaScript is the programming language of the Web.

How to implement custom code editor with HTML/JavaScript? - javascript

You can't do this inside a , not one that's editable. It sounds like you're after a WYSIWYG editor, most of which use a to do this. There are several JavaScript options for this, to name a few: TinyMCE CKEditor

Related

how to listen to the deletion of a specific character javascript

Change text on button when clicked with JavaScript

Allow only text to be pasted in a content editable div [duplicate]

How to make contenteditable div content as text only [duplicate]

Javascript trick for 'paste as plain text` in execCommand

Categories

Resources