Vue3中对v-md-editor编辑器的集成使用

效果展示:

首先安装需要的包

html 复制代码
npm i @kangc/v-md-editor@next -S

在main.js中进行全局配置

javascript 复制代码
import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';

VMdEditor.Codemirror = Codemirror;
VMdEditor.use(githubTheme, {
	Hljs: hljs,
});


app.use(VMdEditor);

写一个编辑器组件:

html 复制代码
<template>
	<VMdEditor v-model="text" height="400px"></VMdEditor>
</template>

<script>
	import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
	export default {
		components: {
			VMdEditor,
		},
		data() {
			return {
				text: '',
			};
		},
	};
</script>

使用组件

html 复制代码
<template>
	<NavBar></NavBar>
	<ContentBase>
		<div class="row">
			<div class="col-3">
				<UserInfo></UserInfo>
			</div>
			<div class="col-9">
				<div class="row-1">
					<div class="markdown">
						<EditorView></EditorView>
					</div>
				</div>
				<div class="row-1">
					<UserPosts></UserPosts>
				</div>
			</div>

		</div>
	</ContentBase>
</template>

<script>
	import NavBar from "../components/NavBar.vue";
	import ContentBase from "../components/ContentBase.vue";
	import UserInfo from "../components/UserInfo.vue";
	import UserPosts from "../components/UserPosts.vue";
	import EditorView from "../components/EditorView.vue";
	export default {
		name: "UserProfile",
		components: {
			NavBar,
			ContentBase,
			UserInfo,
			UserPosts,
			EditorView,
		},
		data() {
			return {

			};
		},
		methods: {},
	};
</script>

<style scoped>
	EditorView {
		height: 400px;
		width: 200px;
	}

	.markdown {
		height: 400px;
		/* width: 200px; */
	}
</style>

其他的编辑器精美设计请移步官方文档:

https://github.com/imzbf/md-editor-v3/blob/develop/README-CN.md

相关推荐
琹箐几秒前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠5 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农5 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛30 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵35 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
GDAL41 分钟前
vscode 插件开发activityba
vscode·编辑器
learn_coder43 分钟前
在vscode中和obsidian中使用Mermaid
ide·vscode·编辑器
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习1 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器