Vue3+Vite實現(xiàn)一個Markdown編輯器組件
更新時間：2025年04月10日 09:58:48 作者：前端極客探險家
在現(xiàn)代前端開發(fā)中,Markdown 編輯器廣泛應用于博客,文檔,Wiki,代碼注釋等場景,本文將使用 Vue 3 構建一個簡單的 Markdown 編輯器組件,感興趣的小伙伴可以了解下
一、項目背景與需求分析
在現(xiàn)代前端開發(fā)中，Markdown 編輯器廣泛應用于博客、文檔、Wiki、代碼注釋等場景。一個優(yōu)秀的 Markdown 編輯器需要具備以下功能：
- 實時預覽：用戶輸入時，能夠看到實時的渲染效果。
- 語法高亮：支持 Markdown 語法的實時高亮顯示。
- 導出功能：支持將編輯的內(nèi)容導出為 Markdown 或 HTML 格式，方便分享和存檔。
- 自動保存：避免用戶丟失未保存內(nèi)容。
- 文件上傳：支持上傳文件（如圖片），并在 Markdown 內(nèi)容中嵌入顯示。
本文將使用 Vue 3 構建一個簡單的 Markdown 編輯器組件，并實現(xiàn)上述基本功能。
二、搭建基礎項目
1. 初始化 Vue 3 項目
我們使用 Vite 來初始化 Vue 3 項目，并選擇 TypeScript 模板：
npm create vite@latest markdown-editor --template vue-ts cd markdown-editor
2. 安裝依賴
接下來，我們安裝實現(xiàn) Markdown 渲染和語法高亮所需要的依賴：
marked：用于將 Markdown 轉換為 HTML。
highlight.js：用于提供 Markdown 語法的高亮顯示。
npm install marked highlight.js
三、實現(xiàn) Markdown 編輯器組件
1. 創(chuàng)建 Markdown 編輯器組件
在 src/components 目錄下創(chuàng)建 MarkdownEditor.vue 文件，封裝 Markdown 編輯器功能。
<template>
<div class="markdown-editor">
<textarea
v-model="content"
class="editor-textarea"
placeholder="請輸入 Markdown 內(nèi)容..."
@input="saveToLocalStorage"
></textarea>
<div class="preview">
<div v-html="renderedContent" class="preview-content"></div>
</div>
<div class="export-buttons">
<button @click="exportMarkdown">導出 Markdown</button>
<button @click="exportHTML">導出 HTML</button>
</div>
<div class="file-upload">
<input type="file" @change="handleFileUpload" />
<p>上傳圖片并在 Markdown 中顯示</p>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, onMounted } from 'vue';
import { marked } from 'marked';
import hljs from 'highlight.js';
export default defineComponent({
name: 'MarkdownEditor',
setup() {
const content = ref('');
const fileUrl = ref<string | null>(null);
// 從本地存儲加載內(nèi)容
onMounted(() => {
const savedContent = localStorage.getItem('markdown-content');
if (savedContent) {
content.value = savedContent;
}
});
// 將 Markdown 轉換為 HTML 并加上語法高亮
const renderedContent = computed(() => {
marked.setOptions({
highlight: (code: string) => {
return hljs.highlightAuto(code).value;
},
});
return marked(content.value);
});
// 保存內(nèi)容到本地存儲（自動保存）
const saveToLocalStorage = () => {
localStorage.setItem('markdown-content', content.value);
};
// 導出 Markdown 內(nèi)容
const exportMarkdown = () => {
const blob = new Blob([content.value], { type: 'text/markdown' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'document.md';
link.click();
};
// 導出 HTML 內(nèi)容
const exportHTML = () => {
const blob = new Blob([renderedContent.value], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'document.html';
link.click();
};
// 文件上傳功能
const handleFileUpload = (event: Event) => {
const fileInput = event.target as HTMLInputElement;
const file = fileInput.files ? fileInput.files[0] : null;
if (file) {
const reader = new FileReader();
reader.onload = () => {
const imageUrl = reader.result as string;
fileUrl.value = imageUrl; // 存儲圖片的 URL
const markdownImage = ``; // 將圖片路徑轉化為 Markdown 格式
content.value += `\n\n${markdownImage}\n`; // 插入到 Markdown 內(nèi)容中
};
reader.readAsDataURL(file); // 將圖片讀取為 Data URL
}
};
return {
content,
renderedContent,
exportMarkdown,
exportHTML,
handleFileUpload,
};
},
});
</script>
<style scoped>
.markdown-editor {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.editor-textarea {
width: 100%;
height: 300px;
padding: 10px;
font-size: 16px;
line-height: 1.5;
border: 1px solid #ccc;
border-radius: 8px;
resize: none;
}
.preview {
background-color: #f8f8f8;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
min-height: 300px;
}
.preview-content {
max-width: 100%;
word-wrap: break-word;
}
.export-buttons {
display: flex;
gap: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.file-upload {
display: flex;
flex-direction: column;
gap: 10px;
}
input[type="file"] {
padding: 5px;
}
</style>
2. 組件說明
Markdown 渲染：通過 marked 將用戶輸入的 Markdown 內(nèi)容轉換為 HTML。
語法高亮：使用 highlight.js 對代碼塊進行高亮顯示，增強代碼閱讀性。
導出功能：支持將 Markdown 或 HTML 內(nèi)容導出為文件，方便用戶保存或分享。
自動保存功能：使用 localStorage 自動保存 Markdown 內(nèi)容，避免用戶丟失未保存的輸入。
文件上傳支持：允許用戶上傳圖片文件，并將圖片插入到 Markdown 內(nèi)容中，生成合適的 Markdown 格式。
四、優(yōu)化與拓展
1. 自動保存功能
通過 localStorage 實現(xiàn)了自動保存功能。每次用戶輸入內(nèi)容時，Markdown 編輯器的內(nèi)容會自動存儲到瀏覽器的本地存儲中。當用戶刷新頁面或重新加載時，保存的內(nèi)容會自動恢復。這樣能有效避免用戶因刷新或瀏覽器崩潰導致的數(shù)據(jù)丟失。
// 保存內(nèi)容到本地存儲（自動保存）
const saveToLocalStorage = () => {
localStorage.setItem('markdown-content', content.value);
};
2. 文件上傳功能
我們通過 HTML5 的 FileReader API 實現(xiàn)了文件上傳支持。當用戶上傳圖片文件時，圖片會轉換為 Data URL，并自動插入到 Markdown 內(nèi)容中。Markdown 內(nèi)容將以  格式顯示上傳的圖片。
// 文件上傳功能
const handleFileUpload = (event: Event) => {
const fileInput = event.target as HTMLInputElement;
const file = fileInput.files ? fileInput.files[0] : null;
if (file) {
const reader = new FileReader();
reader.onload = () => {
const imageUrl = reader.result as string;
fileUrl.value = imageUrl; // 存儲圖片的 URL
const markdownImage = ``; // 將圖片路徑轉化為 Markdown 格式
content.value += `\n\n${markdownImage}\n`; // 插入到 Markdown 內(nèi)容中
};
reader.readAsDataURL(file); // 將圖片讀取為 Data URL
}
};
五、總結
通過 Vue 3 和 marked、highlight.js，我們實現(xiàn)了一個功能完善的 Markdown 編輯器組件。這個組件不僅支持實時預覽，還具備了語法高亮與導出功能，極大地方便了用戶的文檔編輯與分享需求。同時，自動保存功能和文件上傳功能進一步提升了編輯器的可用性和用戶體驗。
該組件可以輕松地集成到任何 Vue 3 項目中，為你的應用增添強大的編輯能力。
到此這篇關于Vue3+Vite實現(xiàn)一個Markdown編輯器組件的文章就介紹到這了,更多相關Vue3 Markdown編輯器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue3配置axios跨域實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了vue組件間的通信,子組件向父組件傳值的方式匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue2中如何自定義組件的v-model，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中的 scoped 屬性,其實就是給每一個dom節(jié)點元素都添加了不重復的自定義屬性（如：data-v-6810cbe5）,本文給大家介紹vue中的scoped屬性相關知識,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue學習之Vue-Router用法,結合實例形式分析了Vue-Router路由原理與常見操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue組件之間的通信，幫助大家更好的理解和學習前端的相關知識，感興趣的朋友可以了解下2020-08-08
vue實現(xiàn)的多頁面項目如何優(yōu)化打包的步驟詳解
這篇文章主要介紹了vue實現(xiàn)的多頁面項目如何優(yōu)化打包的步驟詳解，文中通過示例代碼以及圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07
文章介紹了如何在Vue項目中安裝和使用moment.js,包括安裝步驟、導入方法、漢化設置以及在Vue實例中使用moment.js進行日期處理2024-11-11
這篇文章主要介紹了vue-cli2打包前和打包后的css前綴不一致的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了一個因@click.stop引發(fā)的bug的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01