## 简介 一款使用marked和highlight.js开发的一款markdown编辑器,除常见markdown语法外,支持快捷输入、图片粘贴、代码复制、全屏编辑、预览等功能。 使用起来简单方便,只需几行代码,即可在你的页面上引入一个markdown编辑器,编辑区支持像专业编辑器那样。 编辑器涵盖了常用的markdown编辑器功能,可通过已有属性进行配置,对编辑器功能和样式进行基本的配置,也可根据需求进行深度定制。 ## 特点 - 使用简单,只需要安装npm包,引入项目即可使用,不需要繁琐的初始化配置。 - 方便扩展,根据实际需求,支持常见的功能配置,也可根据实际需求进行深度定制。 - 体积小,加载速度快,npm包删除了highlight.js和codemirror里的依赖。 - 灵活的主题,默认支持四种代码块风格,也可根据实际需求定制自己的主题样式 - 功能强大,支持专业版的编辑器,使用codemirror实现编辑窗口,可识别markdown语法 - 键盘事件监听,如保存、粘贴、回车时上次输入语法判断等 - 可扩展性强,除了提供的属性配置编辑器,也可直接在原有组件基础上进行二次开发 ## 实现思路 通过监听文本输入区域内内容的变化,实时将输入的markdown语法进行编译,并渲染到预览区域。 编辑器大致分为头部菜单栏、左侧内容输入区域、右侧预览区域三个部分。 头部菜单主要为定自定义标题区域和菜单按钮,菜单按钮可通过配置文件进行显示和隐藏;左侧编辑区域,简单版使用textarea开发,满足基本需求, 专业版使用codemirror开发,编辑区域支持手动输入文本和通过头部菜单插入;右侧预览区域可实时预览输入文本,并可通过菜单按钮,进行编辑区域和预览区域的切换。