HTML：Marked-js+Bootstarp简单实现Markdown文本编辑器

已于 2023-01-08 16:13:31 修改
阅读量1.9k 收藏 5
点赞数
分类专栏： HTML JavaScript Bootstarp 文章标签： html css 前端 markdown bootstrap
于 2022-04-30 17:58:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzirui32/article/details/124515967
版权

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>
最低0.47元/天 解锁文章
wangzirui32
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于bootstrap的Markdown网页文本编辑器插件
09-01
基于bootstrap的Markdown网页文本编辑器插件
markdown-loader：用于webpack的markdown加载器
02-03
降价加载器 用于webpack的markdown-loader，使用 。 安装 npm install markdown-loader 用法 由于mark的输出是HTML，因此最好与一起使用。 Webpack 2+ { module : { rules : [ { test : / \. md $ / , use : [ ...
腾讯开源了一款 Markdown 编辑器，易扩展、功能全，很好用！
独行侠梦的博客
09-13 507
介绍Cherry Markdown Editor 是一款 Javascript Markdown 编辑器，具有开箱即用、轻量简洁、易于扩展等特点. 它可以运行在浏览器或服务端(NodeJs).开箱即用开发者可以使用非常简单的方式调用并实例化 Cherry Markdown 编辑器，实例化的编辑器默认支持大部分常用的 markdown 语法（如标题、目录、流程图、公式等）。易于拓展当 Cherry ...
推荐：EpicEditor —— 强大的JavaScript Markdown编辑器
最新发布
gitblog_00001的博客
05-09 320
推荐：EpicEditor —— 强大的JavaScript Markdown编辑器 项目地址:https://gitcode.com/OscarGodson/EpicEditor 本文将向您推介一个极具潜力的开源项目——EpicEditor，这是一款可嵌入的JavaScript Markdown编辑器，拥有实时预览、全屏编辑、自动保存草稿和离线支持等多种功能。对于开发人员而言，EpicEdit...
js：Markdown编辑器Vue3版本md-editor-v3
彭世瑜的博客
08-08 907
【代码】js：Markdown编辑器Vue3版本md-editor-v3。
推荐开源项目：Bootstrap Markdown - 强大的Markdown编辑器
gitblog_00014的博客
03-24 541
推荐开源项目：Bootstrap Markdown - 强大的Markdown编辑器 项目地址:https://gitcode.com/toopay/bootstrap-markdown 项目简介 Bootstrap Markdown 是一个基于Twitter Bootstrap和jQuery的Markdown编辑器组件，它为网页应用提供了直观、美观且功能丰富的Markdown编辑体验。通过使用此...
markdown2html 转化流程
qq_28992047的博客
07-14 317
【代码】markdown2html 转化流程。
哇塞！居然用这个框架开发了一款这么好用的 Markdown 编辑器
主要领域：前端开发
06-19 963
是的，就这么简单的。简单来说，就像我们之前使用 Jquery 那样，引入直接使用，然后直接打开html文件看效果，不需要自己搭建本地文件服务器啥的。我们需要创建了一个实时 Markdown 编辑器，用户可以在 textarea 中输入 Markdown 文本，然后实时显示转换后的 HTML。，值得高兴的一件事，ChatGPT 居然给我这个框架定义为一个轻量级的 JavaScript 框架，用于构建用户界面。下面，我们要正经起来了！外部引入的文件，我们已经介绍完了，那么我们再集中讲解下核心业务逻辑代码。
uni-app的markdown富文本编辑器插件uniapp-markdown-master.zip
12-17
uni-app的markdown富文本编辑器插件uniapp-markdown-master.zip
hexo-renderer-markdown-it:Markdown-它是Markdown解析器，操作正确。 一种更快且符合CommonMark要求的Hexo替代产品
05-11
hexo-renderer-markdown-it 该渲染器插件将用作上的渲染引擎。 增加了对和支持。主要特点支持 ， 和 广泛的配置比默认渲染器更快hexo-renderer-marked 标题的安全ID 带有ID的标题的锚点脚注<sub> H 2 O <sup> x 2 ...
react-simplemde-editor：用于simplemde markdown编辑器的React包装器
02-04
React SimpleMDE（EasyMDE）Markdown编辑器 用于React组件包装器 。 只有两个依赖，React（对等）和EasyMDE（显式）。v4的新功能现在使用而不是simplemde本身。 可能会有重大更改，因此我将版本升级到v4。 一个明显...
CodeParl-bootstrap-markdown-editor:基于ace编辑器和boostrap的Markdown编辑器
05-07
Bootstrap Markdown编辑器 带预览的Bootstrap的Markdown编辑器这是由H. Mugabo @ codeparl.com编写的jQuery插件。 要求 引导程序4 jQuery的 Ace编辑器（ ） 摊牌（ ） 特征 预览支持 图像上传支持 捷径 自动URL检测 同一页面上的多个实例 全屏 主题 帮助栏 i18n 屏幕截图 设定范例 包括所需CSS和js文件，如下所示： 首先在页面的<head>元素中包含css文件 < head > < link href =" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css " rel =" stylesheet " > < link href =" https://stackpath.bootstrapcdn.co
django-bootstrap-markdown:一个有用的编辑器，包含在您的表单的引导程序中
05-02
Django Bootstrap Markdown Django Bootstrap Markdown是一个简单的插件，可让您将简单但功能强大的集成到django表单中。 规格 这已经在Python 3的Django 1.6.10中进行了生产测试。在Python 2和开发中的Django 1.7.7和1.8中也进行了测试。 如果发生任何事情，请提出，我将对其进行深入研究。 安装 您可以使用pip安装它： pip install django-bootstrap-markdown-editor 然后将其添加到settings.py文件中的INSTALLED_APPS ： INSTALLED_APPS = ( ... ' bootstrap_markdown ', ) 然后执行./manage.py syncdb 。 一体化 集成非常简单，如下面的示例所示： from
bootstrap-table插入可编辑行，文本框形式（非官方自带的）
05-12
在网上找了下这方面资料都不太满足自己需求，自己就写了个，里面有初始数据都不可编辑只有手动点击插入新的行是可编辑；还有是初始数据全部可编辑，插入新行也是可编辑的，全部编辑形式是input框里直接编辑，失去焦点触发事件，非官方自带的编辑形式，将页面放到bootstrap-table的demo项目的insertRow.html同目录下即可
marked-forms:从markdown生成html表单标签和输入控件
05-07
Marked.js插件，用于从markdown生成HTML表单输入。 从诸如[text ?input?](name)类的markdown链接生成标签和输入控件。 安装 npm install marked-forms 重大变化 从v3.0.0版本开始，该库使用插件api。 从v4.0.0...
marked.js讲解
weixin_33775572的博客
06-01 4343
一、地址 mared.js 二、安装 npm install marked --save 三、设置参数 marked.setOptions({ renderer: new marked.Renderer(), gfm: true, tables: true, breaks: true, pedantic: false, sanitize: false, smartLists: true, smar...
没啥用的纯前端打造一个实时 markdown 编辑器
weixin_44009656的博客
04-30 2383
通过纯前端打造一个实时 markdown 编辑器，用到的库或框架主要有 marked，Ace，highlight.js 及 Bootstrap。通过本完成本项目，将实践 web 应用程序开发的相关知识。
零基础专属Markdown在线编辑器开发
goodloving的博客
02-24 840
文章目录零基础专属Markdown在线编辑器开发1、Markdown和HTML1）名字区别2）功能区别2、Markdown转HTML1）marked.js2）Markdown转HTML展示1、定义md2html函数2、在线html内容渲染（v-html）3）MD在线编辑和HTML实时渲染4）更换MD主题5）文件保存总结 零基础专属Markdown在线编辑器开发 在线案例 Markdown也是标记语言一种，类似HTML，和CSS没关系。我们平时使用和看到的Markdown编辑器（Typora等）显示的样式都是
推荐一款强大的Markdown编辑器：Vue-Bl-Markdown-Editor
gitblog_00077的博客
04-07 395
推荐一款强大的Markdown编辑器：Vue-Bl-Markdown-Editor 项目地址:https://gitcode.com/blowsnowit/vue-bl-markdown-editor 项目简介 Vue-Bl-Markdown-Editor 是一个基于 Vue.js 的开源Markdown编辑器组件。它提供了丰富的功能，包括实时预览、代码高亮、图片上传等，旨在为开发者提供一种简洁高...
用js实现Markdown 编辑器
05-30
好的，我可以给你提供一些用 JavaScript 实现 Markdown 编辑器的指导。 首先，你需要在 HTML 中创建一个文本输入框和一个预览框。你可以使用 `<textarea>` 标签来创建文本输入框，使用 `<div>` 标签来创建预览框。示例代码如下： ```html <textarea id="markdown-input"></textarea> <div id="markdown-preview"></div> ``` 接着，你需要使用 JavaScript 来实现 Markdown 编辑器的功能。具体来说，你需要编写以下几个函数： 1. `updatePreview()`: 这个函数用于将输入的 Markdown 文本转换成 HTML，并显示在预览框中。你可以使用开源的 Markdown 库 [marked.js](https://marked.js.org/) 来实现这个功能。示例代码如下： ```javascript function updatePreview() { const markdownInput = document.getElementById('markdown-input').value; const markdownPreview = document.getElementById('markdown-preview'); markdownPreview.innerHTML = marked(markdownInput); } ``` 2. `saveMarkdown()`: 这个函数用于将输入的 Markdown 文本保存到本地。你可以使用浏览器提供的 `localStorage` API 来实现这个功能。示例代码如下： ```javascript function saveMarkdown() { const markdownInput = document.getElementById('markdown-input').value; localStorage.setItem('markdown', markdownInput); } ``` 3. `loadMarkdown()`: 这个函数用于从本地加载已保存的 Markdown 文本，并显示在输入框中。示例代码如下： ```javascript function loadMarkdown() { const markdownInput = document.getElementById('markdown-input'); markdownInput.value = localStorage.getItem('markdown') || ''; updatePreview(); } ``` 最后，你需要在页面加载完成时调用 `loadMarkdown()` 函数，以加载已保存的 Markdown 文本。示例代码如下： ```javascript window.addEventListener('load', loadMarkdown); ``` 希望以上指导对你有所帮助，祝你编写 Markdown 编辑器顺利！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值