Pre load text into editor #146

RohanJnr · 2020-12-19T11:50:46Z

Is it possible to pre-load text into the markdown editor with javascript?

I want the user to upload a markdown file, and then insert the contents of the markdown file to the editor so the user can edit his file contents.

some1ataplace · 2023-04-04T21:38:17Z

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>

agusmakmun added the enhancement label Apr 7, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pre load text into editor #146

Pre load text into editor #146

RohanJnr commented Dec 19, 2020

some1ataplace commented Apr 4, 2023 •

edited

Pre load text into editor #146

Pre load text into editor #146

Comments

RohanJnr commented Dec 19, 2020

some1ataplace commented Apr 4, 2023 • edited

some1ataplace commented Apr 4, 2023 •

edited