我正在构建 markdown 预览器，我想为我的 元素添加一个占位符。</p> <p>Placeholder 是用 markdown 编写的，我正在尝试将其导入我的 index.js 文件</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre><code>import placeholder from './sample.md'; // Importing from the local folder const $ = document.querySelectorAll.bind(document); marked.setOptions({ breaks: true }); let renderer = new marked.Renderer(); renderer.link = function(href, title, text) { return `<a target="_blank" href="${href}">${text}` + `</a>` } let txtArea = $('textarea')[0]; txtArea.addEventListener('input', event => { $('.prev-text')[0].innerHTML = marked(event.target.value, {renderer: renderer}) }); </code></pre> </div> </div> </p> <p>我想使用“sample.md”的内容并将其保存到一个变量“占位符”中，以便我可以设置它 作为我的 <textarea> 中的默认文本。</p> <p>现在我无法加载“sample.md”，浏览器抛出此错误：“无法加载模块脚本：服务器以非 JavaScript MIME 类型响应”text/markdown"。根据 HTML 规范对模块脚本执行严格的 MIME 类型检查。"</p> <p>这是我的 HTML:</p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> <title>Markdown Previewer</title> </head> <body> <div class="container"> <div class="editor"> <div id="ed-navbar" class="navbar"> EDITOR </div> <textarea name="markdown"></textarea> </div> <div class="preview"> <div id="pr-navbar" class="navbar"> PREVIEW </div> <div class="prev-text"> </div> </div> </div> <script type="module" src="./index.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> </body> </html> </code></pre> </div> </div> </p> </section> <div> <section class="answer"> <p>我解决了，谢谢大家的帮助，没有你就做不到！</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre><code>const mrk = new Request('sample.md'); fetch(mrk) .then(data => data.text()) .then(text => { $('textarea')[0].innerHTML = text; $('.prev-text')[0].innerHTML = marked(text, {renderer: renderer}) }); </code></pre> </div> </div> </p> </section> </div> </div> <div class="line"></div> <div id="footer">©2023 WhoseBug</div> </body> </html>