vue3最简单的在线md编辑器

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>

vue3最简单的在线md编辑器相关推荐

nodejs+express+mysql 之简单的在线HTML编辑器
1.从原网站下载源码:http://kindeditor.net/demo.php 2.将kindeditor放到项目内,使其能够完成基本功能 1).将plugins.themes.lang.kind ...
CSDN产品公告：APP新增大厂在线刷题功能、博主排名规则更新、MD编辑器优化
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blogdev.blog.csdn.net/article/deta ...
在线html编辑器---htmlarea 附件,在线HTML编辑器htmlarea简单使用
在线HTML编辑器htmlarea简单使用作者: 胡立新下例是在JSP文件上运用HTML在线编辑器,使用了struts的标签.在其它环境下应作适当修改. 一.准备: 二.定义javascript ...
CSDN 简单的MD编辑器-基础知识
学长让我写博客学习c语言,写了几篇,但是总觉得文章界面不好看,然后找到一些资料,那就开始新的界面吧! 开始你的MD编辑器吧!!(妈的编辑器) 复制,直接应用 > 块引用 @[TOC] # ...
简单的在线编辑器，处理JSSC ver2.0的一个缺点
最近在JE论坛上面看到一位学生朋友实现的代码着色的JS代码,下载下来试用一下,先自己写了一个非常简单的简单的在线编辑器,类似于JE的"BBCoce编辑器": // 简单的在线编辑器 ...
CSDN产品公告第1期：APP新增大厂在线刷题功能、博主排名规则更新、MD编辑器优化
用户为本,让用户成为CSDN产品的主人,为此,我们特开设了CSDN产品公告栏,切实听取大家对新功能的反馈,定期抽取部分反馈用户赠送精美礼品一份! 在过去一周,CSDN研发团队又上线了哪些功能呢?一起看 ...
【前端】使用ffmpeg+vue3实现简单的视频编辑器
使用ffmpeg+vue3实现简单的视频编辑器主要依赖 '@ffmpeg/ffmpeg','vue' 实现功能视频转码,添加文字水印,添加图片水印,处理进度条和用时,文件编码信息,生成序列帧. 界 ...
在线markdown编辑器_Beegit初探：协作在线Markdown编辑器
在线markdown编辑器 Some time ago, I wrote about the current state of MarkDown editors. It was a disappoin ...
基于jquery的bootstrap在线文本编辑器插件Summernote （转）
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

vue3最简单的在线md编辑器

vue3最简单的在线md编辑器相关推荐

最新文章

热门文章