VUE工程中使用markdown——展示

最新推荐文章于 2024-07-02 14:31:38 发布
最新推荐文章于 2024-07-02 14:31:38 发布
阅读量1.1k 收藏 5
点赞数
分类专栏： markdown 个人学习 vue 文章标签： mavon-editor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44000275/article/details/102854652
版权
本文介绍了在Vue项目中使用mavon-editor进行Markdown内容展示的方法，包括引入编辑器、配置展示参数和页面集成。通过compute属性实现仅显示预览框，避免了处理图片、文本样式和标签的工作，提供了一种便捷的Markdown内容展示方案。
摘要由CSDN通过智能技术生成

前言

上一篇文中说到，mavon-editor要怎么展示出来呢，请看分解

干货内容

  1. 先引入吧
同样是局部调用
import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";

2.配置展示参数
用到了compute

    computed: {
     prop () {
          let data = {
            subfield: false,// 单双栏模式
            defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
            editable: false,
            toolbarsFlag: false,
            scrollStyle: false,
            boxShadow:false//边框
          }
          return data
        }
}

这个参数很重要哦，主要目的是隐藏编辑框只展示预览框，就达到了展示的目的
想要更改更多的样式，可以搜一下，这里只展示一个思路
3.放进页面中

 <mavon-editor
      class="md"
     :value="article_msg.article_content"
     :subfield = "prop.subfield"
     :defaultOpen =
最低0.47元/天 解锁文章
氪精大佬
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中使用markdown文章样式
chengxue_123的博客
11-19 1309
当后台传来的数据是这种格式的怎么处理,看起来很乱,还有标签 1)可以在vue中用v-html 解析html 其他项目则用其他方法 ,此处用的是v-html="articalObj.content" 解析内容 <div class="articalContent" v-html="articalObj.content"> {{ articalObj.content }} </div> 2)上述排版还是看起来不太美观 这个.
VUE工程中使用markdown——引入、编辑、预览
weixin_44000275的博客
11-01 2192
前言 最近想在vue项目中使用markdown编辑器，发现mavon-editor，这个东西挺好的，先记录下来吧！有错的地方希望指出哦 安装 npm install mavon-editor 使用 因为我项目中只有小部分组件要用它，所以用的是局部引入组件的方法，这里以局部注册为例，想要全局注册的可以搜一下，大同小异啦。 组件前加入这两句 import {mavonEditor} from "...
记录mavon-editor在Vue中的使用(编辑及预览功能)
weixin_43401138的博客
10-09 715
【代码】记录mavon-editor在Vue中的使用(编辑及预览功能)
Vue实现Markdown文件内容显示及代码块高亮
最新发布
我就是我是好孩子的博客
07-02 513
用到的插件有： marked、 highlight.js、 github-markdown-css。如果想要给代码块加上行号，可以参考官网：https://highlightjs.org/开始使用(不要忘记在标签内的 class 写入 markdown-body)根据自定义代码块的标签类添加自己想要的样式。安装highlight.js。
markdownitvue是一个功能强大markdown格式显示Vue组件
08-08
markdown-it-vue 是一个功能强大 markdown格式显示 Vue 组件
Vue中使用Markdown
qq_34285557的博客
12-15 1867
Vue中使用Markdown  本篇主要讲解了在Vue项目里如何集成和使用Markdown （mavonEditor）编辑器的，以及如何接入一款非常简洁强大的 Markdown的样式 （github-markdown-css），本博客系统就是使用了 mavonEditor 和 github-markdown-css 下面我将分别讲解它们是如何集成到Vue项目中  1.Vue项目...
Vue 利用markdown 模块 可制作简单的markdown的效果
hangnan315的博客
07-11 433
利用markdown模块 自制效果及属性 其中加了一个展示区可看和不可看功能preview 步骤 ： 搭建好对应的静态样式 下载markdown 模块 npm i markdown -S(这里是局部下载) 利用@input方法中的e e.target.innerText获取输入的内容 markdown.toHtml(获取的内容)----转成markdown格式 标签上添加v-html=“html” 代码如下 markdown 组件 <template> <div class="ma
毕设用——工资管理系统
11-02
综合以上信息，这个工资管理系统项目展示了如何将Java、Vue和SpringBoot技术融合在一起，实现一个完整的Web应用。通过学习和理解这个项目，开发者可以深入掌握前后端分离的开发模式，以及如何运用现代开发工具和框架...
软件工程毕业设计 多多商城 启动 包含个人订单
06-26
【标题】中的“软件工程毕业设计 多多商城 启动 包含个人订单”表明这是一个关于软件工程专业学生的毕业设计项目，主题是构建一个名为“多多商城”的电子商务平台，并且该平台具备启动功能和处理个人订单的能力。...
仙林软件奇侠传——EL比赛.zip
10-01
良好的项目文档可以帮助理解项目结构和功能，参赛者可能使用Markdown或其它工具编写README文件，说明项目的安装、运行和使用方法。 以上只是对《仙林软件奇侠传——EL比赛》可能涵盖的一些知识点的概述。具体到...
基于ssm+vue的水果网上商城.zip
03-30
【描述】：该项目描述简短，但暗示了其核心内容——使用现代Web技术栈来实现一个功能齐全的电子商务应用。SSM框架是Java企业级应用开发的常见选择，提供了模型-视图-控制器（MVC）架构，便于业务逻辑处理和数据访问...
PicGo一个用electronvue构建的图片上传工具
08-08
在实际使用中，PicGo通常与Markdown编辑器配合，当用户在编辑器中复制粘贴图片或者截图后，PicGo会自动捕获这些图片并上传到指定的图床，然后将返回的图片链接插入到编辑器中，使得图片能够顺利地显示在文档中。...
Vue 的 Markdown 扩展 v-markdown
前端栈开发
07-31 873
v-markdown 详细介绍 Vue.js 扩展 v-markdown  使用方法： &lt;template&gt;     &lt;div id="markdown" v-markdown="markdownData"&gt;&lt;/div&gt; &lt;/template&gt;   &lt;script&gt;     export default {        
markdown编辑器创建内容带样式【Vue、mavon-editor】
qq_22841387的博客
01-05 1143
问题描述 因为我现在需要通过mavon-editor创建一个带有样式的题目，所以对这个编辑区进行了初始化 但是有问题的是，左侧的html代码太长了……我想将左侧的源代码收缩，或者只显示需要填写内容的地方 实现过程 我开始的时候大致思路有两个 所见即所得 对于特定的样式进行隐藏 因为这里的样式都是一致的，所以我想直接对用户隐藏，但是传给后端是有值的 但是后面发现这两种实现方式都有些不好实现，于是采用了渲染markdown抽成组件 单独创建组件渲染markdown 因为所有的样式都是一致的，所
【操作】vue-markdown使用
微信公众号: 后端码匠
07-28 1040
完整代码写法 <!-- * @Description: 渲染markdown文件 --> <template> <div id="my-markdown" class="markdown-body"> <vue-markdown :source="md"></vue-markdown> </div> </template> <script> import VueMarkdown from "v
Vue进阶（幺零三）：Markdown 基本语法_vue解析markdown语法
2401_84446610的博客
04-27 1316
Markdown是一种纯文本格式的标记语言。通过简单的标记语法，它可以使普通文本内容具有一定的格式。相比WYSIWYG编辑器因为是纯文本，所以只要支持Markdown的地方都能获得一样的编辑效果，可以让作者摆脱排版的困扰，专心写作。操作简单。WYSIWYG编辑时标记个标题，先选中内容，再点击导航栏的标题按钮，选择几级标题。要三个步骤。而Markdown只需要在标题内容前加即可。需要记一些语法（当然，很简单。有些平台不支持Markdown编辑模式。
vue中实现markdown+代码高亮格式渲染，及内容一键复制功能
weixin_43407997的博客
04-08 5498
涉及组件：vue-markdown、highlight.js、clipboard 完成功能：将数据以markdown格式渲染，代码部分高亮，内容可一键复制。
Vue- Markdown 使用大全
wujing1_1的博客
02-11 7309
文章目录1. MarkDown 解析器1.1 使用md格式文件解析 md->html1.2 字符串解析方案marked 方案1、安装marked2、使用vue-markdown 方案使用1.3 Markdown 优化方案1. markdown 样式方案-github-markdown-css2. 代码高亮方案-highlight.js1) 安装2) 编码3) 使用4) 封装成插件编写插件使用插件3. 代码行数显示方案-highlightjs-line-numbers.js2. Markdown 编辑器
Vue中如何进行Markdown文档展示与解析？
热门推荐
it_xushixiong的博客
06-13 1万+
在Vue项目中，Markdown文档的使用越来越普遍，因此在Vue中进行Markdown文档展示与解析也变得越来越重要。本文介绍了两个第三方库：vue-markdown和markdown-it，它们可以帮助我们展示和解析Markdown文档。除此之外，还介绍了一些配置选项和插件，可以帮助我们定制Markdown解析器的行为。希望本文能够对你有所帮助！
vue3中使用markdown（支持粘贴图片）
07-13
在Vue 3中使用Markdown并支持粘贴图片，您可以使用第三方库，例如`vue-markdown-editor`或`mavon-editor`。 下面是一个简单的示例，展示如何在Vue 3中使用`vue-markdown-editor`来实现Markdown编辑器并支持粘贴图片： 1. 首先，使用npm或yarn安装`vue-markdown-editor`： ``` npm install vue-markdown-editor ``` 2. 在您的Vue组件中，导入并注册`vue-markdown-editor`： ```javascript import VueMarkdownEditor from 'vue-markdown-editor'; export default { components: { VueMarkdownEditor, }, }; ``` 3. 在模板中使用`vue-markdown-editor`： ```html <template> <div> <vue-markdown-editor v-model="markdownText" @imageUpload="handleImageUpload"></vue-markdown-editor> </div> </template> ``` 4. 在Vue组件的`data`中定义`markdownText`，用于存储Markdown文本： ```javascript export default { data() { return { markdownText: '', }; }, }; ``` 5. 在Vue组件中定义处理图像上传的方法`handleImageUpload`： ```javascript export default { methods: { handleImageUpload(file) { // 在这里处理图像上传逻辑 // 可以使用第三方库或自己实现图像上传功能 // 并返回图像URL，然后将其插入到Markdown文本中 }, }, }; ``` 通过上述步骤，您可以在Vue 3中使用`vue-markdown-editor`实现Markdown编辑器，并支持粘贴图片功能。请注意，您可能需要根据您的项目需求进行进一步的配置和样式调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值