vue md编辑器_vue代码编辑器

vue md编辑器_vue代码编辑器vue3简单的md编辑器

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1、下载依赖marked
yarn add marked
2、使用原理
marked会将字符串解析成一个md格式的html字符串,然后我们渲染他就可以了。

这里是简单示例,额外功能需要自行添加

<template>
    <div class="left">
        <p>在线转换html</p>
        <textarea class="edit" v-model="mdtext" @input="mdchage"></textarea>
    </div>
    <div class="right">
        <p>md文档编辑器</p>
        <div id="show" ref="show"></div>
    </div>
</template>


<script setup>
import { marked } from 'marked'
import { onMounted, ref, computed } from 'vue'
let mdtext = ref('')
let show = ref(null)

let mdchage = () => {
    //将字符串中的内容编译成md语法
    let html_md = marked.parse(mdtext.value)
    console.log(html_md);

    //将md语法渲染到盒子中
    show.value.innerHTML = html_md
}
</script>

<style lang="scss" scoped>
.left {
    height: 80%;
    width: 40%;

    .edit {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }
}

.right {
    height: 80%;
    width: 40%;

    #show {
        width: 100%;
        height: 100%;
        border-radius: 1%;
        border: 1px solid;
    }
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/190320.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 什么是数据安全,为什么需要保证数据安全「建议收藏」

    什么是数据安全,为什么需要保证数据安全「建议收藏」WHAT何为数据安全?数据安全指的是用技术手段识别网络上的文件、数据库、帐户信息等各类数据集的相对重要性、敏感性、合规性等,并采取适当的安全控制措施对其实施保护等过程。与边界安全、文件安全、用户行为安全等其他安全问题相同,数据安全并非是唯一一种能提升信息系统安全性的技术手段,也不是一种能全面保障信息系统安全的技术手段。它就是一种能够合理评估及减少由数据存储所带来的安全风险的技术方式。为什么需…

  • Django 安装_启动redis的命令

    Django 安装_启动redis的命令安装redis1.使用Homebrew安装Redisbrewinstallredis执行上述命令后出现以下内容,则成功安装Downloadfailed:https://mirrors.

  • WebView中的视频全屏的相关操作

    WebView中的视频全屏的相关操作

    2021年11月30日
  • 电脑wlan和以太网怎么桥接_电脑无线网和以太网桥接

    电脑wlan和以太网怎么桥接_电脑无线网和以太网桥接YouneedtobridgetheinterfacewhichishavinganIPwiththewifimodule.1)hostapd-iwlan0/etc/hostapd.conf-B2)ifconfigwlan0up3)ifconfigeth00.0.0.04)ifconfigwlan00.0.0.05)…

  • Scrapy爬虫框架_nodejs爬虫框架对比

    Scrapy爬虫框架_nodejs爬虫框架对比一、爬虫框架Scrapy的整体架构:ScrapyEngine(引擎):负责Spider、ItemPipeline、Downloader、Scheduler中间的通讯、信号、数据传递等。Spider(爬虫):负责处理所有Responses,从中分析提取数据,获取Item字段需要的数据,并将需要跟进的URL提交给引擎,再次进入Scheduler(调度器)。(DTO数据传输对象)Scheduler(调度器):它负责接受引擎发送过来的Request请求,并按照一定的方式进行整理排列,入队,当引.

  • c++ 二维vector_vector如何重置

    c++ 二维vector_vector如何重置初始化二维vector,为r*c的vector,所有值为0.1.直接用初始化方法(刚开始没想到)vector>newOne(r,vector(c,0));2.用resize()来控制大小vector>res;res.resize(r);//r行for(intk=0;k

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号