一、基础版
<!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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
二、美化版
<!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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
三、带复制预览按钮
<!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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203.
- 204.
- 205.
- 206.
- 207.
- 208.
- 209.
- 210.
- 211.
- 212.
四、自动复制到剪切板
<!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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203.
- 204.
- 205.
- 206.
- 207.
- 208.
- 209.
- 210.
- 211.
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 218.
- 219.
- 220.
- 221.
- 222.
- 223.
- 224.
- 225.
- 226.
- 227.
- 228.
- 229.
- 230.
- 231.
- 232.
- 233.
- 234.
- 235.
- 236.
- 237.
- 238.
- 239.
- 240.
- 241.
- 242.
- 243.
- 244.
- 245.
- 246.
- 247.
- 248.
- 249.
- 250.
- 251.
- 252.
- 253.
- 254.
- 255.
- 256.
- 257.
- 258.
- 259.
- 260.
- 261.
- 262.
五、本地化
<!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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188.
- 189.
- 190.
- 191.
- 192.
- 193.
- 194.
- 195.
- 196.
- 197.
- 198.
- 199.
- 200.
- 201.
- 202.
- 203.
- 204.
- 205.
- 206.
- 207.
- 208.
- 209.
- 210.
- 211.
- 212.
- 213.
- 214.
- 215.
- 216.
- 217.
- 218.
- 219.
- 220.
- 221.
- 222.
- 223.
- 224.
- 225.
- 226.
- 227.
- 228.
- 229.
- 230.
- 231.
- 232.
- 233.
- 234.
- 235.
- 236.
- 237.
- 238.
- 239.
- 240.
- 241.
- 242.
- 243.
- 244.
- 245.
- 246.
- 247.
- 248.
- 249.
- 250.
- 251.
- 252.