我是怎样引入开源系统中的Markdown功能的？

在Vue项目中实现Markdown编辑功能
已于 2022-04-03 14:37:36 修改
阅读量317 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 从0到1开发前后端分离系统 文章标签： 前端 vue.js elementui
于 2022-03-28 08:50:47 首次发布
本内容最终版权归csdn博主掉头发的王富贵所有，本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.youkuaiyun.com/csdnerM/article/details/123626523
本文介绍了如何在基于Vue.js和ElementUI的前端项目中集成Markdown编辑器。通过介绍的五个步骤，包括安装、引入、使用以及在Vue组件中展示Markdown内容，详细讲解了如何实现Markdown写作功能。此外，还涉及到代码高亮、图片上传和事件绑定等高级特性，并提到了防止XSS攻击的解决方案。

了解这个开源系统的观众一定知道了我这个系统的功能，就是打造成一个师徒系统，主要的展示自己的机会就是通过发博客来分享技术，其中最重要的一步类似csdn中的写博客的功能，那么我们怎么来实现这个功能呢？

首先我想到的就是将Markdown引入到改系统中，还有该项目的前端是vue的技术，于是我在网上找相关的博客，最终参考的是github上一位大佬写的一个开源项目，地址：mavonEditor

最终要实现的效果如下图所示
在这里插入图片描述

第一步，安装

npm install mavon-editor --save

第二步，引入

在这里插入图片描述

第三步，使用

在这里插入图片描述</

了解本专栏 订阅专栏 解锁全文 超级会员免费看
在网页中引入第三方文件MarkDown的步骤（详细）
m0_71927557的博客
07-23 1893
在网页中引入第三方文件MarkDown的步骤（详细）
Markdown博客系统的搭建与使用
ZZY1078689276的专栏
11-15 7160
文章目录搭建Markdown博客系统的好处模版的选择与使用模版的选择模板的使用使用GitHub Pages预览项目本地开发环境的搭建IDE的选择运行环境的搭建安装RubyInstaller查看安装后的软件版本号配置镜像安装依赖启动项目修改项目编写博客内容修改package.json修改_config.yml 搭建Markdown博客系统的好处   传统的博客系统在搭建时往往比较复杂，除了搭建开发、...
引入markdown插件
qq_44090551的博客
04-26 415
引入markdown插件 首先去官网查找自己喜欢的markdown编辑器插件 1. 将下载好的插件引入项目的static/lib/editormd目录下（此处是本人的目录） 2. 在html页面引入插件的css文件 <link rel="stylesheet"href="../static/lib/editormd/css/editormd.min.css"> 3. 接着引入插件的js文件 <script src="../static/lib/editormd/e
MarkDown 项目中如何引入开源MarkDown? 史上最简单教程
GoodManS的优快云
12-12 915
简单的MarkDown引入技巧，你想要在你的项目中加入MarkDown的编辑器吗? 你想让你写的文章以MarkDown的格式展示吗?最受欢迎的MarkDown编译器开源代码的使用方式。点击这里一目了然。
markdown引入代码_markdown编辑器使用之editormd整合PHP项目
weixin_39989980的博客
01-05 321
不啰嗦看效果如果觉得对你项目有用请继续深入。1. editor.md简介1.1 说明Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。1.2 项目地址github地址：https://github.com/pandao/editor.md1.3 项目效果图2. 项目整合2.1 下载editormd至...
前端开源库-markdown-it-lazy-headers
08-30
Markdown-it-Lazy-Headers是前端开发领域的一个开源库，专门针对Markdown解析器Markdown-it设计的一款插件。这个插件的主要功能是实现"懒惰式"的ATX风格标题处理，也就是所谓的"Lazy ATX Headers"。在Markdown语法中...
精选资源
Cpp-Markdown-开源
05-13
Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成结构化的HTML（超文本标记语言）文档...通过学习和使用这个库，开发者可以轻松地将Markdown的易读性引入到他们的C++项目中。
前端开源库-markdown-it-prism
08-29
Markdown-it-prism是一款专为前端开发者设计的开源库，它主要功能是在Markdown解析过程中结合Prism.js库，为代码块提供美观且功能强大的语法高亮显示。Markdown-it-prism是基于Markdown-it，一个轻量级且高度可扩展...
前端开源库-markdown-stream
08-30
2. **导入库**：在你的项目代码中引入 Markdown-Stream，例如 `const markdownStream = require('markdown-stream')`。 3. **创建流**：创建一个 Markdown 流实例，例如 `const mdStream = markdownStream()`。 4. *...
如何优雅地使用 Markdown 写博客（引用与转义）
无梦生7的博客
03-31 2104
引用与转义   本文主要介绍：Markdown 引用与转义的一些使用建议。 目录引用与转义引用1.语法2.使用规范转义 引用 1.语法   在 Markdown 中，引用由 > + 引用内容来标记，如下所示。 > 引用内容 语法说明如下。 多行引用也可以在每一行的开头都插入 >。 在引用中可以嵌套引用 在引用中可以使用其他的 Markdown 语法。 段落与换行的格式在引用...
vue引入markdown
weixin_42456784的博客
01-12 696
vue引入markdown
开源的、可嵌入的 Markdown 在线编辑器
MMKJSH的博客
01-19 588
开源的、可嵌入的 Markdown 在线编辑器
Markdown编辑器——Editor.md的使用
weixin_38083551的博客
11-11 7876
最近在写一个个人博客项目，其中用到了一款开源的Markdown文本编辑器——Editor.md，记录一下将其集成到项目中的方法，以及踩的坑。 1. 从官网上下载源码 官网地址：Editor.md - 开源在线 Markdown 编辑器 最新版本： v1.5.0，更新于 2015-06-09 （已经很久没有更新版本了，但在项目中用的还是非常多的） 下载下来之后是一个压缩包，解压 2. 将需要的资源导入项目 创建一个Springboot项目，在resources/statics目录下创建一个
如何快速入门使用Markdown
林洪炳的日常技术积累
01-06 4677
如何你是经常写文章的人，学习Markdown来写文章是一件很聪明的事情。因为Markdown格式的文章非常的简洁，不存在各种颜色的字体、乱七八糟的样式和花里花俏的排版。Markdown就是纯粹的、清新的、只有黑和灰字体颜色的标记语言，使一篇文章变得有深度并带有极简美感且令人沉迷的艺术。 在使用Markdown之前，首先要学习Markdown标记语言的基本语法。
如何在vue项目中导入markdown插件
weixin_46221106的博客
10-07 2355
文章目录前言一、导入步骤1.下载插件2.将文件复制粘贴到vue文件的components文件夹下3.在需要引入的.vue文件中导入二、在需要显示博客的界面调用 前言 此篇文章讲解如何在vue项目中导入markdown插件 一、导入步骤 1.下载插件 地址如下： https://github.com/hinesboy/mavonEditor 2.将文件复制粘贴到vue文件的components文件夹下 如下（最后一行）： 3.在需要引入的.vue文件中导入 示例代码： import { mav.
网站如何集成markdown编辑器
热门推荐
花2不谢
07-25 1万+
收藏(4) Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。它用简洁的语法代替排版，而不像一般我们用的文字处理软件 Word 等有大量的排版、字体设置。这使得我们能够专心的码字，而不需要额外地进行排版修饰，既简单又方便。很多站长编辑都喜欢用markdown来写文章，像简书、开源中国等平台都支持markdown编辑，所以最近就像把
markdown 语法_Markdown 基本语法
weixin_39517054的博客
11-28 295
Markdown 是一种轻量级的标记语言（markup language），由 John Gruber（1973 ~）与 Aaron Swartz （1986 ~ 2013）于2004年创造，被网站用于编写说明文件（readme）、技术文档或在论坛上发布信息。由于其语法简单，易于读写，且编写出的作品简洁美观，目前也被越来越多的人群用于日常写作、发布电子书甚至书写电子邮件。可以说，Markdown ...
七款优质开源项目，让你的Markdown编辑更加行云流水
ZicoChan的博客
08-10 1931
作为一种轻量级的标记语言，Markdown 已经逐渐成为了开发者们的必备技能，不管是编写技术文档还是博客，使用 Markdown 编辑已经成为了开发者们的首选。 今天介绍的七款开源项目，涵盖了 Markdown 编辑器、引擎以及适用于微信/知乎的在线渲染工具，相信有这些项目的帮助，你的 Markdown 编辑会更加行云流水。 1.md 项目作者：doocs 开源许可协议：WTFPL 项目地址：https://gitee.com/Doocs/md Markdown 文档自动即时渲染为微信图文.
Milkdown——一款开源的Markdown 编辑器
weixin_44186593的博客
11-23 1万+
前言 对于程序猿来说，markdown是我们非常熟悉的文档编写方式，在开发项目时，我们可以通过它来写出结构清晰案例完整的项目管理或者接口文档等。 Markdown 作为程序员写作的心头爱，有很多优点： 通过语法实现排版，不需要点选手动设置样式 快速实现复杂内容，如：代码块、超链接、公式等 让创作者有更多时间专注于内容 但，同样的也有些缺点： 繁琐的语法又不能全都记住，时不时还得翻翻文档 在HelloGitHub的推荐下，我发现了这一款有着高颜值以及丰富插件的Milkdown，集合 Markdown
为Markdown it添加复选框功能的前端开源插件
之后，在你的JavaScript代码中引入`markdown-it`和`markdown-it-checkbox`插件，并对`markdown-it`实例进行插件的使用配置。配置完成后，你就可以将包含复选框语法的Markdown文本传递给`markdown-it`解析器，最终...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

掉头发的王富贵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值