純前端技術做即時預覽的markdown編輯器
這次帶給大家純前端技術做即時預覽的markdown編輯器，用純前端技術做即時預覽的markdown編輯器的注意事項有哪些，下面就是實戰案例，一起來看一下。
第一步建立佈局:
1.構思佈局（以下是整體佈局）
2 .專案下新個index.html頁面,寫入以下程式碼:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>markdown编辑器</title>
<style type="text/css">
* { margin: 0; padding: 0; outline: none; border-radius: 0;
}
html, body { width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #ebebeb;
} #toolbar { height: 50px; background-color: #444; width: 100%; color: #fff; line-height: 50px;
} #container { overflow: auto; position: absolute; bottom: 0; left: 0; right: 0; top: 50px;
} #editor-column, #preview-column { width: 49.5%; height: 100%; overflow: auto; position: relative; background-color: #fff;
} .pull-left { float: left;
}
.pull-right { float: right;
} </style>
</head>
<body>
<div id="toolbar"></div>
<div id="container">
<div id="editor-column" class="pull-left">
<div id="panel-editor">
</div>
</div>
<div id="preview-column" class="pull-right">
<div id="panel-preview">
</div>
</div>
</div>
</body></html>效果預覽
#第二步驟引入資源實現初步效果:
1.專案下建立js資料夾
2.解開從下載好的壓縮包解marked/lib下的marked.js到js資料夾
3.解開下載好的壓縮包解ace-builds/src到js資料夾重新命名為ace
4.引入js檔案
(註:markdown.css是markdown樣式檔案,可以自行寫或從網路下載例如:github-markdown-css)
<!DOCTYPE html><html>
<head>
<meta charset='UTF-8'>
<title>markdown编辑器</title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/marked.js"></script>
<script src="js/ace/ace.js"></script>
<link href="markdown.css" rel="stylesheet" />
<!--略-->(先加入編輯區與顯示區代碼)
<!--略-->#mdeditor,#preview,#panel-editor,#panel-preview{
height: 100%;
width: 100%;
} </style>
</head>
<body>
<div id='toolbar'></div>
<div id='container'><div id='editor-column' class='pull-left'>
<div id='panel-editor'>
<!--编辑区-->
<div class="editor-content" id="mdeditor" ></div>
</div>
</div>
<div id='preview-column' class='pull-right'>
<div id='panel-preview'>
<!--显示区-->
<div id="preview" class="markdown-body"></div>
</div>
</div>
<!--略-->(先加入初始化程式碼)
<!--略--><script>
var acen_edit = ace.edit('mdeditor');
acen_edit.setTheme('ace/theme/chrome');
acen_edit.getSession().setMode('ace/mode/markdown');
acen_edit.renderer.setShowPrintMargin(false);
$("#mdeditor").keyup(function() {
$("#preview").html(marked(acen_edit.getValue()));
}); </script>
</body></html>效果預覽
第三步驟新增工具到工具列範例:
1.寫公用方法
(其實點選工具主要是在編輯器裡自動插入原本手打的符號)
function insertText(val){
acen_edit.insert(val);//光标位置插入
}
<div id='toolbar'>
<button onclick="insertText('**?**')">加粗</button>
<button onclick="insertText('_?_')">斜体</button>
<button onclick="insertText('>')">引用</button>
..... </div>第四步ace.js API 實作編輯器設定功能:
<div id='toolbar'>
<button onclick="insertText('**?**')">加粗</button>
<button onclick="insertText('_?_')">斜体</button>
<button onclick="insertText('>')">引用</button> 設定:
<select id="theme" size="1">
<optgroup label="Bright">
<option value="ace/theme/chrome">Chrome</option>
<option value="ace/theme/clouds">Clouds</option>
<option value="ace/theme/crimson_editor">Crimson Editor</option>
<option value="ace/theme/dawn">Dawn</option>
<option value="ace/theme/dreamweaver">Dreamweaver</option>
<option value="ace/theme/eclipse">Eclipse</option>
<option value="ace/theme/github">GitHub</option>
<option value="ace/theme/iplastic">IPlastic</option>
<option value="ace/theme/solarized_light">Solarized Light</option>
<option value="ace/theme/textmate">TextMate</option>
<option value="ace/theme/tomorrow">Tomorrow</option>
<option value="ace/theme/xcode">XCode</option>
<option value="ace/theme/kuroir">Kuroir</option>
<option value="ace/theme/katzenmilch">KatzenMilch</option>
<option value="ace/theme/sqlserver">SQL Server</option>
</optgroup>
<optgroup label="Dark">
<option value="ace/theme/ambiance">Ambiance</option>
<option value="ace/theme/chaos">Chaos</option>
<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
<option value="ace/theme/cobalt">Cobalt</option>
<option value="ace/theme/gruvbox">Gruvbox</option>
<option value="ace/theme/idle_fingers">idle Fingers</option>
<option value="ace/theme/kr_theme">krTheme</option>
<option value="ace/theme/merbivore">Merbivore</option>
<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
<option value="ace/theme/mono_industrial">Mono Industrial</option>
<option value="ace/theme/monokai">Monokai</option>
<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
<option value="ace/theme/solarized_dark">Solarized Dark</option>
<option value="ace/theme/terminal">Terminal</option>
<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
<option value="ace/theme/twilight">Twilight</option>
<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
</optgroup>
</select>
字体大小 <select id="fontsize" size="1">
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px" selected="selected">12px</option>
<option value="13px">13px</option>
<option value="14px">14px</option>
<option value="16px">16px</option>
<option value="18px">18px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
</select>
代码折行 <select id="folding" size="1">
<option value="manual">manual</option>
<option value="markbegin" selected="selected">mark begin</option>
<option value="markbeginend">mark begin and end</option>
</select>
自动换行 <select id="soft_wrap" size="1">
<option value="off">Off</option>
<option value="40">40 Chars</option>
<option value="80">80 Chars</option>
<option value="free">Free</option>
</select>
全选样式<input type="checkbox" name="select_style" id="select_style" checked="">
光标行高光<input type="checkbox" name="highlight_active" id="highlight_active" checked="">
显示行号<input type="checkbox" id="show_gutter" checked="">
打印边距<input type="checkbox" id="show_print_margin" checked="">
</div><!---略--->......
$("#theme").change(function() {
acen_edit.setTheme($(this).val());
})
$("#fontsize").change(function() {
acen_edit.setFontSize($(this).val());
})
$("#folding").change(function() {
session.setFoldStyle($(this).val());
})
$("#select_style").change(function() {
acen_edit.setOption("selectionStyle", this.checked ? "line" : "text");
})
$("#highlight_active").change(function() {
acen_edit.setHighlightActiveLine(this.checked);
})
$("#soft_wrap").change(function() {
acen_edit.setOption("wrap", $(this).val());
})
$("#show_print_margin").change(function() {
acen_edit.renderer.setShowPrintMargin(this.checked);.精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是純前端技術做即時預覽的markdown編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
Java和WebSocket的結合：如何實現即時視訊串流播放
Dec 17, 2023 pm 05:50 PM
隨著網路技術的不斷發展，即時視訊串流已成為了網路領域的重要應用。要實現即時視訊串流播放，其中的關鍵技術包括WebSocket和Java。本文將介紹如何結合使用WebSocket和Java實現即時視訊串流播放，並提供相關的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工通訊的協議，它在Web
Vue3怎麼解析markdown並實現程式碼高亮顯示
May 20, 2023 pm 04:16 PM
Vue實作部落格前端，需要實作markdown的解析，如果有程式碼則需要實作程式碼的高亮。 Vue的markdown解析函式庫很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。這些庫都大同小異。這裡選用的是marked，程式碼高亮的函式庫選用的是highlight.js。具體實現步驟如下：一、安裝依賴庫在vue專案下開啟命令窗口，並輸入以下命令npminstallmarked-save//marked用於將markdown轉換成htmlnpmins
基於JavaScript建立即時翻譯工具
Aug 09, 2023 pm 07:22 PM
基於JavaScript建立即時翻譯工具引言隨著全球化的需求日益增長，跨國交流與交流的頻繁發生，即時翻譯工具成為了一種非常重要的應用。我們可以利用JavaScript和一些現有的API來建立一個簡單但實用的即時翻譯工具。本文將會介紹如何基於JavaScript來實現這個功能，並附有程式碼範例。實作步驟步驟1：建立HTML結構首先，我們需要建立一個簡單的HTML
利用C++實現嵌入式系統的即時音視頻處理功能
Aug 27, 2023 pm 03:22 PM
利用C++實現嵌入式系統的即時音視頻處理功能嵌入式系統的應用範圍越來越廣泛，尤其在音視頻處理領域的需求日益增長。面對這樣的需求，利用C++語言實現嵌入式系統的即時音視訊處理功能成為常見的選擇。本文將介紹如何使用C++語言開發嵌入式系統的即時音視訊處理功能，並給出對應的程式碼範例。為了實現即時音視訊處理功能，首先需要理解音視訊處理的基本流程。一般來說，影音
Python如何建構一個Markdown編輯器
May 13, 2023 am 09:58 AM
首先，請確保您已安裝Python3和Tkinter。我們需要的其他東西是tkhtmlview和markdown2。您可以透過執行pipinstalltkhtmlviewmarkdown2或pip3installtkhtmlviewmarkdown2來安裝它們（如果您有多個Python版本）。現在啟動您喜歡的編輯器或IDE並建立新檔案（例如www.linuxidc.com.py（我將其命名為linuxidc.com編輯器））。我們將從導入必要的庫開始。 fromtkinterimport*fro
如何在 Windows 11 中立即開啟即時字幕
Jun 27, 2023 am 08:33 AM
如何在Windows11中立即開啟即時字幕1.在鍵盤上預贏+按Ctrl+L2.點擊同意3.將顯示一個彈出窗口，顯示準備以英語（美國）添加字幕（取決於您的首選語言）4.此外，您還可以透過點擊齒輪按鈕來過濾褻瀆？偏好？過濾髒話相關文章如何修復Windows伺服器中的啟動錯誤代碼0xc004f069Windows上的啟動過程有時會突然轉向顯示包含此錯誤代碼0xc004f069的錯誤訊息。雖然啟動程序已經聯機，但一些運行WindowsServer的舊系統可能會遇到此問題。透過這些初步檢查，如果這些檢查不
如何在iPhone上的蘋果電視應用程式上停用即時活動
Jun 29, 2023 pm 01:50 PM
現場活動是跟上即將到來的訂單、體育比賽等的好方法。這種新的通知方式是在iOS16發佈時首次引入的，它旨在改進通知傳遞到iPhone的方式。任何提供即時數據的應用程式都可以利用即時活動，許多流行的用途是追蹤掛單、正在進行的比賽的分數、天氣數據、即將到來的直播等等。即時活動始終顯示在您的通知中心，甚至在待機模式下（如果您已啟用待機模式並且您的iPhone已插接）。但是，您可能希望在使用AppleTV時停用“即時活動”，以獲得不間斷的體驗。以下是您在iPhone上執行此操作的方法。如何禁用蘋果電視的實
基於JavaScript建立即時聊天室
Aug 10, 2023 pm 11:18 PM
基於JavaScript建立即時聊天室隨著網路的快速發展，人們越來越注重即時通訊和即時互動體驗。而即時聊天室作為一種常見的即時通訊工具，對於個人和企業來說都非常重要。本文將介紹如何使用JavaScript建立一個簡單的即時聊天室，並提供對應的程式碼範例。我們首先需要一個前端頁面作為聊天室的UI介面。以下是一個簡單的HTML結構範例：<!DOCTYPE
