HTML：Marked-js+Bootstarp简单实现Markdown文本编辑器
Posted wangzirui32
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML：Marked-js+Bootstarp简单实现Markdown文本编辑器相关的知识，希望对你有一定的参考价值。
hello，大家好，我是wangzirui32，今天我们来学习如何使用Marked-js+Bootstarp简单实现Markdown文本编辑器，开始学习吧！
1. Marked-js
Marked-js 是一个用 JS代码实现的 Markdown 解析器，能快速解析 Markdown 代码并生成为 html ，Github项目主页：https://github.com/markedjs/marked，可以由CDN引入：
<script src="https://cdn.bootcdn.net/ajax/libs/marked/4.0.2/marked.min.js"></script>
也可以下载项目源码进行自定义配置，这里以CDN引入为例。
我们需要使用函数marked.parse进行解析：
HTML_text = marked.parse(Markdown_text);
以上为实例代码，将会把Markdown_text转化为HTML并赋值给HTML_text。
2. 实现思路
我们需要使用Bootstarp，将页面划为两个区域，一个为编辑区，一个为预览区，当编辑区的文本出现改变时，触发js代码，更新预览区，从而实现实时预览，还要实现Markdown文本下载和HTML下载，使用js的blob对象实现。
3. 编辑器代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown 文本编辑器</title>
<!-- 引入Bootstarp和Marked-js -->
<script src="https://cdn.bootcdn.net/ajax/libs/marked/4.0.2/marked.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
/* CSS样式 */
#edit
width: 100%;
height: 100%;
padding-left: 10px;
font-size: 15px;
.col-lg-6
width: 50%;
height: 100%;
html
height: 100%;
/* 背景渐变色 */
body
background-image: -moz-linear-gradient(180deg, rgb(225, 255, 204), rgb(153, 173, 255));
background-image: -webkit-linear-gradient(180deg, rgb(225, 255, 204), rgb(153, 173, 255));
background-image: linear-gradient(180deg, rgb(225, 255, 204), rgb(153, 173, 255));
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center;">Markdown文本在线编辑器</h1>
<!-- 下载操作 -->
<button class="btn btn-primary" onclick="download(markdown, 'content.md');">下载Markdown文本</button>
<button class="btn btn-success" onclick="download(html_md, 'content.html');">下载HTML文本</button>
<script>
// 下载函数定义
download = function(content, filename)
// 创建Blob对象
var blob = new Blob([content], type: 'text/plain');
// 创建a标签
var a = document.createElement('a');
// 为blob对象创建url
var url = window.URL.createObjectURL(blob)
a.style = "display: none"; // 隐藏a标签
a.href = url; // 指向链接
a.download = filename; // 下载后保存的文件名
a.click(); // 自动点击
document.parentNode.removeChild(a); // 删除a标签
</script>
<hr>
<div class="row">
<div class="col-lg-6" id="input">
<script>
html_md = "";
markdown = "";
preview = function()
// 保存markdown内容
markdown = document.getElementById("edit").innerText;
// 保存HTML内容
html_md = marked.parse(markdown);
// 更新预览
document.getElementById("preview").innerHTML = html_md;
;
</script>
<!-- 可编辑的div标签 -->
<div contenteditable="true" class="form-control" oninput="preview();" id="edit"></div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<!-- 预览效果 -->
<div class="panel-body" id="preview"></div>
</div>
</div>
</div>
</div>
</body>
</html>
3. 效果图
好了，今天的课程就到这里，我是wangzirui32，喜欢的可以点个收藏和关注，我们下次再见！
bootstarp-table表格中嵌套多个BUTON按钮实现
bootstarp-table表格中嵌套多个BUTON按钮实现
有时我们需要在bootsharp-table表格中嵌套多个按钮，来实现不同的功能，大概界面如下：
实现功能如下：
1：构建表格
中间部分字段已删除。
visible: false 该列隐藏，界面不显示
events: operateEvents ：给按钮注册事件
formatter: operateFormatter：表格中增加按钮
1 $("#TbRoleList").bootstrapTable({ 2 url: "../Role/Get", 3 columns: [ 4 [ 5 { 6 field: ‘‘, 7 checkbox: true, 8 align: ‘center‘, 9 valign: ‘middle‘, 10 }, { 11 title: ‘Id‘, 12 field: ‘Id‘, 13 align: ‘center‘, 14 valign: ‘middle‘, 15 visible: false 16 }, { 17 title: ‘角色‘, 18 field: ‘RoleName‘, 19 align: ‘center‘, 20 valign: ‘middle‘, 21 sortable: false, 22 }, { 23 field: ‘operate‘, 24 title: ‘操作‘, 25 align: ‘center‘, 26 events: operateEvents, 27 formatter: operateFormatter 28 } 29 ] 30 ] 31 });
2:表格中增加按钮
operateFormatter(value, row, index)：这三个参数是bootsharp-table默认的
1 function operateFormatter(value, row, index) { 2 return [ 3 ‘<button type="button" class="RoleOfA btn btn-default btn-sm" style="margin-right:15px;">A权限</button>‘, 4 ‘<button type="button" class="RoleOfB btn btn-default btn-sm" style="margin-right:15px;">B权限</button>‘, 5 ‘<button type="button" class="RoleOfC btn btn-default btn-sm" style="margin-right:15px;">C权限</button>‘, 6 ‘<button type="button" class="RoleOfD btn btn-default btn-sm" style="margin-right:15px;">绑定D</button>‘, 7 ‘<button type="button" class="RoleOfEdit btn btn-default btn-sm" style="margin-right:15px;">编辑</button>‘ 8 ].join(‘‘); 9 }
3：注册按钮的点击事件
每个按钮对应哪个点击事件，是用Class里面的属性标识的，如上步骤2（比如：RoleOfA）
1 window.operateEvents = { 2 ‘click .RoleOfA‘: function (e, value, row, index) { 3 alert("A"); 4 }, 5 ‘click .RoleOfB‘: function (e, value, row, index) { 6 alert("B"); 7 }, 8 ‘click .RoleOfC‘: function (e, value, row, index) { 9 alert("C"); 10 }, 11 ‘click .RoleOfEdit‘: function (e, value, row, index) { 12 }); 13 } 14 };
以上是关于HTML：Marked-js+Bootstarp简单实现Markdown文本编辑器的主要内容，如果未能解决你的问题，请参考以下文章
bootstarp-table表格中嵌套多个BUTON按钮实现
web前端期末大作业 html+css+javascript+jquery+bootstarp响应式鲜花售卖网站16页
Bootstrap基础学习02 Bootstarp的布局组件应用示例
html5期末大作业：基于html+css+javascript+jquery+bootstarp响应式图书电商HTML模板网上书店(25页)