vditor完整的markdown富文本编辑器示例代码
代码语言：html
所属分类：其他
代码描述：vditor完整的markdown富文本编辑器示例代码，包含代码高亮、流程图绘制、序列图、甘蔗图，表格、图片、文字排版等示例代码。
代码标签： vditor markdown 富 文本 编辑器 示例 代码 甘蔗图 序列图 流程图
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/vditor/vditor.css">
<script src="//repo.bfw.wiki/bfwrepo/js/vditor/method.min.js"></script>
</head>
<body>
<div class="vditor-reset" id="preview">
<p>欢迎使用 Cmd Markdown 编辑阅读器</p>
<h1 id="欢迎使用-Cmd-Markdown-编辑阅读器">欢迎使用 Cmd Markdown 编辑阅读器</h1>
<hr />
<p>我们理解您需要更便捷更高效的工具记录思想，整理笔记、知识，并将其中承载的价值传播给他人，<strong>Cmd Markdown</strong> 是我们给出的答案 —— 我们为记录思想和分享知识提供更专业的工具。 您可以使用 Cmd Markdown：</p>
<blockquote>
<ul>
<li>整理知识，学习笔记</li>
<li>发布日记，杂文，所见所想</li>
<li>撰写发布技术文稿（代码支持）</li>
<li>撰写发布学术论文（LaTeX 公式支持）</li>
</ul>
</blockquote>
<p><img src="//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" alt="cmd-markdown-logo" /></p>
<p>除了您现在看到的这个 Cmd Markdown 在线版本，您还可以前往以下网址下载：</p>
<h3 id="Windows-Mac-Linux-全平台客户端"><a href="">Windows/Mac/Linux 全平台客户端</a></h3>
<blockquote>
<p>请保留此份 Cmd Markdown 的欢迎稿兼使用说明，如需撰写新稿件，点击顶部工具栏右侧的 <i class="icon-file"></i> <strong>新文稿</strong> 或者使用快捷键 <code>Ctrl+Alt+N</code>。</p>
</blockquote>
<hr />
<h2 id="什么是-Markdown">什么是 Markdown</h2>
<p>Markdown 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，<strong>粗体</strong> 或者 <em>斜体</em> 某些文字，更棒的是，它还可以</p>
<h3 id="1--制作一份待办事宜-Todo-列表">1. 制作一份待办事宜 <a href="">Todo 列表</a></h3>
<ul>
<li class="vditor-task"><input disabled="" type="checkbox" /> 支持以 PDF 格式导出文稿</li>
<li class="vditor-task"><input disabled="" type="checkbox" /> 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率</li>
<li class="vditor-task"><input checked="" disabled="" type="checkbox" /> 新增 Todo 列表功能</li>
<li class="vditor-task"><input checked="" disabled="" type="checkbox" /> 修复 LaTex 公式渲染问题</li>
<li class="vditor-task"><input checked="" disabled="" type="checkbox" /> 新增 LaTex 公式编号功能</li>
</ul>
<h3 id="2--书写一个质能守恒公式">2. 书写一个质能守恒公式<sup class="footnotes-ref" id="footnotes-ref-1"><a href="#footnotes-def-1">1</a></sup></h3>
<p><span class="vditor-math">E=mc^2</span></p>
<h3 id="3--高亮一段代码">3. 高亮一段代码<sup class="footnotes-ref" id="footnotes-ref-2"><a href="#footnotes-def-2">2</a></sup></h3>
<pre><code class="language-python">@requires_authorization
class SomeClass:
pass
if __name__ == '__main__':
# A comment
print 'hello world'
</code></pre>
<h3 id="4--高效绘制-流程图">4. 高效绘制 <a href="">流程图</a></h3>
<pre><code class="language-mermaid">flowchart TD;
A-->B;
A-->C;
B-->D;
C-->D;
</code></pre>
<h3 id="5--高效绘制-序列图">5. 高效绘制 <a href="">序列图</a></h3>
<pre><code class="language-mermaid">sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
</code></pre>
<h3 id="6--高效绘制-甘特图">6. 高效绘制 <a href="">甘特图</a></h3>
<pre><code class="language-mermaid">gantt
title 项目开发流程
section 项目确定
需求分析 :a1, 2016-06-22, 3d
可行性报告 :after a1, 5d
概念验证 : 5d
section 项目实施
概要设计 :2016-07-05 , 5d
详细设计 :2016-07-08, 10d
编码 :2016-07-15, 10d
测试 :2016-07-22, 5d
section 发布验收
发布: 2d
验收: 3d
</code></pre>
<h3 id="7--绘制表格">7. 绘制表格</h3>
<table>
<thead>
<tr>
<th>项目</th>
<th align="right">价格</th>
<th align="center">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>计算机</td>
<td align="right">$1600</td>
<td align="center">5</td>
</tr>
<tr>
<td>手机</td>
<td align="right">$12</td>
<td align="center">12</td>
</tr>
<tr>
<td>管线</td>
<td align="right">$1</td>
<td align="center">234</td>
</tr>
</tbody>
</table>
<h3 id="8--更详细语法说明">8. 更详细语法说明</h3>
<p>想要查看更详细的语法说明，可以参考我们准备的 <a href="">Cmd Markdown 简明语法手册</a>https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown，进阶用户可以参考
<a href="">Cmd Markdown 高阶语法手册</a>https://www.zybuluo.com/mdeditor?url=https://www.zybuluo.com/static/editor/md-help.markdown#cmd-markdown-高阶语法手册
了解更多高级功能。</p>
<p>总而言之，不同于其它 <em>所见即所得</em> 的编辑器：你只需使用键盘专注于书写文本内容，就可以生成印刷级的排版格式，省却在键盘和工具栏之间来回切换，调整内容和格式的麻烦。<strong>Markdown 在流畅的书写和印刷级的阅读体验之间找到了平衡。</strong> 目前它已经成为世界上最大的技术分享网站 GitHub 和 技术问答网站 StackOverFlow 的御用书写格式。</p>
<hr />
<h2 id="什么是-Cmd-Markdown">什么是 Cmd Markdown</h2>
<p>您可以使用很多工具书写 Markdown，但是 Cmd Markdown 是这个星球上我们已知的、最好的 Markdown 工具——没有之一 ：）因为深信文字的力量，所以我们和你一样，对流畅书写，分享思想和知识，以及阅读体验有极致的追求，我们把对于这些诉求的回应整合在 Cmd Markdown，并且一次，两次，三次，乃至无数次地提升这个工具的体验，最终将它演化成一个 <strong>编辑/发布/阅读</strong> Markdown 的在线平台——您可以在任何地方，任何系统/设备上管理这里的文字。</p>
<h3 id="1--实时同步预览">1. 实时同步预览</h3>
<p>我们将 Cmd Markdown 的主界面一分为二，左边为<strong>编辑区</strong>，右边为<strong>预览区</strong>，在编辑区的操作会实时地渲染到预览区方便查看最终的版面效果，并且如果你在其中一个区拖动滚动条，我们有一个巧妙的算法把另一个区的滚动条同步到等价的位置，超酷！</p>
<h3 id="2--编辑工具栏">2. 编辑工具栏</h3>
<p>也许您还是一个 Markdown 语法的新手，在您完全熟悉它之前，我们在 <strong>编辑区</strong> 的顶部放置了一个如下图所示的工具栏，您可以使用鼠标在工具栏上调整格式，不过我们仍旧鼓励你使用键盘标记格式，提高书写的流畅度。</p>
<p><img src="//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" alt="tool-editor" /></p>
<h3 id="3--编辑模式">3. 编辑模式</h3>
<p>完全心无旁骛的方式编辑文字：点击 <strong>编辑工具栏</strong> 最右侧的拉伸按钮或者按下 <code>Ctrl + M</code>，将 Cmd Markdown 切换到独立的编辑模式，这是一个极度简洁的写作环境，所有可能会引起分心的元素都已经被挪除，超清爽！</p>
<h3 id="4--实时的云端文稿">4. 实时的云端文稿</h3>
<p>为了保障数据安全，Cmd Markdown 会将您每一次击键的内容保存至云端，同时在 <strong>编辑工具栏</strong> 的最右侧提示 <code>已保存</code> 的字样。无需担心浏览器崩溃，机器掉电或者地震，海啸——在编辑的过程中随时关闭浏览器或者机器，下一次回到 Cmd Markdown 的时候继续写作。</p>
<h3 id="5--离线模式">5. 离线模式</h3>
<p>在网络环境不稳定的情况下记录文字一样很安全！在您写作的时候，如果电脑突然失去网络连接，Cmd Markdown 会智能切换至离线模式，将您后续键入的文字保存在本地，直到网络恢复再将他们传送至云端，即使在网络恢复前关闭浏览器或者电脑，一样没有问题，等到下次开启 Cmd Markdown 的时候，她会提醒您将离线保存的文字传送至云端。简而言之，我们尽最大的努力保障您文字的安全。</p>
<h3 id="6--管理工具栏">6. 管理工具栏</h3>
<p>为了便于管理您的文稿，在 <strong>预览区</strong> 的顶部放置了如下所示的 <strong>管理工具栏</strong>：</p>
<p><img src="//repo.bfw.wiki/bfwrepo/image/5d6539385ad28.png" alt="tool-manager" /></p>
<p>通过管理工布：将当前的文稿生成固定链接，在网络上发布，分享<br />
<i class="icon-file"></i> 新建：开始撰写一篇新的文稿<br />
<i class="icon-trash"></i> 删除：删除当前的文稿<br />
<i class="icon-cloud"></i> 导出：将当前的文稿转化为 Markdown 文本或者 Html 格式，并导出到本地<br />
<i class="icon-reorder"></i> 列表：所有新增和过往的文稿都可以在这里查看.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0