在 vue3 中使用 markdown 编辑器 md-editor-v3
本文将介绍编辑器的使用和伴随的某些开发技巧。
该编辑器支持的功能有:基础的md编辑、md语法快捷键、记录保存、暗黑主题、图片上传/复制图片上传/裁剪图片上传、格式化内容、浏览器全屏/屏幕全屏、仅预览模式等功能,静待使用。
详细的编辑器api参考:文档。
- 图片裁剪预览
- 编辑器预览
1. 基本使用
这里演示两种环境三种写法:
1.1 npm安装用法
这种方式支持两种写法,除了.vue
模板写法,还有jsx
语法。
安装
yarn add md-editor-v3
.vue
模板基础使用
<template><md-editor v-model="text" /></template><script lang="ts">import { defineComponent } from 'vue';import MdEditor from 'md-editor-v3';import 'md-editor-v3/lib/style.css';export default defineComponent({components: { MdEditor },data() {return { text: '' };}});</script>
jsx
语法基础使用
import { defineComponent, ref } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';export default defineComponent({name: 'MdEditor',setup() {const text = ref('');return () => (<MdEditor modelValue={text.value} onChange={(v: string) => (text.value = v)} />);}
});
1.2 script标签引入用法
链接可前往https://cdn.jsdelivr.net搜索md-editor-v3
。
<!--添加样式-->
<link href="https://cdn.jsdelivr.net/npm/md-editor-v3@1.2.0/lib/style.css" rel="stylesheet" />
<!--引入vue3-->
<script src="https://cdn.jsdelivr.net/npm/vue@3.1.5/dist/vue.global.prod.min.js"></script>
<!--引入组件-->
<script src="https://cdn.jsdelivr.net/npm/md-editor-v3@1.2.0/lib/md-editor-v3.umd.js"></script>
注册组件
const App = {data() {return {text: 'Hello Editor!!'};}
};Vue.createApp(App).use(MdEditorV3).mount('#md-editor-v3');
使用组件
<div id="md-editor-v3"><md-editor-v3 v-model="text" />
</div>
2. 渲染内容
该编辑器使用marked
解析md
为html
,没有扩展语法。
通常来讲,编辑内容存储为md
格式,渲染内容时,通过marked
解析为html。
2.1 默认渲染
从1.3.0
版本后,编辑器支持了previewOnly
功能,可以直接使用编辑器预览文章,没有bar、编辑等等。
<template><md-editorv-model="text"previewOnly/>
</template><script lang="ts">
import { defineComponent } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';export default defineComponent({components: { MdEditor },data() { return { text: '## 我只会显示预览内容' }; }
});
</script>
2.2 主动解析演示
这种方式用于保存md
,然后自行解析md
内容。
import marked from 'marked';// 代码高亮
import hljs from 'highlight.js';
// 自选代码高亮样式
import 'highlight.js/scss/atom-one-dark.scss';// 用于记录标题数,根据业务代替
let count = 0;
// 记录标题内容
const headstemp = [];// marked设置
const rendererMD = new marked.Renderer();// 调整标题内容
rendererMD.heading = (text, level) => {headstemp.push({ text, level });count++;return `<h${level} id="heading-${count}"><span class="h-text">${text}</span></h${level}>`;
};// 设置图片内容,统一显示一张缓存图,用于懒加载~
rendererMD.image = (href, _, text) =>`<img data-src="${href}" src="/cos/2020/1211175603.png" alt="${text}" >`;marked.setOptions({highlight(code) {return hljs.highlightAuto(code).value},renderer: rendererMD
});// 这里的html就是插入到页面的元素文本了
const html = marked('## md内容');
2.3 标题导航实现
上面的例子headstemp
记录了解析过程中的所有标题,作用是借助UI库的组件Anchor
,构建一个标题导航。
下面演示一个基于ant-design-vue
的版本,如果你使用的UI库是类似的锚点组件,那么代码将只需要小改动即可。代码使用jsx
语法,vue
模板语法请自行分离代码~
Recursive.tsx 导航中的链接组件
import { Anchor } from 'ant-design-vue';
import { defineComponent, PropType } from 'vue';const { Link } = Anchor;export interface Head {text: string;level: number;
}export interface TocItem extends Head {anchor: string;children?: Array<TocItem>;
}const Recursive = defineComponent({props: {tocItem: {type: Object as PropType<TocItem>,default: () => []}},setup({ tocItem }) {return (<Link href={`#${tocItem.anchor}`} title={tocItem.text}>{tocItem.children &&tocItem.children.map((item) => <Recursive key={item.anchor} tocItem={item} />)}</Link>);}
});export default Recursive;
Topicfy.tsx 用于生成整个导航内容
import { Anchor } from 'ant-design-vue';
import { computed, defineComponent, PropType, ref, watch } from 'vue';import Recursive, { Head, TocItem } from './Recursive';const Topicfy = defineComponent({props: {// 解析得到的标题列表heads: {type: Array as PropType<Array<Head>>}},setup(props) {const topics = computed(() => {const tocItems: TocItem[] = [];// 标题计数器let count = 0;const add = (text: string, level: number) => {count++;const item = { anchor: `heading-${count}`, level, text };if (tocItems.length === 0) {// 第一个 item 直接 pushtocItems.push(item);} else {let lastItem = tocItems[tocItems.length - 1]; // 最后一个 itemif (item.level > lastItem.level) {// item 是 lastItem 的 childrenfor (let i = lastItem.level + 1; i <= 6; i++) {const { children } = lastItem;if (!children) {// 如果 children 不存在lastItem.children = [item];break;}// 重置 lastItem 为 children 的最后一个 itemlastItem = children[children.length - 1];if (item.level <= lastItem.level) {// item level 小于或等于 lastItem level 都视为与 children 同级children.push(item);break;}}} else {// 置于最顶级tocItems.push(item);}}};props.heads?.forEach((item) => {add(item.text, item.level);});return tocItems;});return () => (<Anchor affix={false} showInkInFixed={true}>{topics.value.map((item) => (<Recursive key={item.anchor} tocItem={item} />))}</Anchor>);}
});export default Topicfy;
该组件是19年参考了网络上的实现完成的,非本人完全原创,react版本参考Topicfy
2.4 获取html代码
编辑器考虑到了可能后端不存储md
格式的文本,而是html
内容,所以提供了onHtmlChanged
方法,用于编辑内容变化后,marked
编译了内容的回调,入参即是html
内容。
<template><md-editorv-model="text"@onHtmlChanged="saveHtml"/>
</template><script lang="ts">
import { defineComponent } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';export default defineComponent({components: { MdEditor },data() { return { text: '' }; },methods: { saveHtml(h: string) { console.log(h) }}
});
</script>
jsx
语法相同。
3. 编辑器的功能演示
3.1 扩展库链接
编辑器扩展内容大多使用了cdn
,考虑了无外网情况,支持了内网链接扩展,演示(假设外部库都在根目录下):
<template><md-editorv-model="text"highlightJs="/highlight.min.js"highlightCss="/atom-one-dark.min.css"prettierCDN="/standalone.js"prettierMDCDN="/parser-markdown.js"cropperJs="/cropper.min.js"cropperCss="/cropper.min.css"/>
</template><script lang="ts">
import { defineComponent } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';export default defineComponent({components: { MdEditor },data() { return { text: '' }; }
});
</script>
v1.2.0版本目前支持上述链接,图标链接将在后续补丁中添加。
3.2 工具栏自定义
默认的全部工具栏,并且每个功能都绑定了快捷键,如果需要选择性显示工具栏,提供了两个api:toolbars
和toolbarsExclude
,前者显示数组中的全部,后者屏蔽数组中的全部,后者的权重更大。下面是个参考:
案例不显示github
按钮
<template><md-editorv-model="text":toolbars="toobars"/><md-editorv-model="text":toolbarsExclude="toolbarsExclude"/>
</template><script lang="ts">
import { defineComponent } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';export default defineComponent({components: { MdEditor },data() {return {text: '',toobars: ['bold', 'underline', 'italic', 'strikeThrough','sub','sup','quote','unorderedList', 'orderedList', 'codeRow','code', 'link', 'image', 'table', 'revoke','next', 'save', 'pageFullscreen', 'fullscreen','preview', 'htmlPreview'],toolbarsExclude: ['github']};}
});
</script>
3.3 扩展语言
编辑器默认内置了中文和英文,并且两者都可以通过扩展api覆盖,该功能主要用来设置内容提示,比如弹窗中的标题等。
扩展一门语言,我们取名为zh-NB
<template><md-editorv-model="text":language="language":languageUserDefined="languageUserDefined"/>
</template><script lang="ts">
import { defineComponent } from 'vue';
import MdEditor, { StaticTextDefaultValue } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';const languageUserDefined: { 'zh-NB': StaticTextDefaultValue } = {'zh-NB': {toolbarTips: {bold: '加粗',underline: '下划线',italic: '斜体',strikeThrough: '删除线',title: '标题',sub: '下标',sup: '上标',quote: '引用',unorderedList: '无序列表',orderedList: '有序列表',codeRow: '行内代码',code: '块级代码',link: '链接',image: '图片',table: '表格',revoke: '后退',next: '前进',save: '保存',prettier: '美化',pageFullscreen: '浏览器全屏',fullscreen: '屏幕全屏',preview: '预览',htmlPreview: 'html代码预览',github: '源码地址'},titleItem: {h1: '一级标题',h2: '二级标题',h3: '三级标题',h4: '四级标题',h5: '五级标题',h6: '六级标题'},linkModalTips: {title: '添加',descLable: '链接描述:',descLablePlaceHolder: '请输入描述...',urlLable: '链接地址:',UrlLablePlaceHolder: '请输入链接...',buttonOK: '确定',buttonUpload: '上传'},// v1.2.0新增clipModalTips: {title: '裁剪图片上传',buttonUpload: '上传'},// v1.1.4新增copyCode: {text: '复制代码',tips: '已复制'}}
};export default defineComponent({components: { MdEditor },data() {return {text: '',language: "zh-NB",languageUserDefined};}
});
</script>
如果key = ‘zh-CN’,就可以实现中文覆盖,依次类推。
3.4 主题切换
这一块相对比较简单了,内置了暗黑主题和默认主题,通过theme
api切换,demo如下:
<template><md-editorv-model="text":theme="theme"/>
</template><script lang="ts">
import { defineComponent } from 'vue';
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';export default defineComponent({components: { MdEditor },data() {return {text: '',theme: 'dark'};}
});
</script>
4. 结尾
更多的更新请关注:md-editor-v3
在 vue3 中使用 markdown 编辑器 md-editor-v3相关推荐
- 在HTML页面中引用Markdown编辑器(Editor.md)
目录 1.下载Ediotor.md 2.引入Ediotor.md 3.确定Ediotor.md在哪里显示 最近写博客项目,用到了Markdown编辑器,这里介绍一款国内好用的Markdown编辑器:E ...
- 在vue3中使用markdown编辑器
- 开源在线的MarkDown编辑器 --【Editor.md】
开源在线的MarkDown编辑器 --[Editor.md] 下载 官网地址: https://pandao.github.io/editor.md/index.html Gitee 地址:https ...
- html页面嵌入markdown,在页面中插入Markdown编辑器
前端在页面中插入Markdown编辑器: 1.官网下载:http://pandao.github.io/editor.md/ 2.你的html: Simple example - Editor.md ...
- React中使用Markdown编辑器
前言 因为之前写过一个自己的博客,其中编辑文章使用的是富文本编辑器,后来用到Markdown编辑,感觉要比富文本更好用,这里简单记录一下如何在React中添加Markdown编辑器. 一 安装 这里我 ...
- PHP项目中使用 Markdown编辑器
个人站点 :http://oldchen.iwulai.com/ Markdown在技术圈越来越受欢迎,今天为大家带来一款国内开源的比较好用的Markdown编辑器--editor.md. 在这次项目 ...
- csdn中的markdown编辑器如何快速复制粘贴图片?
原文地址:https://www.fang1688.cn/study-code/1434.html 前言 我们在使用csdn的markdown编辑器复制其它网站图片,按住ctrl+C复制选择图片,然后 ...
- drupal8中安装markdown编辑器
安装以下几个模块 Markdown Libraries API SimpleMDE Markdown Editor 安装SimpleMDE依赖的组件 安装composer php -r "c ...
- vue中使用 markdown 编辑器编写图文消息,并在小程序中展示。
需求是做个类似微信公众号那样的图文编辑推广,文章最后要在小程序里面浏览. 开始找到个富文本编辑器'vue-quill-editor' 可以使用,最后出来的内容是html格式,虽然小程序里面可以转译过来 ...
最新文章
- jsPlumb.jsAPI阅读笔记(官方文档翻译)
- linux双网卡驱动配置,linux网卡驱动安装、双网卡绑定
- Linux脚本实战之猜数字
- MyFaces Tree2控件使用 -----From http://blog.163.com/net_wood/blog
- 玩转CSS3(一)----CSS3实现页面布局
- 机器学习--组合分类方法之AdaBoost算法
- 怎样修复电动车电瓶。
- Excel工作表保护在哪里撤销?
- 破解获取微信小程序源代码
- 指纹识别 源代码中带有大量注解
- chrome 浏览器地址栏快速搜索设置
- BITCS2016程序设计 | 9. 一夜发白 《千字文》
- 微信公众号开发之生成并扫描带参数的二维码(无需改动)
- js渲染10万数据列表,不阻塞UI
- jQuery设置attr()对样式属性失效的原因
- 通用知识图谱VS行业知识图谱
- 服务器存储面临的难题
- ResNet 论文理解含视频
- “零糖”沦为骗局,“轻盐”却成风口?
- 需求ROI评估:B端产品经理怎么做需求优先级排序?
热门文章
- 虚拟现实技术vrml“动画交互“——旋转门练习
- mac重装系统后sudo命令不好使
- 【python数据分析实战】国产烂片深度揭秘(2)——什么题材的电影烂片最多?
- shell脚本中if用法
- 聚宽 get_price 多个股票数据_量化交易入门教程,获取典型常用数据
- macOS上如何通过iCloud Drive便利地同步文稿
- 西电C语言程序设计实验之位图图像文件缩放
- 浅谈API开发安全之生成sign(一)
- nginx配置反向代理过程中遇到的坑 配置好之后报404问题
- 交通信号中信号相位、信号阶段的简单示例