一个实时转换MarkDown语法的HTML

最新推荐文章于 2024-09-07 08:14:00 发布

文子阳

最新推荐文章于 2024-09-07 08:14:00 发布

阅读量164

点赞数 2

文章标签： html 前端

本文链接：https://blog.csdn.net/wenxingchen/article/details/140838857

版权

一、基础版

<!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>
    <!-- EasyMDE CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
    <style>
        .editor-container {
            max-width: 800px;
            margin: 50px auto;
        }
        .preview-container {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
        }
        .preview-container table {
            width: 100%;
            border-collapse: collapse;
        }
        .preview-container th, .preview-container td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        .preview-container th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="editor-container">
        <textarea id="editor"></textarea>
    </div>
    <div class="preview-container">
        <div id="preview"></div>
    </div>

    <!-- EasyMDE JS -->
    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
    <script>
        // Initialize EasyMDE
        var easyMDE = new EasyMDE({
            element: document.getElementById('editor'),
            autoDownloadFontAwesome: false,
            placeholder: "Type here...",
            renderingConfig: {
                singleLineBreaks: false,
                codeSyntaxHighlighting: true,
            },
            autosave: {
                enabled: true,
                uniqueId: "editorContent",
                delay: 1000,
            },
            spellChecker: false,
            toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side", "fullscreen", "|", "guide"],
        });

        // Function to update preview
        function updatePreview() {
            var markdownText = easyMDE.value();
            var previewElement = document.getElementById('preview');
            previewElement.innerHTML = easyMDE.options.previewRender(markdownText);
        }

        // Add event listener for change event
        easyMDE.codemirror.on('change', updatePreview);

        // Initial preview render
        updatePreview();
    </script>
</body>
</html>

二、美化版

<!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>
    <!-- EasyMDE CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 1200px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        .editor-container {
            margin-bottom: 20px;
        }
        .preview-container {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
        }
        .preview-container table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .preview-container th, .preview-container td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        .preview-container th {
            background-color: #f2f2f2;
        }
        .preview-container h1, .preview-container h2, .preview-container h3 {
            color: #333;
        }
        .preview-container p {
            line-height: 1.6;
            color: #555;
        }
        .preview-container code {
            background-color: #f8f8f8;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 2px 4px;
            font-size: 90%;
            color: #c7254e;
        }
        .preview-container pre {
            background-color: #f8f8f8;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 10px;
            overflow: auto;
        }
        .preview-container blockquote {
            margin: 0 0 20px;
            padding: 10px 20px;
            color: #666;
            border-left: 5px solid #eee;
        }
        .preview-container ul, .preview-container ol {
            padding-left: 20px;
        }
        .preview-container ul li, .preview-container ol li {
            margin-bottom: 10px;
        }
        .toolbar {
            background-color: #007BFF;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 20px;
            color: #fff;
            text-align: center;
        }
        .toolbar a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="toolbar">
            <a href="#">Bold</a>
            <a href="#">Italic</a>
            <a href="#">Heading</a>
            <a href="#">Quote</a>
            <a href="#">List</a>
            <a href="#">Link</a>
            <a href="#">Image</a>
        </div>
        <div class="editor-container">
            <textarea id="editor"></textarea>
        </div>
        <div class="preview-container">
            <div id="preview"></div>
        </div>
    </div>

    <!-- EasyMDE JS -->
    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
    <script>
        // Initialize EasyMDE
        var easyMDE = new EasyMDE({
            element: document.getElementById('editor'),
            autoDownloadFontAwesome: false,
            placeholder: "Type here...",
            renderingConfig: {
                singleLineBreaks: false,
                codeSyntaxHighlighting: true,
            },
            autosave: {
                enabled: true,
                uniqueId: "editorContent",
                delay: 1000,
            },
            spellChecker: false,
            toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side", "fullscreen", "|", "guide"],
        });

        // Function to update preview
        function updatePreview() {
            var markdownText = easyMDE.value();
            var previewElement = document.getElementById('preview');
            previewElement.innerHTML = easyMDE.options.previewRender(markdownText);
        }

        // Add event listener for change event
        easyMDE.codemirror.on('change', updatePreview);

        // Initial preview render
        updatePreview();
    </script>
</body>
</html>

三、带复制预览按钮

<!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>
    <!-- EasyMDE CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 1200px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            position: relative;
        }
        .toolbar {
            background-color: #007BFF;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 20px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .toolbar a {
            color: #fff;
            text-decoration: none;
            margin: 0 10px;
        }
        .toolbar button {
            background-color: #28a745;
            border: none;
            color: #fff;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .toolbar button:hover {
            background-color: #218838;
        }
        .message {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #28a745;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            display: none;
            font-size: 14px;
        }
        .message.error {
            background-color: #dc3545;
        }
        .editor-container {
            margin-bottom: 20px;
        }
        .preview-container {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
        }
        .preview-container table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .preview-container th, .preview-container td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        .preview-container th {
            background-color: #f2f2f2;
        }
        .preview-container h1, .preview-container h2, .preview-container h3 {
            color: #333;
        }
        .preview-container p {
            line-height: 1.6;
            color: #555;
        }
        .preview-container code {
            background-color: #f8f8f8;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 2px 4px;
            font-size: 90%;
            color: #c7254e;
        }
        .preview-container pre {
            background-color: #f8f8f8;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 10px;
            overflow: auto;
        }
        .preview-container blockquote {
            margin: 0 0 20px;
            padding: 10px 20px;
            color: #666;
            border-left: 5px solid #eee;
        }
        .preview-container ul, .preview-container ol {
            padding-left: 20px;
        }
        .preview-container ul li, .preview-container ol li {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="toolbar">
            <div>
                <a href="#">Bold</a>
                <a href="#">Italic</a>
                <a href="#">Heading</a>
                <a href="#">Quote</a>
                <a href="#">List</a>
                <a href="#">Link</a>
                <a href="#">Image</a>
            </div>
            <button id="copyButton">Copy to Clipboard</button>
        </div>
        <div class="message" id="message"></div>
        <div class="editor-container">
            <textarea id="editor"></textarea>
        </div>
        <div class="preview-container">
            <div id="preview"></div>
        </div>
    </div>

    <!-- EasyMDE JS -->
    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
    <script>
        // Initialize EasyMDE
        var easyMDE = new EasyMDE({
            element: document.getElementById('editor'),
            autoDownloadFontAwesome: false,
            placeholder: "Type here...",
            renderingConfig: {
                singleLineBreaks: false,
                codeSyntaxHighlighting: true,
            },
            autosave: {
                enabled: true,
                uniqueId: "editorContent",
                delay: 1000,
            },
            spellChecker: false,
            toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side", "fullscreen", "|", "guide"],
        });

        // Function to update preview
        function updatePreview() {
            var markdownText = easyMDE.value();
            var previewElement = document.getElementById('preview');
            previewElement.innerHTML = easyMDE.options.previewRender(markdownText);
        }

        // Function to copy preview content to clipboard
        function copyToClipboard() {
            var previewElement = document.getElementById('preview');
            var range = document.createRange();
            range.selectNode(previewElement);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            try {
                var successful = document.execCommand('copy');
                showMessage(successful ? 'Copied to clipboard!' : 'Failed to copy.', successful ? '' : 'error');
            } catch (err) {
                showMessage('Failed to copy.', 'error');
            }
            window.getSelection().removeAllRanges(); // Clean up
        }

        // Function to show message
        function showMessage(message, type = '') {
            var messageElement = document.getElementById('message');
            messageElement.textContent = message;
            messageElement.className = 'message ' + type;
            messageElement.style.display = 'block';
            setTimeout(() => {
                messageElement.style.display = 'none';
            }, 3000);
        }

        // Add event listener to the copy button
        document.getElementById('copyButton').addEventListener('click', copyToClipboard);

        // Add event listener for change event
        easyMDE.codemirror.on('change', updatePreview);

        // Initial preview render
        updatePreview();
    </script>
</body>
</html>

四、自动复制到剪切板

<!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>
    <!-- 引入 EasyMDE 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
    <style>
        /* 基本的页面样式 */
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            background-color: #f4f4f9; /* 页面背景色 */
            margin: 0; /* 去除默认边距 */
            padding: 0; /* 去除默认内边距 */
        }
        /* 容器样式 */
        .container {
            max-width: 1200px; /* 最大宽度 */
            margin: 50px auto; /* 上下边距 50px，左右居中 */
            padding: 20px; /* 内边距 */
            background-color: #fff; /* 背景色 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            border-radius: 8px; /* 圆角 */
            position: relative; /* 相对定位，用于绝对定位的子元素 */
        }
        /* 工具栏样式 */
        .toolbar {
            background-color: #343a40; /* 工具栏背景色 */
            color: #fff; /* 工具栏文字颜色 */
            padding: 10px; /* 内边距 */
            border-radius: 8px; /* 圆角 */
            margin-bottom: 20px; /* 下边距 */
            display: flex; /* 使用 flex 布局 */
            justify-content: space-between; /* 项目在主轴上均匀分布 */
            align-items: center; /* 项目在交叉轴上居中 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
        }
        .toolbar div {
            display: flex; /* 使用 flex 布局 */
            align-items: center; /* 项目在交叉轴上居中 */
        }
        /* 工具栏链接样式 */
        .toolbar a {
            color: #fff; /* 链接文字颜色 */
            text-decoration: none; /* 去除下划线 */
            margin: 0 10px; /* 左右边距 */
            font-size: 16px; /* 字体大小 */
        }
        /* 工具栏按钮样式 */
        .toolbar button {
            background-color: #007bff; /* 按钮背景色 */
            border: none; /* 去除边框 */
            color: #fff; /* 按钮文字颜色 */
            padding: 10px 15px; /* 内边距 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 光标为手型 */
            font-size: 16px; /* 字体大小 */
            transition: background-color 0.3s; /* 背景色过渡效果 */
        }
        /* 按钮悬停效果 */
        .toolbar button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
        }
        /* 消息提示样式 */
        .message {
            position: absolute; /* 绝对定位 */
            top: 10px; /* 距离顶部 10px */
            right: 10px; /* 距离右侧 10px */
            background-color: #28a745; /* 背景色 */
            color: #fff; /* 文字颜色 */
            padding: 10px; /* 内边距 */
            border-radius: 5px; /* 圆角 */
            display: none; /* 初始隐藏 */
            font-size: 14px; /* 字体大小 */
        }
        .message.error {
            background-color: #dc3545; /* 错误消息背景色 */
        }
        /* 编辑器容器样式 */
        .editor-container {
            margin-bottom: 20px; /* 下边距 */
        }
        /* 预览容器样式 */
        .preview-container {
            border: 1px solid #ccc; /* 边框 */
            padding: 20px; /* 内边距 */
            border-radius: 8px; /* 圆角 */
        }
        .preview-container table {
            width: 100%; /* 表格宽度 100% */
            border-collapse: collapse; /* 边框合并 */
            margin-bottom: 20px; /* 下边距 */
        }
        .preview-container th, .preview-container td {
            border: 1px solid #ddd; /* 边框颜色 */
            padding: 12px; /* 内边距 */
            text-align: left; /* 左对齐 */
        }
        .preview-container th {
            background-color: #f2f2f2; /* 表头背景色 */
        }
        .preview-container h1, .preview-container h2, .preview-container h3 {
            color: #333; /* 标题颜色 */
        }
        .preview-container p {
            line-height: 1.6; /* 行高 */
            color: #555; /* 段落颜色 */
        }
        .preview-container code {
            background-color: #f8f8f8; /* 代码块背景色 */
            border: 1px solid #e1e1e1; /* 边框颜色 */
            border-radius: 4px; /* 圆角 */
            padding: 2px 4px; /* 内边距 */
            font-size: 90%; /* 字体大小 */
            color: #c7254e; /* 代码文字颜色 */
        }
        .preview-container pre {
            background-color: #f8f8f8; /* 预格式化文本背景色 */
            border: 1px solid #e1e1e1; /* 边框颜色 */
            border-radius: 4px; /* 圆角 */
            padding: 10px; /* 内边距 */
            overflow: auto; /* 溢出滚动 */
        }
        .preview-container blockquote {
            margin: 0 0 20px; /* 下边距 */
            padding: 10px 20px; /* 内边距 */
            color: #666; /* 引用文本颜色 */
            border-left: 5px solid #eee; /* 左边框 */
        }
        .preview-container ul, .preview-container ol {
            padding-left: 20px; /* 列表左边距 */
        }
        .preview-container ul li, .preview-container ol li {
            margin-bottom: 10px; /* 列表项下边距 */
        }
        /* 自定义 EasyMDE 工具栏按钮样式 */
        .editor-toolbar {
            background-color: #343a40 !important; /* 工具栏背景色 */
        }
        .editor-toolbar .fa {
            color: #fff !important; /* 图标颜色 */
        }
        .editor-toolbar button {
            background-color: transparent !important; /* 按钮背景色 */
            border: 1px solid #495057 !important; /* 按钮边框颜色 */
            color: #fff !important; /* 按钮文字颜色 */
            font-size: 16px; /* 按钮字体大小 */
            padding: 6px 12px; /* 按钮内边距 */
        }
        .editor-toolbar button:hover {
            background-color: #495057 !important; /* 按钮悬停背景色 */
            border-color: #343a40 !important; /* 按钮悬停边框颜色 */
        }
        .editor-toolbar button .fa {
            font-size: 18px; /* 图标字体大小 */
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 工具栏部分 -->
        <div class="toolbar">
            <div>
                <a href="#">Bold</a>
                <a href="#">Italic</a>
                <a href="#">Heading</a>
                <a href="#">Quote</a>
                <a href="#">List</a>
                <a href="#">Link</a>
                <a href="#">Image</a>
            </div>
            <div>
                <button id="clearButton">Clear</button>
                <button id="copyButton">Copy to Clipboard</button>
            </div>
        </div>
        <!-- 消息提示区域 -->
        <div class="message" id="message"></div>
        <!-- 编辑器容器 -->
        <div class="editor-container">
            <textarea id="editor"></textarea>
        </div>
        <!-- 预览容器 -->
        <div class="preview-container">
            <div id="preview"></div>
        </div>
    </div>

    <!-- 引入 EasyMDE 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
    <script>
        // 初始化 EasyMDE 编辑器
        var easyMDE = new EasyMDE({
            element: document.getElementById('editor'), // 绑定到 textarea 元素
            autoDownloadFontAwesome: false, // 禁止自动下载 FontAwesome
            placeholder: "Type here...", // 提示文字
            renderingConfig: {
                singleLineBreaks: false, // 禁止单行换行
                codeSyntaxHighlighting: true, // 启用代码语法高亮
            },
            autosave: {
                enabled: true, // 启用自动保存
                uniqueId: "editorContent", // 自动保存的唯一标识
                delay: 1000, // 自动保存延迟 1 秒
            },
            spellChecker: false, // 禁用拼写检查
            toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side", "fullscreen", "|", "guide"], // 工具栏按钮
        });

        // 更新预览的函数
        function updatePreview() {
            var markdownText = easyMDE.value(); // 获取编辑器中的 Markdown 内容
            var previewElement = document.getElementById('preview'); // 获取预览容器
            previewElement.innerHTML = easyMDE.options.previewRender(markdownText); // 渲染 Markdown 为 HTML
            copyToClipboard(); // 自动触发复制到剪切板的函数
        }

        // 复制到剪切板的函数
        function copyToClipboard() {
            var previewElement = document.getElementById('preview'); // 获取预览容器
            var range = document.createRange(); // 创建一个范围对象
            range.selectNode(previewElement); // 选择预览容器中的内容
            window.getSelection().removeAllRanges(); // 移除之前的选区
            window.getSelection().addRange(range); // 添加新的选区
            try {
                var successful = document.execCommand('copy'); // 执行复制命令
                showMessage(successful ? 'Copied to clipboard!' : 'Failed to copy.', successful ? '' : 'error'); // 显示消息
            } catch (err) {
                showMessage('Failed to copy.', 'error'); // 显示错误消息
            }
            window.getSelection().removeAllRanges(); // 清理选区
        }

        // 显示消息的函数
        function showMessage(message, type = '') {
            var messageElement = document.getElementById('message'); // 获取消息元素
            messageElement.textContent = message; // 设置消息内容
            messageElement.className = 'message ' + type; // 设置消息类型的类名
            messageElement.style.display = 'block'; // 显示消息
            setTimeout(() => {
                messageElement.style.display = 'none'; // 3 秒后隐藏消息
            }, 3000);
        }

        // 清空编辑器内容的函数
        function clearEditor() {
            easyMDE.value(''); // 清空编辑器内容
            updatePreview(); // 更新预览区域
        }

        // 为编辑器添加内容变化事件监听
        easyMDE.codemirror.on('change', updatePreview);

        // 初始化时更新预览
        updatePreview();

        // 给清空按钮添加点击事件
        document.getElementById('clearButton').addEventListener('click', clearEditor);
    </script>
</body>
</html>

五、本地化

<!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>
    <!-- 引入 EasyMDE 的 CSS -->
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">-->
    <link rel="stylesheet" href="./easymde.min.css">
    <style>
        /* 基本的页面样式 */
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            background-color: #f4f4f9; /* 页面背景色 */
            margin: 0; /* 去除默认边距 */
            padding: 0; /* 去除默认内边距 */
        }
        /* 容器样式 */
        .container {
            max-width: 1200px; /* 最大宽度 */
            margin: 50px auto; /* 上下边距 50px，左右居中 */
            padding: 20px; /* 内边距 */
            background-color: #fff; /* 背景色 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            border-radius: 8px; /* 圆角 */
            position: relative; /* 相对定位，用于绝对定位的子元素 */
        }
        /* 工具栏样式 */
        .toolbar {
            background-color: #343a40; /* 工具栏背景色 */
            color: #fff; /* 工具栏文字颜色 */
            padding: 10px; /* 内边距 */
            border-radius: 8px; /* 圆角 */
            margin-bottom: 20px; /* 下边距 */
            display: flex; /* 使用 flex 布局 */
            justify-content: space-between; /* 项目在主轴上均匀分布 */
            align-items: center; /* 项目在交叉轴上居中 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
        }
        .toolbar div {
            display: flex; /* 使用 flex 布局 */
            align-items: center; /* 项目在交叉轴上居中 */
        }
        /* 工具栏链接样式 */
        .toolbar a {
            color: #fff; /* 链接文字颜色 */
            text-decoration: none; /* 去除下划线 */
            margin: 0 10px; /* 左右边距 */
            font-size: 16px; /* 字体大小 */
        }
        /* 工具栏按钮样式 */
        .toolbar button {
            background-color: #007bff; /* 按钮背景色 */
            border: none; /* 去除边框 */
            color: #fff; /* 按钮文字颜色 */
            padding: 10px 15px; /* 内边距 */
            border-radius: 5px; /* 圆角 */
            cursor: pointer; /* 光标为手型 */
            font-size: 16px; /* 字体大小 */
            transition: background-color 0.3s; /* 背景色过渡效果 */
        }
        /* 按钮悬停效果 */
        .toolbar button:hover {
            background-color: #0056b3; /* 悬停时的背景色 */
        }
        /* 消息提示样式 */
        .message {
            position: absolute; /* 绝对定位 */
            top: 10px; /* 距离顶部 10px */
            right: 10px; /* 距离右侧 10px */
            background-color: #28a745; /* 背景色 */
            color: #fff; /* 文字颜色 */
            padding: 10px; /* 内边距 */
            border-radius: 5px; /* 圆角 */
            display: none; /* 初始隐藏 */
            font-size: 14px; /* 字体大小 */
        }
        .message.error {
            background-color: #dc3545; /* 错误消息背景色 */
        }
        /* 编辑器容器样式 */
        .editor-container {
            margin-bottom: 20px; /* 下边距 */
        }
        /* 预览容器样式 */
        .preview-container {
            border: 1px solid #ccc; /* 边框 */
            padding: 20px; /* 内边距 */
            border-radius: 8px; /* 圆角 */
        }
        .preview-container table {
            width: 100%; /* 表格宽度 100% */
            border-collapse: collapse; /* 边框合并 */
            margin-bottom: 20px; /* 下边距 */
        }
        .preview-container th, .preview-container td {
            border: 1px solid #ddd; /* 边框颜色 */
            padding: 12px; /* 内边距 */
            text-align: left; /* 左对齐 */
        }
        .preview-container th {
            background-color: #f2f2f2; /* 表头背景色 */
        }
        .preview-container h1, .preview-container h2, .preview-container h3 {
            color: #333; /* 标题颜色 */
        }
        .preview-container p {
            line-height: 1.6; /* 行高 */
            color: #555; /* 段落颜色 */
        }
        .preview-container code {
            background-color: #f8f8f8; /* 代码块背景色 */
            border: 1px solid #e1e1e1; /* 边框颜色 */
            border-radius: 4px; /* 圆角 */
            padding: 2px 4px; /* 内边距 */
            font-size: 90%; /* 字体大小 */
            color: #c7254e; /* 代码文字颜色 */
        }
        .preview-container pre {
            background-color: #f8f8f8; /* 预格式化文本背景色 */
            border: 1px solid #e1e1e1; /* 边框颜色 */
            border-radius: 4px; /* 圆角 */
            padding: 10px; /* 内边距 */
            overflow: auto; /* 溢出滚动 */
        }
        .preview-container blockquote {
            margin: 0 0 20px; /* 下边距 */
            padding: 10px 20px; /* 内边距 */
            color: #666; /* 引用文本颜色 */
            border-left: 5px solid #eee; /* 左边框 */
        }
        .preview-container ul, .preview-container ol {
            padding-left: 20px; /* 列表左边距 */
        }
        .preview-container ul li, .preview-container ol li {
            margin-bottom: 10px; /* 列表项下边距 */
        }
        /* 自定义 EasyMDE 工具栏按钮样式 */
        .editor-toolbar {
            background-color: #343a40 !important; /* 工具栏背景色 */
        }
        .editor-toolbar .fa {
            color: #fff !important; /* 图标颜色 */
        }
        .editor-toolbar button {
            background-color: transparent !important; /* 按钮背景色 */
            border: 1px solid #495057 !important; /* 按钮边框颜色 */
            color: #fff !important; /* 按钮文字颜色 */
            font-size: 16px; /* 按钮字体大小 */
            padding: 6px 12px; /* 按钮内边距 */
        }
        .editor-toolbar button:hover {
            background-color: #495057 !important; /* 按钮悬停背景色 */
            border-color: #343a40 !important; /* 按钮悬停边框颜色 */
        }
        .editor-toolbar button .fa {
            font-size: 18px; /* 图标字体大小 */
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 工具栏部分 -->
        <div class="toolbar">
            <div>
                <a href="#">Bold</a>
                <a href="#">Italic</a>
                <a href="#">Heading</a>
                <a href="#">Quote</a>
                <a href="#">List</a>
                <a href="#">Link</a>
                <a href="#">Image</a>
            </div>
            <button id="copyButton">Copy to Clipboard</button>
        </div>
        <!-- 消息提示区域 -->
        <div class="message" id="message"></div>
        <!-- 编辑器容器 -->
        <div class="editor-container">
            <textarea id="editor"></textarea>
        </div>
        <!-- 预览容器 -->
        <div class="preview-container">
            <div id="preview"></div>
        </div>
    </div>

    <!-- 引入 EasyMDE 的 JS -->
<!--    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>-->
    <script src="./easymde.min.js"></script>
    <script>
        // 初始化 EasyMDE 编辑器
        var easyMDE = new EasyMDE({
            element: document.getElementById('editor'), // 绑定到 textarea 元素
            autoDownloadFontAwesome: false, // 禁止自动下载 FontAwesome
            placeholder: "Type here...", // 提示文字
            renderingConfig: {
                singleLineBreaks: false, // 禁止单行换行
                codeSyntaxHighlighting: true, // 启用代码语法高亮
            },
            autosave: {
                enabled: true, // 启用自动保存
                uniqueId: "editorContent", // 自动保存的唯一标识
                delay: 1000, // 自动保存延迟 1 秒
            },
            spellChecker: false, // 禁用拼写检查
            toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side", "fullscreen", "|", "guide"], // 工具栏按钮
        });

        // 更新预览的函数
        function updatePreview() {
            var markdownText = easyMDE.value(); // 获取编辑器中的 Markdown 内容
            var previewElement = document.getElementById('preview'); // 获取预览容器
            previewElement.innerHTML = easyMDE.options.previewRender(markdownText); // 渲染 Markdown 为 HTML
            copyToClipboard(); // 自动触发复制到剪切板的函数
        }

        // 复制到剪切板的函数
        function copyToClipboard() {
            var previewElement = document.getElementById('preview'); // 获取预览容器
            var range = document.createRange(); // 创建一个范围对象
            range.selectNode(previewElement); // 选择预览容器中的内容
            window.getSelection().removeAllRanges(); // 移除之前的选区
            window.getSelection().addRange(range); // 添加新的选区
            try {
                var successful = document.execCommand('copy'); // 执行复制命令
                showMessage(successful ? 'Copied to clipboard!' : 'Failed to copy.', successful ? '' : 'error'); // 显示消息
            } catch (err) {
                showMessage('Failed to copy.', 'error'); // 显示错误消息
            }
            window.getSelection().removeAllRanges(); // 清理选区
        }

        // 显示消息的函数
        function showMessage(message, type = '') {
            var messageElement = document.getElementById('message'); // 获取消息元素
            messageElement.textContent = message; // 设置消息内容
            messageElement.className = 'message ' + type; // 设置消息类型的类名
            messageElement.style.display = 'block'; // 显示消息
            setTimeout(() => {
                messageElement.style.display = 'none'; // 3 秒后隐藏消息
            }, 3000);
        }

        // 为编辑器添加内容变化事件监听
        easyMDE.codemirror.on('change', updatePreview);

        // 初始化时更新预览
        updatePreview();
    </script>
</body>
</html>