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