前言
本文的Markdown编辑器主要是Monacoeditor+markdown-it实现markdown编辑以及预览,目前实现了:
文章复制功能;Markdown转html基本样式;自定义table插件以及h标签插件;基于腾讯云云开发cloudBase的图片拖拽上传功能;接下来我将针对Monacoeditor、markdown-it的使用以及相应功能点进行展开
前期准备
根据Markdown的基本布局,在UI层,我们将Markdown布局方面主要划分为:菜单栏、编辑区、预览区:
技术选型
Monacoeditor
“MonacoEditor是一款开源的在线代码编辑器。它是VSCode的浏览器版本
在构建初期其实有想过使用文本框作为编辑区,但是考虑到我们在书写的时候编辑区也应该有自己的样式,因此在多次衡量之后,决定采用VScode的浏览器版本-----Monacoeditor。接下来我们对Monacoeditor进行使用
webpack.config.js
下载monaco-editor-webpack-plugin插件解决代码高亮;本项目为了减少引入,只支持markdown的高亮,但其实可以支持XML,PHP,C#,C++,Razor,Markdown,Diff,Java,VB,CoffeeScript,Handlebars,Batch,Pug,F#,Lua,Powershell,Python,Ruby,SASS,R,Objective-C……高亮
//webpack.config.js引入插件constMonacoWebpackPlugin=require(monaco-editor-webpack-plugin);//webpack.config.js引入插件//plugins:newMonacoWebpackPlugin({//availableoptionsaredocumentedat