js markdown编辑器

// 这是一个简单的基于 JavaScript 的 Markdown 编辑器示例代码

// 引入必要的库，例如 simplemde 或 markdown-it
// 本例中使用 simplemde 作为 Markdown 编辑器库
import SimpleMDE from 'simplemde';

// 获取 HTML 中的文本区域元素
const editorElement = document.getElementById('markdown-editor');

// 初始化 SimpleMDE 编辑器
const simplemde = new SimpleMDE({
    element: editorElement,
    spellChecker: false, // 禁用拼写检查
    autosave: {
        enabled: true, // 启用自动保存
        uniqueId: "MyUniqueID", // 自动保存的唯一标识符
        delay: 1000, // 自动保存延迟时间（毫秒）
    },
    toolbar: [
        "bold", "italic", "heading", "|",
        "quote", "unordered-list", "ordered-list", "|",
        "link", "image", "|",
        "preview", "side-by-side", "fullscreen"
    ]
});

// 将编辑器内容输出到指定的预览区域
function updatePreview() {
    const previewArea = document.getElementById('markdown-preview');
    previewArea.innerHTML = marked(simplemde.value());
}

// 监听编辑器内容变化并更新预览
simplemde.codemirror.on("change", function() {
    updatePreview();
});

// 初始加载时更新一次预览
updatePreview();

解释说明：

1. 引入库：我们使用 simplemde 作为 Markdown 编辑器的核心库，它提供了丰富的功能和良好的用户体验。
2. 获取文本区域元素：通过 document.getElementById 获取页面中的文本区域元素，用于初始化编辑器。
3. 初始化 SimpleMDE：配置编辑器的各项参数，如禁用拼写检查、启用自动保存等，并设置工具栏按钮。
4. 更新预览：定义 updatePreview 函数，将编辑器的内容转换为 HTML 并显示在预览区域。
5. 监听内容变化：使用 codemirror.on("change") 监听编辑器内容的变化，并在每次变化时调用 updatePreview 更新预览。
6. 初始加载预览：页面加载时调用一次 updatePreview，确保初始内容能够正确显示。