vue-markdown/docs/introduce.md

1.9 KiB
Raw Blame History

简介

一款使用marked和highlight.js开发的一款markdown编辑器除常见markdown语法外支持快捷输入、图片粘贴、代码复制、全屏编辑、预览等功能。

使用起来简单方便只需几行代码即可在你的页面上引入一个markdown编辑器编辑区支持像专业编辑器那样。

编辑器涵盖了常用的markdown编辑器功能可通过已有属性进行配置对编辑器功能和样式进行基本的配置也可根据需求进行深度定制。

特点

  • 使用简单只需要安装npm包引入项目即可使用不需要繁琐的初始化配置。
  • 方便扩展,根据实际需求,支持常见的功能配置,也可根据实际需求进行深度定制。
  • 体积小加载速度快npm包删除了highlight.js和codemirror里的依赖。
  • 灵活的主题,默认支持四种代码块风格,也可根据实际需求定制自己的主题样式
  • 功能强大支持专业版的编辑器使用codemirror实现编辑窗口可识别markdown语法
  • 键盘事件监听,如保存、粘贴、回车时上次输入语法判断等
  • 可扩展性强,除了提供的属性配置编辑器,也可直接在原有组件基础上进行二次开发

实现思路

通过监听文本输入区域内内容的变化实时将输入的markdown语法进行编译并渲染到预览区域。

编辑器大致分为头部菜单栏、左侧内容输入区域、右侧预览区域三个部分。 头部菜单主要为定自定义标题区域和菜单按钮菜单按钮可通过配置文件进行显示和隐藏左侧编辑区域简单版使用textarea开发满足基本需求 专业版使用codemirror开发编辑区域支持手动输入文本和通过头部菜单插入右侧预览区域可实时预览输入文本并可通过菜单按钮进行编辑区域和预览区域的切换。