The basic HTML and JavaScript code required to create an article editor:
The following code creates a toolbar with dropdown menus to select font-name, font-size, font-color, and buttons to insert an image, URL, and save the article as an HTML file.
HTML Webpage Code:
<!-- index.html file -->
<!DOCTYPE html>
<html>
<head>
<title>Article Editor</title>
</head>
<body>
<div id="toolbar">
<select id="font-selector">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Times New Roman">Times New Roman</option>
</select>
<select id="size-selector">
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
</select>
<input type="color" id="color-picker">
<button id="insert-image">Insert Image</button>
<button id="insert-url">Insert URL</button>
<button id="save-article">Save Article</button>
</div>
<div id="editor" contenteditable="true">
<p>Start typing here...</p>
</div>
<script src="article-editor.js"></script>
</body>
</html>
JavaScript File Code:
// Get DOM elements
const editor = document.getElementById('editor');
const fontSelector = document.getElementById('font-selector');
const sizeSelector = document.getElementById('size-selector');
const colorPicker = document.getElementById('color-picker');
const insertImageBtn = document.getElementById('insert-image');
const insertUrlBtn = document.getElementById('insert-url');
const saveArticleBtn = document.getElementById('save-article');
// Add event listeners
fontSelector.addEventListener('change', () => {
document.execCommand('fontName', false, fontSelector.value);
});
sizeSelector.addEventListener('change', () => {
document.execCommand('fontSize', false, sizeSelector.value);
});
colorPicker.addEventListener('change', () => {
document.execCommand('foreColor', false, colorPicker.value);
});
insertImageBtn.addEventListener('click', () => {
const url = prompt('Enter the image URL');
if (url) {
document.execCommand('insertImage', false, url);
}
});
insertUrlBtn.addEventListener('click', () => {
const url = prompt('Enter the URL');
if (url) {
document.execCommand('createLink', false, url);
}
});
saveArticleBtn.addEventListener('click', () => {
const html = editor.innerHTML;
const a = document.createElement('a');
const file = new Blob([html], {type: 'text/html'});
a.href = URL.createObjectURL(file);
a.download = 'article.html';
a.click();
});
No comments:
Post a Comment