如何正确将Stack's Editor集成到自有网站并解决无法显示问题

报错原因 #

你当前引入的依赖不完整，@stackoverflow/stacks 是Stacks设计系统的基础依赖包，本身不包含编辑器组件，你已经引入了基础样式、基础JS和语法高亮依赖，但缺失了核心的Stacks Editor自身的脚本和样式文件，因此浏览器无法识别window.stacksEditor对象，触发相关报错。

修复步骤 #

• 在head的资源引入区域新增Stacks Editor的专属样式和脚本引入
• 保证所有资源的加载顺序符合依赖要求，必须在Stacks基础资源、highlightJS加载完成后，再加载Stacks Editor资源，最后执行编辑器实例化代码

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stacks Editor测试</title>
    <!-- Stacks基础样式 -->
    <link rel="stylesheet" href="https://unpkg.com/@stackoverflow/stacks/dist/css/stacks.min.css" />
    <!-- Stacks Editor专属样式 -->
    <link rel="stylesheet" href="https://unpkg.com/@stackoverflow/stacks-editor/dist/stacks-editor.min.css" />
    <!-- Stacks基础JS -->
    <script src="https://unpkg.com/@stackoverflow/stacks/dist/js/stacks.min.js"></script>
    <!-- 语法高亮依赖 -->
    <script src="//unpkg.com/@highlightjs/cdn-assets@latest/highlight.min.js"></script>
    <!-- Stacks Editor核心脚本 -->
    <script src="https://unpkg.com/@stackoverflow/stacks-editor/dist/stacks-editor.min.js"></script>
</head>
<body>
<div id="editor-container"></div>
<script>
    new window.stacksEditor.StacksEditor(
        document.querySelector("#editor-container"),
        "*Your* **markdown** here",
        {}
    );
</script>
</body>
</html>

修改后刷新页面即可正常渲染编辑器，控制台相关报错会消失。

内容的提问来源于stack exchange，提问作者Dominik Lovetinsky