首页 / HTML / 用HTML+CSS做一个实时预览的markdown编辑器

用HTML+CSS做一个实时预览的markdown编辑器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了用HTML+CSS做一个实时预览的markdown编辑器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6958字，纯文字阅读大概需要10分钟。

内容图文

这次给大家带来用HTML+CSS做一个实时预览的markdown编辑器，用HTML+CSS做一个实时预览的markdown编辑器的注意事项有哪些，下面就是实战案例，一起来看一下。

第一步搭建布局:

1.构思布局（以下是总体布局）

用HTML+CSS做一个实时预览的markdown编辑器 - 文章图片

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" />
                <!--略-->

5初始化插件

(先添加编辑区和显示区代码)

<!--略-->#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> 
 <!--略-->

(先添加初始化代码)

<!--略--> 
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()));
});

第三步添加工具到工具栏示例:

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);
})

用HTML+CSS做一个实时预览的markdown编辑器 - 文章图片

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的用HTML+CSS做一个实时预览的markdown编辑器全部内容，希望文章能够帮你解决用HTML+CSS做一个实时预览的markdown编辑器所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/391720.html

来源：【匿名】

【上一篇】WEB的接口管理工具【下一篇】PHP 和 HTML

更多 ►

【用HTML+CSS做一个实时预览的markdown编辑器】教程文章相关的互联网学习教程文章

关于Markdown入门语法及html的对照

内容简介-标题 -段落 -删除字 -斜体字 -粗体字 -粗斜体 -分割线 -照片 -分隔线 -引用块 -有序列表 -无序列表 -无序列表 -嵌套列表 -直链链接 -带标题的链接 -普通链接 -行内代码 -代码块 -图片 -表格 -对齐方式标题#标题段落文章末尾添加两个空格来换行隔一行的段落删除字体两个~~包裹斜体字一个*包裹粗体字两个*号包裹粗斜体字三个*号包裹分割线三个-号独占一行期间可用空格隔开一级引用后面接空格引用多层嵌套有序列表序号X.后面...

markdown-it将md转成html【代码】

https://github.com/markdown-it/markdown-it ‘use strict‘; const md = require(‘markdown-it‘)(); const fs = require(‘fs‘); fs.watchFile(‘./txt/1.md‘, (curr, prev) => {let mdStr = fs.readFile(‘./txt/1.md‘, ‘utf-8‘, (err, data) => {let mdData = md.render(data);let htmlTemplate = fs.readFile(‘./txt/index.html‘, ‘utf-8‘, (err, data) => {let html = data.replace(‘{{content}}‘, mdData);con...

使用Pandoc命令将Markdown格式文件转换为HTML格式文件【代码】

一、Pandoc命令介绍Pandoc是一个强大的格式语言转换工具，被称为该领域的“瑞士军刀”。比如可用Pandoc命令将Markdown格式文件转换成HTML格式文件。二、具体转换命令具体转换命令如下：pandoc--standalone--self-contained--csspandoc.csssrc.md--outputtarget.html以上转换命令中选项含义介绍如下。 1、“–standalone” 为目标格式文件增加合适的“header”和“footer”。如果目标格式是“HTML”，那么通过该选项可解决“由于未...

程序员的专属微信公众号编辑器：定制 Markdown 转 HTML

效果（Gif）点击我查看仓库地址https://github.com/cdk8s/cdk8s-markdown-to-html https://gitee.com/cdk8s/cdk8s-markdown-to-html背景在程序员的世界里，只要习惯用 Git，写文章必然就是 Markdown 了。近来几天，重新玩起了微信公众号，最不能忍受的就是那个编辑器，效率很低。虽然微信现在已经提供了模板功能，但是对于喜欢多平台发文的程序员来讲，维护多个内容成本过高。现状了解了目前市场上主流的编辑器：135 编辑器壹...

php markdown 转html的方法【代码】【图】

php markdown转html的方法：1、使用Parsedown转换库将markdown转html；2、通过PHP Markdown工具将markdown转html。推荐：《PHP视频教程》两款php版的markdown转html的开源库markdown的编写方式已经流行起来，各种编辑器都已经内置了markdown的解析器，能够将markdown转换成各种好看的样式，那么php有没有类似的库将markdown文本转换成html呢？有，今天给大家介绍2款。一、Parsedown介绍两款php版的markdown转html的开源库Parsedow...

php如何实现markdown转html【代码】【图】

php实现markdown转html的方法：用markdown编辑api的方式，代码为【$fileContent = file_get_contents(storage_path(doc/admin_api.md))】。【相关学习推荐：php编程（视频）】php实现markdown转html的方法：使用插件实现markdown转为html功能很简单，就直接上代码啦。<?php namespace App\Http\Controllers\Admin; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use Parsedown; class ApiDocController ext...

php有没有把html生成markdown格式的txt

php有没有把html生成markdown格式的txt？回复内容：php有没有把html生成markdown格式的txt？I have three words for you:Dont try this不可能但是如果你想让你的html文档『看起来』像markdown，你可以看看这个CSShttp://fvsch.com/code/remarkdown/你可以尝试这个扩展http://michelf.ca/projects/php-markdo...注意并非所有的html tag都会支持，请仔细阅读文档确认它可以满足你的需求。http://git.oschina.net/shooke/corephp2/blo...

Parsedown解析Markdown过滤XSS时应如何处理html转义

用 Parsedown 对 Markdown 进行解析的时候，遇到了一些 XSS 过滤方面的问题。发现 Parsedown 会对代码区域内的 html 代码进行转义，代码区域外的却不进行转义，如以下代码所示PHPtext($test);/*** 得到结果是：* <script>alert('test')</script>* **/这样，这句还是被成功执行了既然如此，那我先自己给它转义一下PHPtext($test);/*** 得到结果是：* <script>alert(test)</script>* <script>alert(test)</script>*/虽然 XSS 是被...

使用markdown编辑器的话最终写入到数据库的是html形式的数据还是markdown格式

如果把html存进数据库的话如果需要对文章再次编辑的话就没法做了如果存储markdown的话文章显示的时候需要对文章进行格式处理，如果后端使用的markdown解析和markdown编辑器标准不一样的话还容易出问题后端需要额外区分采用富文本编辑器发布的文章与markdown编辑器发布的文章，无端增加额外判断相关mysql视频教程推荐：《mysql教程》如果把html存进数据库的话如果需要对文章再次编辑的话就没法做了如果存储markdown的话文章显示的时...

html-JqueryPHP如何实现SF中Markdown图片显示的功能？

我有类似这样的一个功能，用户上传图片文件后，会被变成markdown格式的地址，类似 ![](http://xxx.xxx.com/1.jpg) 我认为这样的显示方式过于臃肿并且不是很好看，也暴露了一些不好看的目录我发现SF的是类似 ![]![图片描述][1][1]: /img/bVuIwN 这样我也不是很喜欢，但是功能很棒。我最想要的效果是 ![](10021555355) // 括号内一串特定的字符然后我通过jquey操作dom？或者其他方式实现这个在右边看到图片的效果。大家认为怎么做好...

Razor TagHelper实现Markdown转HTML的方法

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。用途 Markdown的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。世界上最流行的博客平台WordPress和大型CMS如Joomla、Drupal都能很好的支持Markdown。完全采用Markdown编辑器的博客平台有Ghost和Typecho。用于编写说明文档，并且以“README.MD”的文件名保存在软件的目录下面。除此之外...

用HTML+CSS做一个实时预览的markdown编辑器【图】

这次给大家带来用HTML+CSS做一个实时预览的markdown编辑器，用HTML+CSS做一个实时预览的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...

的Markdown文章样式优化实战经历_html/css_WEB-ITnose

昨天发了一篇博客饭团(0)：提升效率的开发工具。但是默认字体太小了。对读者很不友好。博客园可以自己个性CSS，这会儿离上班还有段时间，所以决定亲操刀。 Round 1 记得前几天园子有篇博客说Markdown的很火，看看有没借鉴的。Markdown语法中文版，很可惜，只是Markdown的语法介绍。而且这篇博客居然没有用Markdown写。。。所以这一阶段没有收获~ Round 2 自己写CSS自然是件吃力不讨好的事情。所以我们找找别人写好了。虽然很...

使用SublimeText作为Markdown编辑器_html/css_WEB-ITnose

Sublime Text 3作为一个优秀的文本编辑器，拥有很多的扩展插件。我们可以利用这些插件为Sublime Text 增加扩展的功能，在这里我们借助两个插件来将Sublime Text 3变成一个 Markdown 的编辑器。 1. 安装Markdown Editing和Markdown Preview 插件我们借助 Package Control 来安装插件(如果Sublime Text 3还没有安装Package Control，请参考这里：Package Control Installation)。点击 Preferences --> 选择 Package Control: in...

HTML - 技术教程分类

HTML 教程 HTML 简介 HTML 编辑器 HTML 基础 HTML 元素 HTML 属性 HTML 标题 HTML 段落 HTML 文本格式化 HTML 链接 HTML 头部 HTML CSS HTML 图像 HTML 表格 HTML 列表 HTML 区块 HTML 布局 HTML 表单 HTML 框架 HTML 颜色 HTML 颜色名 HTML 颜色值 HTML 脚本 HTML 字符实体 HTML URL HTML 速查列表 HTML 总结 XHTML 简介 HTML 媒体(Media) HTML 插件 HTML 实例 HTML 标签列表（功能排序） HTML 属性 HTML 事件 HTML 画布 HTML 音频/视频 HTML 颜色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符号 HTML 语言代码 html 全部

HTML - 最热教程

html5代码如何实现进度条功能？（示例）javascript中html字符串转化为jquerydo...HTML5实战与剖析之CSS选择器——getEle...html5中设置或返回音频/视频是否应该被...HTML5获取设备信息 jQuery打印指定区域Html页面并自动分页...jQuery+HTML5+CSS3制作支持响应式布局时...JS+HTML5实现上传图片预览效果完整实例...php删除html标签和标签内的内容的方法总...XMLHttpRequest中responseText如何获取...

首页 / HTML / 用HTML+CSS做一个实时预览的markdown编辑器

用HTML+CSS做一个实时预览的markdown编辑器

内容导读

内容图文

内容总结

内容备注

内容手机端

【用HTML+CSS做一个实时预览的markdown编辑器】教程文章相关的互联网学习教程文章

关于Markdown入门语法及html的对照

推荐一个markdown格式转html格式的开源JavaScript库【代码】【图】

markdown-it将md转成html【代码】

使用Pandoc命令将Markdown格式文件转换为HTML格式文件【代码】

程序员的专属微信公众号编辑器：定制 Markdown 转 HTML

php markdown 转html的方法【代码】【图】

php如何实现markdown转html【代码】【图】

php有没有把html生成markdown格式的txt

Parsedown解析Markdown过滤XSS时应如何处理html转义

使用markdown编辑器的话最终写入到数据库的是html形式的数据还是markdown格式

html-JqueryPHP如何实现SF中Markdown图片显示的功能？

Razor TagHelper实现Markdown转HTML的方法

用HTML+CSS做一个实时预览的markdown编辑器【图】

的Markdown文章样式优化实战经历_html/css_WEB-ITnose

使用SublimeText作为Markdown编辑器_html/css_WEB-ITnose

MARKDOWN - 相关标签

HTML - 相关标签

CSS - 相关标签

HTML - 技术教程分类

HTML - 最新教程

HTML - 最热教程