The goal here is to create a minimalistic MD editor which will save the *.md file to a pre defined directory when the “save” button is clicked/ pressed.
In other words, like this:
Two textareas. Both are initially blank. When typing markdown formatted text into the left side textarea, the markdown is converted into HTML and displayed within the right textarea.
As of now, it works in terms of text being displayed in the right area (the HTML area), but it is not formatted as HTML (it is not being converted).
Examples:
# Hello World! = <h1>Hello World!</h1>
**Cool** = <b>Cool</b> (or strong)
Basically, nothing is converted / parsed into HTML and it does not add line breaks, new rows – NOTHING.
My question is, where am I going wrong here?
I need to be able to see the HTML version on the right as I type on the left.
Hopefully, the image explains it better.
The code I am working on:
<?php
if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {
$content = $_POST['content'];
$file_name = 'article.md';
$file_path = __DIR__ . '/' . $file_name;
if ( file_put_contents( $file_path, $content ) ) {
$message = 'File saved successfully.';
} else {
$message = 'File could not be saved.';
}
}
?>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>md Editor</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
margin-top: 0;
}
.editor {
display: flex;
}
textarea {
width: 50%;
height: 500px;
resize: none;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px 0 0 5px;
}
#preview {
width: 50%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 0 5px 5px 0;
background-color: #f9f9f9;
overflow-y: auto;
}
button {
margin-top: 10px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>md Editor</h1>
<div class="editor">
<textarea id="mdtext" placeholder="Start writing your article here using Markdown.." oninput="updatePreview()"><?php echo isset($_POST['content']) ? $_POST['content'] : ''; ?></textarea>
<div id="preview"></div>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input type="hidden" name="content" id="content">
<button type="submit">Save md Article</button>
</form>
<?php if(isset($message)): ?>
<script>alert('<?php echo $message; ?>');</script>
<?php endif; ?>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
function updatePreview() {
var markdownInput = document.getElementById('mdtext').value;
var preview = document.getElementById('preview');
preview.innerHTML = markdownInput;
document.getElementById('content').value = markdownInput;
}
document.getElementById('mdtext').addEventListener('input', updatePreview);
updatePreview();
</script>
</body>
</html>
Any ideas on how to fix this? I’m feeling completely lost at the moment.
