Vue脚手架Typescript使用Markdown编辑器v-md-eidtor记录

一、需求描述

前端项目需要写博客，所以引入Markdown编辑器v-md-editor来对博客内容进行解析与编辑

二、记录

v-md-editor官方文档

1、v-md-editor进阶版CodeMirror的引入

main.ts

//Markdown编辑器配置
import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
// Prismjs
import Prism from 'prismjs';
// 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(vuepressTheme, {
    
    
	Prism: Prism,
});
const app = createApp(App)
appuse(VMdEditor).mount('#app')

2、v-md-editor其他插件的引入

main.ts

//表情插件
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';
//待办列表插件
import createTodoListPlugin from '@kangc/v-md-editor/lib/plugins/todo-list/index';
import '@kangc/v-md-editor/lib/plugins/todo-list/todo-list.css';
VMdEditor.use(createEmojiPlugin());
VMdEditor.use(createTodoListPlugin());

Tips:
如果引入报错，在确认安装没问题的情况下
在shims-vue.d.ts里面输入下面的语句一般能解决
报错说缺什么就写什么

declare module '@kangc/v-md-editor/lib/theme/vuepress.js'
declare module '@kangc/v-md-editor/lib/codemirror-editor'
declare module '@kangc/v-md-editor/lib/plugins/emoji/index'
declare module '@kangc/v-md-editor/lib/plugins/emoji/index'
declare module '@kangc/v-md-editor/lib/plugins/todo-list/index'
declare module 'codemirror'
declare module 'prismjs'

3、重新设计博客编辑页

<v-md-editor
		v-model="blog.content"
		:disabled-menus="[]"
		@upload-image="handleUploadImage"
		@save="save"
		left-toolbar="undo redo clear | bold italic h strikethrough hr | ul ol todo-list quote code emoji tip | table image link | save" 
		height="660px"
		:toc-nav-position-right="true"
	>
	</v-md-editor>

left-toolbar就是功能栏的左边设计
想要什么就写进去就行了

	:disabled-menus="[]"
	@upload-image="handleUploadImage"

disabled-menus="[]"可以让图片的功能增加一个可以上传本地图片、拖拽图片、复制图片就上传到后端的功能
@upload-image="handleUploadImage"就是只出发图片上传的时候调用的方法

const handleUploadImage = (event, insertImage, files) => {
    
    
		var formObj = new FormData();
		formObj.append('file', files[0]);
		$.ajax({
    
    
			url: proxy.$store.state.url + '/uploadBlogImage',
			async: false,
			type:"post",
			data:formObj,
			dataType:'json',
			contentType: false, //不设置内容类型
			processData: false,
			success: function(res){
    
    
				proxy.$message.success(res.msg);
				insertImage({
    
    
					url: proxy.$store.state.url + res.imageurl,
					desc: '',
				    width: 'auto',
				    height: 'auto',
				});
			},
		})
	}

insertImage()用来上传成功之后通过后端传回来的图片地址添加到博客里面进行显示

后端接收方式：

@RestController
@CrossOrigin
public class BlogController {
    
    
	
	@Resource
	BlogService blogService;
	
	@PostMapping("uploadBlogImage")
    public Result uploadBlogImage(@RequestParam("file") MultipartFile file) throws IOException {
    
    
        return blogService.uploadBLogImage(file);
    }
	
}

我的成果

加油奥里给！