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)


相关推荐

  • pycharm安装配置环境_如何在pycharm中配置anaconda

    pycharm安装配置环境_如何在pycharm中配置anacondapycharm安装及配置(anaconda)pycharm的下载与安装jetbrains官网开发者工具找到pycharm下载专业版等待下载完成anaconda的下载与安装anaconda官网 滑到页面最下方选择合适的版本,开始下载双击开始安装这里选择所有用户或者仅自己都行这里勾选上添加环境变量,就不用自己配置了查看开始菜单安装成功安装配置pycharm双击以后再重启,直接finish启动pycharm这里需要进行一下激活,我这里就用

  • Android之Activity生命周期浅析(一)「建议收藏」

    Android之Activity生命周期浅析(一)「建议收藏」Activity作为四大组件之一,出现的频率相当高,基本上我们在android的各个地方都能看见它的踪影,因此深入了解Activity,对于开发高质量应用程序是很有帮助的。今天我们就来详细地聊聊Activity的生命周期,以便我们在以后的开发中能如鱼得水。一、初识Activity  在日常应用中Activity是与用户交互的接口,它提供了一个用户完成相关操作的窗口。当我们在开发中创建Activit

  • 项目管理办法_企业项目管理

    项目管理办法_企业项目管理本文档的目的是为公司各个项目的项目管理工作提供指导,帮助项目组其他成员了解项目管理的要素,明确项目管理活动中的角色职责、协作流程、作业表单格式要求。本文档将规定项目管理中各角色的职责和权利,在进行协作

  • web安全笔记_web攻防之业务安全实战指南

    web安全笔记_web攻防之业务安全实战指南writeinmydormitoryat‏‎9:47:05Friday,April7,2017bygiantbranch(一个当初想横跨web跟二进制的菜鸡)————致即将毕业的自己。这是我的安全之路系列第一篇,敬请期待第二篇:《我的安全之路——二进制与逆向篇》总览大一:基本都在学习学校的课程,C语言,C++,高数啊,不过分数还可以,在大一复习周还在php3小时光速入门呢大二

  • Web 前端开发学习资料整理

    以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站、书籍)。我只是闲来无事整理一下,如有不足,嘴下留情..毕竟分享不是一件坏事,共同学习…一、语言基础(以书和网站为主)1.HTML&CSS:(1)入门:Codeademy上的html&css课程——在线交互式编程平台,弄清楚基本概念和基本语法w3school上的HTML/CSS教程——

  • 不通过浏览器获取公网 IP

    不通过浏览器获取公网 IP

发表回复

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

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