md-editor-v3

md-editor-v3官网

npm i md-editor-v3 --save

npm i showdown --save

由于该编辑器输入为markdown格式，要转换成html则需要插件转换，因此使用showdown
md-editor-v3也提供了onHtmlChanged来转换，不过出于贪图逻辑上的便利没有使用

vue3案例

toolbarsExclude为toolbar禁用，去掉不需要的按键

<template><MdEditortoolbarsExclude="['link', 'mermaid', 'katex', 'github', 'save']"v-model="content"@onUploadImg="onUploadImg"></MdEditor><el-button @click="saveData" type="primary">保存</el-button>
</template><script>
import {ref,defineComponent,reactive
} from "vue";
import showdown from "showdown";
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";export default defineComponent({components: { MdEditor },setup() {const state = reactive({content: ''});const onUploadImg = async (files,callback) => {const res = await Promise.all(Array.from(files).map((file) => {return new Promise(async (rev, rej) => {const form = new FormData();form.append("files", file);// 请求图片上传接口 返回网络 url 给 callbackconst res = await Api.uploadFile(form);if (res?.state) {rev(res.value.url);}});}));callback(res.map((item: any) => item));};// 点击页面定义的按钮，保存数据，content为markdown文本内容// 这里没必要使用toolbar的save按键保存文本再点击按钮调用接口const saveData = async () => {const { content } = state;const converter = new showdown.Converter();const data = {content: converter.makeHtml(tmContent),};const res: any = await Api.addData(data);if (res?.state) {ElMessage.success(res?.message ?? "新增成功");}}return {...toRefs(state),onUploadImg,saveData,};},
})
</script>

md-editor-v3 markdown编辑器相关推荐

Vue + editor.Md 双向数据绑定Markdown编辑器（vue-editormd-wrap）
Vue + editor.Md 双向数据绑定组件(vue-editormd-wrap) 先贴上组件的npm主页和源码,如果有下载了开发过程中build版本的用户,将无法使用,请更新为最新版就可以正常使 ...
Markdown编辑器Editor.md插件的使用
官网: Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)https://pandao.github.io/editor.md/index.html配置项 ...
在HTML页面中引用Markdown编辑器（Editor.md）
目录 1.下载Ediotor.md 2.引入Ediotor.md 3.确定Ediotor.md在哪里显示最近写博客项目,用到了Markdown编辑器,这里介绍一款国内好用的Markdown编辑器:E ...
jsp SpringMVC 前台页面集成Markdown编辑器及在页面上实现文档编辑保存预下载
首先在官网下载文档编辑插件插件项目地址:Editor.md - 开源在线 Markdown 编辑器将下载好的的插件项目解压,把解压好的包拷贝到我们项目的 webapp-static静态资源文件下. ...
Markdown编辑器editor.md的使用
目录(?)[-] 一Markdown和editormd简介二editormd的使用 1下载 2简单使用 21在自己的页面上引入相关的css和js代码如下 22在自己的页面中加上DIV 23在同页面中 ...
SpringBoot整合Editor.md实现Markdown编辑器
Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror.jQuery 和 Marked 构建. 文章目录一.技术选型及分支部署二.集成手册 2 ...
editor.md中markdown编辑器的实现
markdown编辑器我觉得用起来非常的方便,故我就想实现一个简单的markdown编辑器 1.下载editor.md插件 git地址:https://github.com/pandao/edit ...
基于JavaWeb的MarkDown编辑器editor.md的使用
1.简介 editor.md是国内开发的开源项目,单纯基于前端JavaScript,可以实现markdown编辑器的所有功能. 主要特性支持通用 Markdown / CommonMark 和 GF ...
VUE3集成Markdown编辑器（http://editor.md.ipandao.com/）
目录背景信息 Editor.md是2015年开源的项目,那时还没有VUE3版本,所以网上也较少VUE3集成Editor.md的示例.不过还是有些大牛分享了集成的方法. 集成方法 1.下载和安装edi ...
开源在线的MarkDown编辑器 --【Editor.md】
开源在线的MarkDown编辑器 --[Editor.md] 下载官网地址: https://pandao.github.io/editor.md/index.html Gitee 地址:https ...

md-editor-v3 markdown编辑器

md-editor-v3

vue3案例

md-editor-v3 markdown编辑器相关推荐

最新文章

热门文章