Draft.js Markdown Shortcuts Plugin 使用教程
1. 项目的目录结构及介绍
draft-js-markdown-shortcuts-plugin/
├── src/
│ ├── index.js
│ ├── constants.js
│ ├── handleBlockType.js
│ ├── handleInlineStyle.js
│ ├── keyCommand.js
│ ├── markdownShortcuts.js
│ ├── utils.js
│ └── __tests__/
├── package.json
├── README.md
└── LICENSE
src/
:包含项目的主要源代码文件。index.js
:插件的入口文件。constants.js
:定义了一些常量。handleBlockType.js
:处理块级元素的逻辑。handleInlineStyle.js
:处理行内样式的逻辑。keyCommand.js
:处理键盘命令的逻辑。markdownShortcuts.js
:Markdown 快捷键的主要逻辑。utils.js
:一些工具函数。__tests__/
:包含测试文件。
package.json
:项目的配置文件,包含依赖、脚本等信息。README.md
:项目的说明文档。LICENSE
:项目的许可证文件。
2. 项目的启动文件介绍
项目的启动文件是 src/index.js
,它是插件的入口文件。该文件导出了插件的主要功能,使得其他项目可以通过导入该文件来使用插件。
import createMarkdownShortcutsPlugin from './markdownShortcuts';
export default createMarkdownShortcutsPlugin;
3. 项目的配置文件介绍
项目的配置文件是 package.json
,它包含了项目的基本信息、依赖、脚本等。以下是该文件的部分内容:
{
"name": "draft-js-markdown-shortcuts-plugin",
"version": "1.0.0",
"description": "A DraftJS plugin for supporting Markdown syntax shortcuts",
"main": "lib/index.js",
"scripts": {
"build": "babel src --out-dir lib",
"prepublish": "npm run build"
},
"dependencies": {
"draft-js": "^0.10.0",
"immutable": "^3.8.1"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}
name
:项目的名称。version
:项目的版本号。description
:项目的描述。main
:项目的入口文件。scripts
:包含一些脚本命令,如build
用于构建项目,prepublish
在发布前执行构建。dependencies
:项目的依赖库。devDependencies
:开发环境的依赖库。