一、基础版
<!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>