From c8dd68c82c42ccf071553ed70ec4ee9fac7bab1a Mon Sep 17 00:00:00 2001 From: Jeson Date: Sat, 23 Feb 2019 11:50:11 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 88 ++++++++++++++------------- README_zh-CN.md | 156 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 201 insertions(+), 43 deletions(-) create mode 100644 README_zh-CN.md diff --git a/README.md b/README.md index febb149..99c7dda 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,30 @@ -# 使用 codemirror marked hightlight.js webpack 构建的编辑器 +# A Markdown Editor build with codemirror & marked & hightlight.js & webpack [live-demo](https://editor.easysolves.com/) +[中文文档](./README_zh-CN.md) - -### 常用命令 +### command ```bash -# 安装依赖 +# install dependency npm install -# development: 开启 devServer 带有热更新的开发环境 +# development: open devServer with HMR npm run devServer -# product: 输出内容(生成 dist目录) +# product: build project npm run build ``` -### 使用方式 +### Use Method -Tips: 通过 `webpack` 导出为 `umd` 类型的文件。故支持以下几种方式. +Tips: the code ouput type is `umd`. so you can use some way. in the below -#### 方式1 script 标签使用 +#### Method 1: ` ``` -#### 方式2 npm +#### Method 2: npm ```cmd npm i cool-md-editor --save ``` @@ -59,70 +61,70 @@ require('cool-md-editor/dist/coolMdEditor.css'); new MdEditor({ el: document.getElementById('editor-wrap'), - defaultCon: '# 这是默认内容,任意填写' + defaultCon: '# default content (selectable)' }); ``` -### 说明 +### Notice -#### 初始化参数说明 +#### init config ```html
``` -Tips: 类名 `.cool-md-editor-wrap` 必须有, 主题: `.editor-theme-light` 和 `.editor-theme-dark` 选择一个. +Tips: className `.cool-md-editor-wrap` required, Theme: `.editor-theme-light` & `.editor-theme-dark` . ```js const coolMDEditor = new CoolMDEditor({ - el: '编辑器容器', - defaultCon: '# 这是默认内容' + el: editor Element, + defaultCon: '# default content (selectable)' }); ``` -|属性|类型|说明|默认值|可选值| +|prop|type|desc|default|select| |--|--|--|:--:|:--:| -|`el`| htmlElement | 必需,编辑器dom元素| - | - | -|`defaultCon`|String|非必需, 默认显示的内容| - | - | +|`el`| htmlElement | required, Editor Element| - | - | +|`defaultCon`|String|selectable, default content. markdown string| - | - | -#### 编辑器实例对象属性 +#### CoolMDEditor instance property -|属性|类型|说明|默认值|可选值| +|prop|type|desc|default|select| |--|--|--|:--:|:--:| -|[`$codemirror`](https://github.com/Jesonhu/cool-md-editor#codemirror-属性)| `CodeMirror` 实例对象 | `CodeMirror` 实例对象 | - | - | -| [`$marked`](https://github.com/Jesonhu/cool-md-editor#marked-属性)| `marked` 实例对象 | `marked` 实例对象 | - | - | -| [`$status`](https://github.com/Jesonhu/cool-md-editor#status-属性) | Object | 编辑器当前的状态 | - | - | -| [`_options`](https://github.com/Jesonhu/cool-md-editor#_options-属性) | Object | Cool-MD-Editor 编辑器配置 | - | - | +|[`$codemirror`](https://github.com/Jesonhu/cool-md-editor#codemirror-property)| `CodeMirror` instance | `CodeMirror` instance | - | - | +| [`$marked`](https://github.com/Jesonhu/cool-md-editor#marked-属性)| `marked` instance | `marked` instance | - | - | +| [`$status`](https://github.com/Jesonhu/cool-md-editor#status-属性) | Object | editor status | - | - | +| [`_options`](https://github.com/Jesonhu/cool-md-editor#_options-属性) | Object | Cool-MD-Editor config | - | - | -#### `$codemirror` 属性 +#### `$codemirror` property -|属性|类型|说明|默认值|可选值| +|prop|type|desc|default|select| |--|--|--|:--:|:--:| -| `$editor` | Object | 编辑器实例对象 | - | - | -| 其他属性 | any | `CodeMirror` 实例对象支持的属性和方法，参见[文档](https://codemirror.net/doc/manual.html) | - | - | +| `$editor` | Object | CoolMDEditor instance | - | - | +| otherProperty | any | same with new `CodeMirror`，[codemirror](https://codemirror.net/doc/manual.html) | - | - | -#### `$marked` 属性 +#### `$marked` property -|属性|类型|说明|默认值|可选值| +|prop|type|desc|default|select| |--|--|--|:--:|:--:| -| 全部属性 | any | `marked` 实例对象支持的属性和方法，参见[文档](https://marked.js.org/#/README.md#README.md) | - | - | +| all prop | any | same with new `marked` ，[marked](https://marked.js.org/#/README.md#README.md) | - | - | -#### `$status` 属性 +#### `$status` property -|属性|类型|说明|默认值|可选值| +|prop|type|desc|default|select| |--|--|--|:--:|:--:| -| `isFullscreen` | Boolean | 是否全屏显示, 全屏为 `true` | `false` 或者本地存储设置值| - | -| `isThemeLight` | Boolean | 是否主题为`圣光`, 目前只有 `圣光` 和 `暗黑` 主题 ，根据 `base16` 扩展而来。未来也只考虑两套主题(光/暗) | true 或者本地存储设置值| - | +| `isFullscreen` | Boolean | is fullScreen, fullScreen: `true` | `false`| - | +| `isThemeLight` | Boolean | Theme `light`, only support `light` and `dark` theme ，base `base16` | true| - | -#### `_options` 属性 +#### `_options` property -|属性|类型|说明|默认值|可选值| +|prop|type|desc|default|select| |--|--|--|:--:|:--:| -| `el` | HTMLElement | 编辑器 `dom` 元素| - | - | +| `el` | HTMLElement | editor `dom` element| - | - | | `$tools` | Object | 工具条类名(图标)、title、和绑定的事件等| - | - | | `lang` | Object | 编辑器的语言内容 | 中文语言(zh) | - | | `editor` | Object | 编辑器实例对象 | - | - | diff --git a/README_zh-CN.md b/README_zh-CN.md new file mode 100644 index 0000000..febb149 --- /dev/null +++ b/README_zh-CN.md @@ -0,0 +1,156 @@ +# 使用 codemirror marked hightlight.js webpack 构建的编辑器 + +[live-demo](https://editor.easysolves.com/) + + +### 常用命令 +```bash +# 安装依赖 +npm install + +# development: 开启 devServer 带有热更新的开发环境 +npm run devServer + +# product: 输出内容(生成 dist目录) +npm run build +``` + +### 使用方式 + +Tips: 通过 `webpack` 导出为 `umd` 类型的文件。故支持以下几种方式. + +#### 方式1 script 标签使用 +CDN: ++ CSS: https://unpkg.com/cool-md-editor@版本号/dist/coolMdEditor.css ++ JS: https://unpkg.com/cool-md-editor@版本号/dist/coolMdEditor.js +```html + + ... + + + +
+
+ + + + +``` + + +#### 方式2 npm +```cmd +npm i cool-md-editor --save +``` + +```js +const MdEditor = require('cool-md-editor'); +require('cool-md-editor/dist/coolMdEditor.css'); + +new MdEditor({ + el: document.getElementById('editor-wrap'), + defaultCon: '# 这是默认内容,任意填写' +}); +``` + + + + +### 说明 + +#### 初始化参数说明 +```html +
+``` + +Tips: 类名 `.cool-md-editor-wrap` 必须有, 主题: `.editor-theme-light` 和 `.editor-theme-dark` 选择一个. + +```js +const coolMDEditor = new CoolMDEditor({ + el: '编辑器容器', + defaultCon: '# 这是默认内容' +}); +``` + +|属性|类型|说明|默认值|可选值| +|--|--|--|:--:|:--:| +|`el`| htmlElement | 必需,编辑器dom元素| - | - | +|`defaultCon`|String|非必需, 默认显示的内容| - | - | + + +#### 编辑器实例对象属性 + +|属性|类型|说明|默认值|可选值| +|--|--|--|:--:|:--:| +|[`$codemirror`](https://github.com/Jesonhu/cool-md-editor#codemirror-属性)| `CodeMirror` 实例对象 | `CodeMirror` 实例对象 | - | - | +| [`$marked`](https://github.com/Jesonhu/cool-md-editor#marked-属性)| `marked` 实例对象 | `marked` 实例对象 | - | - | +| [`$status`](https://github.com/Jesonhu/cool-md-editor#status-属性) | Object | 编辑器当前的状态 | - | - | +| [`_options`](https://github.com/Jesonhu/cool-md-editor#_options-属性) | Object | Cool-MD-Editor 编辑器配置 | - | - | + + +#### `$codemirror` 属性 + +|属性|类型|说明|默认值|可选值| +|--|--|--|:--:|:--:| +| `$editor` | Object | 编辑器实例对象 | - | - | +| 其他属性 | any | `CodeMirror` 实例对象支持的属性和方法，参见[文档](https://codemirror.net/doc/manual.html) | - | - | + +#### `$marked` 属性 + +|属性|类型|说明|默认值|可选值| +|--|--|--|:--:|:--:| +| 全部属性 | any | `marked` 实例对象支持的属性和方法，参见[文档](https://marked.js.org/#/README.md#README.md) | - | - | + +#### `$status` 属性 + +|属性|类型|说明|默认值|可选值| +|--|--|--|:--:|:--:| +| `isFullscreen` | Boolean | 是否全屏显示, 全屏为 `true` | `false` 或者本地存储设置值| - | +| `isThemeLight` | Boolean | 是否主题为`圣光`, 目前只有 `圣光` 和 `暗黑` 主题 ，根据 `base16` 扩展而来。未来也只考虑两套主题(光/暗) | true 或者本地存储设置值| - | + +#### `_options` 属性 + +|属性|类型|说明|默认值|可选值| +|--|--|--|:--:|:--:| +| `el` | HTMLElement | 编辑器 `dom` 元素| - | - | +| `$tools` | Object | 工具条类名(图标)、title、和绑定的事件等| - | - | +| `lang` | Object | 编辑器的语言内容 | 中文语言(zh) | - | +| `editor` | Object | 编辑器实例对象 | - | - | + +**TIPS: $tools 结构像下面这样** +```js +{ + name: 'heading', // 名称 + action: toggleHeading, // 绑定的回调函数 + className: 'icon-heading', // 类名 + title: 'Heading', // 标题(会翻译为当前使用的语言) + default: true, // 是否是默认显示的 + index: 2, // 所在组的索引。目前有两大组: `编辑图标` `浏览器设置`。两组使用不同的索引 + isEditTools: true // 是否为 `编辑图标` 组. +} +``` + +#### 编辑器实例对象方法 +|方法名|说明|参数|返回值| +|--|--|--|:--:| +|getMDValue|获取当前Markdown的内容|-|当前Markdown的内容| + + +### 参考资料 ++ [webpack4.x](https://github.com/Jesonhu/webpack4.x-demo) ++ [marked.js简单使用](https://github.com/Jesonhu/codemirror-marked-highlight) ++ inspired(Thx) + + [simplemde-markdown-editor](https://github.com/sparksuite/simplemde-markdown-editor) + + [surmon-china/angular-admin](https://github.com/surmon-china/angular-admin/blob/89ad805a7932c4e06560127bf8820640fc079584/src/app/components/saMarkdownEditor/markdownEditor.component.ts) + + [codimd](https://demo.codimd.org/features?both) + + [md.editor](https://github.com/TeoChoi/md.editor)