Maybe something like this. I did not test this so it is only intended to give some ideas.

To pre-load text into the Django Markdown Editor with JavaScript, you can follow these steps:

Add an input field to your HTML form that allows the user to upload a markdown file:

<input type="file" id="markdown-file-input">

Add a script tag to your HTML file that listens for changes to the file input and loads the contents of the file into a variable:

<script>
  const fileInput = document.getElementById('markdown-file-input');
  fileInput.addEventListener('change', function() {
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.onload = function(event) {
      const markdownText = event.target.result;
      const editor = document.getElementById('markdown-editor');
      editor.value = markdownText;
    };
    reader.readAsText(file);
  });
</script>

In your Django template, add an ID to the Markdown editor textarea:

<textarea id="markdown-editor" name="markdown"></textarea>

With these changes, when the user uploads a markdown file, the contents of the file will be loaded into the Django Markdown Editor and the user can then edit the contents of the file within the editor. This allows for a more seamless editing experience for the user, as they can make changes to the uploaded markdown file without having to copy and paste the contents into the editor manually. Keep in mind that you may need to adjust the code to fit your specific use case and the Django Markdown Editor library you are using.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Editor</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js</script>
</head>
<body>
    <input type="file" id="markdown-file" accept=".md">
    <textarea id="markdown-editor"></textarea>
    <div id="markdown-preview"></div>
    <script>
        function updatePreview() {
            const markdown = document.getElementById('markdown-editor').value;
            const html = marked(markdown);
            document.getElementById('markdown-preview').innerHTML = html;
        }

        document.getElementById('markdown-editor').addEventListener('input', updatePreview);

        document.getElementById('markdown-file').addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const contents = e.target.result;
                    document.getElementById('markdown-editor').value = contents;
                    updatePreview();
                };
                reader.readAsText(file);
            }
            else {
                document.getElementById('markdown-editor').value = '';
                updatePreview();
            }
        });
    </script>
</body>
</html>

Uh oh!

Pre load text into editor #146

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions