diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000000000000000000000000000000000000..f9491a7c220dbe151e6103396718ef779daabb25 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 codechina_dev + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 65dc0f77bea42822b58be572ae27c8ed08f0968f..63c96821cb7fb9de77bb7e460d0238a20e22338e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,85 @@ +# C Markdown 编辑器 + +一款Markdown编辑器组件,支持使用markodwn语法来编写文档,同时支持图片上传等功能(当前版本仅支持单文件上传) + +## 更新记录 + +### v0.1 + +2021-06-07 v0.1 初版更新,支持功能: + +- 自定义主题 +- 单张图片/单个附件上传 +- Markdown & Html 内容获取 + +# 使用 + +1. 通过script标签引入 +```html + +``` +2. 指定需要渲染的容器 +```html +
+``` +3. 初始化实例 +```js +new MdEditor({ + ...options +}) +``` + +# options + +| 属性 | 说明 | 类型 | 默认值 | +| ------ | ------ | ------ | ------ | +| el | 编辑器渲染的容器 | String | "#app" +| themeOptions | 主题颜色配置 | Object | [themeOptions](#themeoptions) +| canAttachFile | 是否可以上传图片 | Boolean | true +| placeholder | placeholder | String | "请输入内容" +| onChange | 获取编辑器markdown及html内容 | Function | function(res) {} [示例](#onchange) +| onUpload | 上传文件钩子函数 | Function | function(file, callback) {} [示例](#onupload) + +# themeOptions + +| 属性 | 说明 | 类型 | 默认值 | +| ------ | ------ | ------ | ------ | +| borderColor | 编辑器边框默认颜色 | String | "#dbdbdb" +| borderColorActive | 编辑器边框激活颜色 | String | "#409eff" +| textColor | 编辑器文字默认颜色 | String | "#303030" +| textColorActive | 编辑器文字激活颜色 | String | "#000" + +# onChange +用于获取markdown内容及编译后的html内容 + + +```js +new MdEditor({ + ..., + onChange: function(res) { + console.log(res) // { text: "...", html: "..." } + } +}) +``` + +# onUpload + +上传或粘贴文件时会触发此函数 + +```js +new MdEditor({ + ..., + onUpload: function(file, callback) { + // do something with file + // ajax + // ... + // 得到图片的url + // 在callback函数中回传图片url,编辑器会将图片链接粘贴到内容里 + callback(url) + } +}) ``` -npm install -npm start -
- - +# License -``` \ No newline at end of file +[MIT](https://codechina.csdn.net/codechina_dev/markdown-editor/-/blob/master/LICENSE)