纯前端技术做实时预览的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中文网其它相关文章！
相关阅读：
Atas ialah kandungan terperinci 纯前端技术做实时预览的markdown编辑器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Gabungan Java dan WebSocket: bagaimana untuk mencapai penstriman video masa nyata
Dec 17, 2023 pm 05:50 PM
Dengan perkembangan berterusan teknologi Internet, penstriman video masa nyata telah menjadi aplikasi penting dalam bidang Internet. Untuk mencapai penstriman video masa nyata, teknologi utama termasuk WebSocket dan Java. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan Java untuk melaksanakan main balik penstriman video masa nyata dan memberikan contoh kod yang berkaitan. 1. Apakah itu WebSocket? WebSocket ialah protokol untuk komunikasi dupleks penuh pada sambungan TCP tunggal
Cara Vue3 menghuraikan penurunan harga dan melaksanakan penyerlahan kod
May 20, 2023 pm 04:16 PM
Vue melaksanakan bahagian hadapan blog dan perlu melaksanakan penghuraian markdown Jika terdapat kod, ia perlu melaksanakan penyerlahan kod. Terdapat banyak pustaka parsing markdown untuk Vue, seperti markdown-it, vue-markdown-loader, marked, vue-markdown, dsb. Perpustakaan ini semuanya sangat serupa. Ditanda digunakan di sini, dan highlight.js digunakan sebagai pustaka penonjolan kod. Langkah-langkah pelaksanaan khusus adalah seperti berikut: 1. Pasang perpustakaan bergantung Buka tetingkap arahan di bawah projek vue dan masukkan arahan berikut npminstallmarked-save//marked untuk menukar markdown ke htmlnpmins.
Membina alat terjemahan masa nyata berdasarkan JavaScript
Aug 09, 2023 pm 07:22 PM
Membina alat terjemahan masa nyata berdasarkan Pengenalan JavaScript Dengan permintaan yang semakin meningkat untuk globalisasi dan pertukaran dan pertukaran rentas sempadan yang kerap, alat terjemahan masa nyata telah menjadi aplikasi yang sangat penting. Kami boleh memanfaatkan JavaScript dan beberapa API sedia ada untuk membina alat terjemahan masa nyata yang mudah tetapi berguna. Artikel ini akan memperkenalkan cara melaksanakan fungsi ini berdasarkan JavaScript, dengan contoh kod. Langkah Pelaksanaan Langkah 1: Buat Struktur HTML Mula-mula, kita perlu mencipta HTML yang mudah
Menggunakan C++ untuk melaksanakan fungsi pemprosesan audio dan video masa nyata sistem terbenam
Aug 27, 2023 pm 03:22 PM
Menggunakan C++ untuk melaksanakan fungsi pemprosesan audio dan video masa nyata sistem terbenam Rangkaian aplikasi sistem terbenam semakin meluas, terutamanya dalam bidang pemprosesan audio dan video, di mana permintaan semakin meningkat. Menghadapi permintaan sedemikian, menggunakan bahasa C++ untuk melaksanakan fungsi pemprosesan audio dan video masa nyata sistem terbenam telah menjadi pilihan biasa. Artikel ini akan memperkenalkan cara menggunakan bahasa C++ untuk membangunkan fungsi pemprosesan audio dan video masa nyata bagi sistem terbenam, dan memberikan contoh kod yang sepadan. Untuk merealisasikan fungsi pemprosesan audio dan video masa nyata, anda perlu terlebih dahulu memahami proses asas pemprosesan audio dan video. Secara umumnya, audio dan video
Bagaimana untuk membina editor Markdown dalam Python
May 13, 2023 am 09:58 AM
Mula-mula, pastikan anda memasang Python3 dan Tkinter. Perkara lain yang kami perlukan ialah tkhtmlview dan markdown2. Anda boleh memasangnya dengan menjalankan pipinstalltkhtmlviewmarkdown2 atau pip3installtkhtmlviewmarkdown2 (jika anda mempunyai berbilang versi Python). Sekarang lancarkan editor atau IDE kegemaran anda dan buat fail baharu (contohnya www.linuxidc.com.py (saya namakannya editor linuxidc.com)). Kami akan mulakan dengan mengimport perpustakaan yang diperlukan. fromtkinterimport*fro
Bagaimana untuk melumpuhkan aktiviti langsung pada apl Apple TV pada iPhone
Jun 29, 2023 pm 01:50 PM
Acara langsung ialah cara yang bagus untuk mengikuti pesanan yang akan datang, permainan sukan dan banyak lagi. Kaedah pemberitahuan baharu ini mula diperkenalkan dengan keluaran iOS 16 dan direka bentuk untuk memperbaik cara pemberitahuan dihantar ke iPhone. Mana-mana aplikasi yang menyediakan data masa nyata boleh memanfaatkan aktiviti masa nyata dan banyak kegunaan popular ialah menjejaki pesanan yang belum selesai, markah daripada perlawanan berterusan, data cuaca, siaran langsung akan datang dan banyak lagi. Aktiviti langsung sentiasa dipaparkan dalam Pusat Pemberitahuan anda, walaupun dalam mod siap sedia (jika anda telah mendayakan mod siap sedia dan iPhone anda didok). Walau bagaimanapun, anda mungkin mahu melumpuhkan Aktiviti Langsung apabila menggunakan Apple TV anda untuk pengalaman tanpa gangguan. Begini cara anda melakukannya pada iPhone anda. Bagaimana untuk melumpuhkan Apple TV
Cara menghidupkan kapsyen langsung dalam Windows 11
Jun 27, 2023 am 08:33 AM
Cara menghidupkan sari kata langsung dalam Windows 11 1. Tekan Ctrl+L pada papan kekunci anda 2. Klik Setuju 3. Pop timbul akan muncul yang menyatakan Sedia untuk menambah sari kata dalam bahasa Inggeris (AS) (bergantung pada bahasa pilihan anda) 4. Selain itu, anda boleh menapis kata-kata kotor dengan mengklik butang gear? Keutamaan? Menapis Artikel Berkaitan Sumpah Cara Membetulkan Kod Ralat Pengaktifan 0xc004f069 dalam Pelayan Windows Proses pengaktifan pada Windows kadangkala mengambil giliran secara tiba-tiba untuk memaparkan mesej ralat yang mengandungi kod ralat 0xc004f069 ini. Walaupun proses pengaktifan adalah dalam talian, beberapa sistem lama yang menjalankan Windows Server mungkin mengalami masalah ini. Lulus semakan awal ini dan jika semakan ini tidak
Bina ruang sembang masa nyata berdasarkan JavaScript
Aug 10, 2023 pm 11:18 PM
Membina bilik sembang masa nyata berdasarkan JavaScript Dengan perkembangan pesat Internet, orang ramai memberi lebih banyak perhatian kepada pemesejan segera dan pengalaman interaktif masa nyata. Sebagai alat pemesejan segera yang biasa, bilik sembang masa nyata adalah sangat penting kepada individu dan perniagaan. Artikel ini akan memperkenalkan cara membina ruang sembang masa nyata yang ringkas menggunakan JavaScript dan memberikan contoh kod yang sepadan. Mula-mula kami memerlukan halaman hadapan sebagai antara muka UI ruang sembang. Berikut ialah contoh struktur HTML mudah: <!DOCTYPE
