ContentEditable Text Editor

Developer
AppleCrazy
Size
2,352 Kb
Views
42,504
  1. ContentEditable Text Editor Previews
  2. ContentEditable Text Editor HTML Codes
  3. ContentEditable Text Editor CSS Codes
  4. ContentEditable Text Editor JS Codes

How do I make an contenteditable text editor?

What is a contenteditable text editor? How do you make a contenteditable text editor? This script and codes were developed by AppleCrazy on 23 September 2022, Friday.

ContentEditable Text Editor Previews
IQ Test

ContentEditable Text Editor - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ContentEditable Text Editor</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ce" id="editor" contenteditable>
Type your next novel here. No distractions, no frills.
</div>
<div class="loc" id="loc"> 1
</div>
<div class="opts"> <button id="dl">Download .txt</button>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ContentEditable Text Editor - Script Codes CSS Codes

body { margin: 0; padding: 0; width: 100vw; height: 100vh;
}
.ce, .loc, #dl { font-family: Hack, Menlo, Consolas, monospace; font-size: 10pt; line-height: 13pt;
}
.ce { margin: 0; margin: 32px; margin-top: 10px; padding: 0; width: calc(100vw - 64px); min-height: 100vh; outline: none;
}
.loc { position: absolute; z-index: 1000; left: 0; top: 0; margin: 0; padding: 5px 15px 5px 5px; padding-top: 10px; text-align: center; width: 10px; min-height: 100vh; background: lightgray;
}
#dl { position: fixed; bottom: 10px; right: 10px; border: none; outline: none; background: lightgray; border-radius: 5px; padding: 5px; display: block; cursor: pointer;
}
#dl:active { color: green;
}

ContentEditable Text Editor - Script Codes JS Codes

var editor = document.getElementById("editor");
var loc = document.getElementById("loc");
var dl = document.getElementById("dl");
editor.oninput = updateLineCount;
dl.onclick = download;
function updateLineCount(e) { var lineCount = e.target.innerHTML.split("<div>").length; var lines = Array.apply(null, {length: lineCount + 1}).map(Number.call, Number); lines.splice(0, 1); var linesStr = lines.join("\n"); loc.innerHTML = linesStr; save();
}
function save() { localStorage.setItem('savedText', editor.innerHTML);
}
function download() { var txt = $("#editor").text(); var bl = new Blob([txt], {type:'text/plain'}); saveAs(bl, txt.split('\n')[0] + ".txt");
}
window.onload = function() { editor.innerHTML = localStorage.getItem('savedText');
};
ContentEditable Text Editor - Script Codes
ContentEditable Text Editor - Script Codes
Home Page Home
Developer AppleCrazy
Username applecrazy
Uploaded September 23, 2022
Rating 3
Size 2,352 Kb
Views 42,504
Do you need developer help for ContentEditable Text Editor?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

AppleCrazy (applecrazy) Script Codes
Name
Get Some Zen
Personal Portfolio
Google Web Fonts
Signal Reciever
Random Quote Generator
Uncartify1
Pure JS Webpage
Watch the News
Bootstrap 4 Testdrive
Angular Swag
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!