Rich Text Editor Tool written in Javascript, HTML and Css. Below is the complete code with all it feature that any rich text editor can have, you can use it in all kind of web applications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rich Text Editor</title>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.editor-container {
width: 90%;
max-width: 800px;
margin: 20px auto;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.editor-toolbar {
margin-bottom: 10px;
}
.ql-container {
height: 300px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
}
.ql-editor {
font-size: 16px;
color: #333;
}
.emoji-container {
margin-top: 10px;
}
.emoji-button {
font-size: 18px;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<div class="editor-container">
<h2 style="text-align: center;">Rich Text Editor</h2>
<!-- Editor Toolbar -->
<div id="toolbar" class="editor-toolbar">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
<select class="ql-color"></select>
<select class="ql-background"></select>
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
<select class="ql-align"></select>
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<button class="ql-clean"></button>
</div>
<!-- Rich Text Editor -->
<div id="editor"></div>
<!-- Emoji Picker -->
<div class="emoji-container">
<span class="emoji-button">😊</span>
<span class="emoji-button">😂</span>
<span class="emoji-button">❤️</span>
<span class="emoji-button">👍</span>
<span class="emoji-button">🎉</span>
<span class="emoji-button">🔥</span>
</div>
</div>
<!-- Include Quill.js -->
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
// Initialize Quill Editor
const quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: '#toolbar'
}
});
// Handle Emoji Insertion
const emojiButtons = document.querySelectorAll('.emoji-button');
emojiButtons.forEach(button => {
button.addEventListener('click', () => {
const emoji = button.textContent;
const range = quill.getSelection();
quill.insertText(range.index, emoji);
});
});
</script>
</body>
</html>