The article writing tool includes an input field for the title, a textarea for the article content, and a preview section to see the formatted output. The title and content are dynamically updated in the preview section as the user types.
The styling is done using CSS, with a responsive layout using the Bootstrap framework. You can customize the colors, padding, and other styling properties to match your desired design.
Please note that since the TinyMCE library is loaded from a CDN, an internet connection is required for the editor to function correctly.
<!DOCTYPE html>
<html>
<head>
<title>Article Writing Tool</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
border-radius: 5px;
padding: 20px;
}
h1 {
color: #007bff;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
font-weight: bold;
}
#articleEditor {
height: 400px;
}
.preview-section {
border: 1px solid #ced4da;
padding: 10px;
border-radius: 5px;
background-color: #fff;
}
.preview-section h3 {
margin-top: 0;
color: #007bff;
}
</style>
</head>
<body>
<div class="container">
<h1>Article Writing Tool</h1>
<div class="form-group">
<label for="articleTitle">Title:</label>
<input type="text" id="articleTitle" class="form-control" placeholder="Enter the title">
</div>
<div class="form-group">
<label for="articleEditor">Article Content:</label>
<textarea id="articleEditor"></textarea>
</div>
<div class="preview-section">
<h3>Preview:</h3>
<div id="articlePreview"></div>
</div>
</div>
<script>
tinymce.init({
selector: '#articleEditor',
height: 400,
plugins: 'link image code',
toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright | code',
menubar: false
});
const articleTitleInput = document.getElementById('articleTitle');
const articleEditor = tinymce.get('articleEditor');
const articlePreview = document.getElementById('articlePreview');
function updatePreview() {
const title = articleTitleInput.value;
const content = articleEditor.getContent();
articlePreview.innerHTML = `<h3>${title}</h3>${content}`;
}
articleTitleInput.addEventListener('input', updatePreview);
articleEditor.on('keyup', updatePreview);
</script>
</body>
</html>
No comments:
Post a Comment