
vue3项目中使用markdown编辑器(v-md-editor)
记录一下项目中使用markdown编辑器的流程本项目使用的是v-md-editor,它是基于 Vue 开发的 markdown 编辑器组件2. 使用/plugins/index.ts/main.ts解决方法一定要保证此文件在tsconfig.json中有引入4. 创建MdEditor组件/components/MdEdtior/index.vue父组件使用markdown内容预览解析后的html文
·
前言
记录一下项目中使用markdown编辑器的流程
本项目使用的是v-md-editor,它是基于 Vue 开发的 markdown 编辑器组件
基本使用
1.安装
# 使用 npm
npm i @kangc/v-md-editor@next -S
# 使用 yarn
yarn add @kangc/v-md-editor@next
2. 使用
不太推荐直接在main.ts中引入,会显得整个文件特别臃肿
- 新建plugins文件夹,里面可以放各种需要引入的第三方插件
/plugins/mdEditor/index.ts
import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
//使用的是vuepress主题
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
import Prism from 'prismjs'
VueMarkdownEditor.use(vuepressTheme, {
Prism,
})
export default VueMarkdownEditor
- /plugins/index.ts
import { App } from 'vue'
import VueMarkdownEditor from './mdEditor'
const pluginList = [
VueMarkdownEditor
... // 如果有使用到别的插件,引入放在这个位置就好
]
const plugins = {
install (app: App<Element>) {
// 批量注册插件 改用自动引入
Object.entries(pluginList).forEach(([, v]) => {
app.use(v)
})
}
}
export default plugins
- /main.ts
import { createApp } from 'vue'
import plugins from '@/plugins'
const app = createApp(App)
app.use(router)
.use(plugins) // 这里使用之前引入的插件
.use(piniaStore)
.use(i18n)
.use(directives)
.mount('#app')
在ts中引入可能会遇到报错的问题
例如: Could not find a declaration file for module ‘@kangc/v-md-editor/lib/theme/vuepress.js’.
解决方法
// src/typing/shims.d.ts
declare module '@kangc/v-md-editor/lib/theme/vuepress.js';
一定要保证此文件在tsconfig.json中有引入
4. 创建MdEditor组件
/components/MdEdtior/index.vue
<template>
<v-md-editor
:placeholder="placeholder"
:disabled-menus="[]"
v-model="newValue"
:height="height"
@change="handleChange"></v-md-editor>
</template>
<script lang="ts" setup>
import { getLang } from '@/utils/auth'
import enUS from '@kangc/v-md-editor/lib/lang/en-US'
import zhEn from '@kangc/v-md-editor/lib/lang/zh-CN'
import VueMarkdownEditor from '@kangc/v-md-editor'
const lang = getLang() === 'zh-cn' ? 'zh-CN' : 'en-US'
const langObj = getLang() === 'zh-cn' ? zhEn : enUS
VueMarkdownEditor.lang.use(lang, langObj)
// ......上面这些是多语言配置,如果用不到切换语言请忽略 ......
interface Props {
modelValue: string
height?: string // 编辑器的高度
placeholder?: string
}
interface EmitEvent {
(e: 'update:modelValue', params: string): void
}
const props = withDefaults(defineProps<Props>(), {
height: '500px',
placeholder: '请输入内容'
})
const emit = defineEmits<EmitEvent>()
const newValue = computed({
get() {
return props.modelValue
},
set(value: string) {
emit('update:modelValue', value)
}
})
// 内容变化时触发的事件。text 为输入的内容,html 为解析之后的 html 字符串。
const handleChange = (text: string, html: string) => {
// console.log(JSON.stringify(text))
console.log(html)
// 如果有需要这些值,可以传回给父组件
}
</script>
<style lang="scss" scoped></style>
- 父组件使用
<template>
<div class="p10">
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>v-md-editor编辑器</span>
</div>
</template>
<md-editor v-model="text" />
</el-card>
</div>
</template>
<script lang="ts" setup>
const text = ref('')
</script>
- markdown内容预览
<template>
<v-md-editor :model-value="previewData" mode="preview"></v-md-editor>
</template>
<script lang="ts" setup>
const previewData = 这里是要预览的markdown数据
</script>
- 解析后的html文本预览
<template>
<v-md-editor :model-value="previewData" mode="html"></v-md-editor>
</template>
<script lang="ts" setup>
const previewData = 这里是要预览的解析后的html文本
</script>
页面效果
其他
更多配置,请移步v-md-editor官网
更多推荐
所有评论(0)