Merge pull request #6 from Jesonhu/develop

Develop
Jesonhu · Mar 26, 2020 · 070e6d1 · 070e6d1
2 parents c8dd68c + 3925dd8
commit 070e6d1
Show file tree

Hide file tree

Showing 34 changed files with 969 additions and 207 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-test
+test
+debug
diff --git a/README_zh-CN.md b/README_zh-CN.md
@@ -8,21 +8,23 @@
 # 安装依赖
 npm install
 
-# development: 开启 devServer 带有热更新的开发环境
-npm run devServer
+# development: 开启带有热更新的开发环境
+npm run dev
 
 # product: 输出内容(生成 dist目录)
 npm run build
 ```
 
 ### 使用方式
 
-Tips: 通过 `webpack` 导出为 `umd` 类型的文件。故支持以下几种方式.
+Tips: 导出为 `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
 <head>
   ...
@@ -117,17 +119,25 @@ const coolMDEditor = new CoolMDEditor({
 |--|--|--|:--:|:--:|
 | `isFullscreen` | Boolean | 是否全屏显示, 全屏为 `true` | `false` 或者本地存储设置值| - |
 | `isThemeLight` | Boolean | 是否主题为`圣光`, 目前只有 `圣光` 和 `暗黑` 主题 ，根据 `base16` 扩展而来。未来也只考虑两套主题(光/暗) | true 或者本地存储设置值| - |
+| `isShowAll` | Boolean |编辑和预览都显示, 与 `isOnlyEdit` `isOnlyPreview`为正反关系 |true | - |
+| `isOnlyPreview` | Boolean |只显示预览 |false | - |
+| `isOnlyEdit` | Boolean | 只显示编辑|true | - |
 
 #### `_options` 属性
 
 |属性|类型|说明|默认值|可选值|
 |--|--|--|:--:|:--:|
 | `el` | HTMLElement | 编辑器 `dom` 元素| - | - |
 | `$tools` | Object | 工具条类名(图标)、title、和绑定的事件等| - | - |
-| `lang` | Object | 编辑器的语言内容 | 中文语言(zh) | - |
+| `lang` | Object/String | 编辑器的语言内容 | - | - |
 | `editor` | Object | 编辑器实例对象 | - | - |
+|`shortcuts`| Object | 快捷键配置 | - | -|
+|`qiniu`| Object | 七牛云配置，图片复制粘贴后上传到七牛云 | - | -|
+
+
+
++ $tools 结构
 
-**TIPS: $tools 结构像下面这样**
 ```js
 {
   name: 'heading',             // 名称
@@ -140,7 +150,43 @@ const coolMDEditor = new CoolMDEditor({
 }
 ```
 
++ lang
+
+类型-字符串: 使用内置的语言，目前内置了 `en: englisth` `zh: 简体中文`, 具体配置可查看 `lang/*` 目录中的配置。
+
+类型-对象: 可以扩展第三方语言，具体配置格式可查看 `lang/*` 目录文件。
+
++ qiniu
+
+需要使用粘贴图片功能，要先引用 `https://unpkg.com/qiniu-js@<版本号>/dist/qiniu.min.js`。粘贴的图片转换为了 base64 格式，为了避免图片路径显示 base64 格式的字符串，造成内容过多问题。编辑器内置了将 base64 格式的图片上传至七牛云存储的功能。
+
+默认配置为
+```js
+qiniu: {
+    tokenApiUrl: 'http://127.0.0.1:3001/api/qiniu/blog/get_token',
+    region: 'z1',
+    config: {},
+    putExtra: {}
+}
+```
+
+关于内置的七牛上传需要注意以下几点:
+
++ token 的获取编辑器内置了接口处理，可以不用设置，如果需要使用自己的接口服务器需要配置 
+`qiniu.tokenApiUrl`, 并且返回如下数据格式 
+
+```json
+{
+  data: {
+   token: 'your token',
+   domain: 'your 七牛云后台设置的自己的域名'
+  }
+}
+```
++ 上传的空间为测试空间，内容会不定时删除，所以请配置自己的七牛云上传空间
+
 #### 编辑器实例对象方法
+
 |方法名|说明|参数|返回值|
 |--|--|--|:--:|
 |getMDValue|获取当前Markdown的内容|-|当前Markdown的内容|
@@ -154,3 +200,4 @@ const coolMDEditor = new CoolMDEditor({
   + [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)
+
diff --git a/dist/cMdEditor.css b/dist/cMdEditor.css
diff --git a/dist/cMdEditor.js b/dist/cMdEditor.js
diff --git a/dist/coolMdEditor.css b/dist/coolMdEditor.css
diff --git a/dist/coolMdEditor.js b/dist/coolMdEditor.js
diff --git a/dist/index.html b/dist/index.html
@@ -18,10 +18,30 @@
       margin: 0 auto;
     }
   </style>
-<link href="coolMdEditor.css" rel="stylesheet"></head>
+<link href="cMdEditor.css" rel="stylesheet"><link href="cMdEditor.css" rel="stylesheet"></head>
 <body>
   <div class="wrap">
-    <div class="cool-md-editor-wrap editor-theme-light" id="editor-wrap"></div>
+    <div class="cool-md-editor-wrap editor-theme-dark" id="editor-wrap"></div>
   </div>
-<script type="text/javascript" src="coolMdEditor.js"></script></body>
+
+<!-- qiniu h5 upload -->
+<script src="https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
+<script type="text/javascript" src="cMdEditor.js"></script>
+<script>
+  const cMdEditor = new CMdEditor({
+    el: document.getElementById('editor-wrap'),
+    // lang: 'zh',
+    // shortcuts: {
+    //   isOpen: false,
+    // },
+    qiniu: {
+      tokenApiUrl: 'http://121.42.230.245:9001/api/qiniu/test/get_token',
+    //   region: 'z1',
+    //   config: {},
+    //   putExtra: {}
+    }
+  });
+  console.log(cMdEditor);
+</script>
+</body>
 </html>
diff --git a/example/index.html b/example/index.html
@@ -18,16 +18,17 @@
       margin: 0 auto;
     }
   </style>
-<link href="coolMdEditor.css" rel="stylesheet"></head>
+<link href="cMdEditor.css" rel="stylesheet"></head>
 <body>
   <div class="wrap">
     <div class="cool-md-editor-wrap editor-theme-light" id="editor-wrap"></div>
   </div>
-<script type="text/javascript" src="coolMdEditor.js"></script>
+<script type="text/javascript" src="cMdEditor.js"></script>
 <script>
-  new CoolMDEditor({
+  const cMdEditor = new CMdEditor({
     el: document.getElementById('editor-wrap')
-  })
+  });
+  console.log(cMdEditor);
 </script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,13 +1,12 @@
 {
   "name": "cool-md-editor",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "a markedown editor width webpack & codemirror & marked & highlight",
-  "main": "dist/coolMdEditor.js",
-  "unpkg": "dist/coolMdEditor.js",
+  "main": "dist/cMDEditor.js",
+  "unpkg": "dist/cMDEditor.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "devServer": "webpack-dev-server --open --progress --colors",
-    "dev": "webpack --mode=development",
+    "dev": "webpack-dev-server --open --progress --colors",
     "build": "webpack --mode=production"
   },
   "keywords": [],
@@ -20,6 +19,12 @@
     "url": "https://github.com/Jesonhu/cool-md-editor/issues"
   },
   "license": "MIT",
+  "dependencies": {
+    "codemirror": "^5.40.0",
+    "highlight.js": "^9.12.0",
+    "lodash-es": "^4.17.15",
+    "marked": "^0.5.0"
+  },
   "devDependencies": {
     "autoprefixer": "^9.1.3",
     "babel-core": "^6.26.0",
@@ -30,21 +35,17 @@
     "css-loader": "^1.0.0",
     "cssnano": "^4.1.0",
     "html-webpack-plugin": "^3.2.0",
+    "less": "^3.11.1",
+    "less-loader": "^5.0.0",
     "mini-css-extract-plugin": "^0.4.2",
-    "node-sass": "^4.9.3",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
-    "sass-loader": "^7.1.0",
-    "scss": "^0.2.4",
-    "scss-loader": "0.0.1",
     "style-loader": "^0.23.0",
     "webpack": "^4.17.1",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.14"
   },
-  "dependencies": {
-    "codemirror": "^5.40.0",
-    "highlight.js": "^9.12.0",
-    "marked": "^0.5.0"
-  }
+  "browserslist": [
+    "last 2 versions"
+  ]
 }
diff --git a/src/editor/config.js b/src/editor/config.js
@@ -1,5 +1,6 @@
 import lang from './lang/en';
 
+/** ========== 编辑器默认配置格式 ==========  */
 const config = {
   baseUrl: 'https://www.github.com',
   /** 阿里图标连接 */
@@ -32,6 +33,17 @@ const config = {
       }
     },
     language: lang
+  },
+  shortcuts: {
+    isOpen: false,
+  },
+
+  // ===== qiniu =====
+  qiniu: {
+    tokenApiUrl: 'http://127.0.0.1:3001/api/qiniu/blog/get_token',
+    region: 'z1',
+    config: {},
+    putExtra: {}
   }
 }
 

diff --git a/src/editor/createElement.js b/src/editor/createElement.js
@@ -3,6 +3,8 @@ const { shortcuts, fixShortcut } = TOOLS;
 
 const domRender = {
   init(options) {
+    // console.log('domRender options: %o', options);
+    // console.log('domRender this: %o', this);
     this.initData(options);
     return new Promise((resolve, reject) => {
       this.renderTools(options)
@@ -27,9 +29,12 @@ const domRender = {
     // await this.renderPriview(parent);
     // await this.renderStatus(parent);
   },
+
   initData(options) {
-    this.lang = options.lang;
+    this.$editor = {};
+    this.$editor.options = options;
   },
+
   // 创建 Edit Tools start =========================
   renderTools(options) {
     const el = options.el;
@@ -43,6 +48,7 @@ const domRender = {
       resolve();
     });
   },
+
   /**
    * 创建工具条 `编辑工具图标`. 
    */
@@ -162,8 +168,26 @@ const domRender = {
       currPlatShortcutsItem = '';
     }
 
-    return `<span class="${config.className}" title="${config.title} (${currPlatShortcutsItem})" data-name="${config.name}"></span>`;
+    const itemTitle = this.getToolItemTitleText(config.name);
+
+    // 开启了快捷键提示.
+    if (this.$editor.options.fixShortcut && this.$editor.options.fixShortcut.isOpen) {
+      return `<span class="${config.className}" title="${itemTitle} (${currPlatShortcutsItem})" data-name="${config.name}"></span>`;
+    } else {
+      return `<span class="${config.className}" title="${itemTitle}" data-name="${config.name}"></span>`;
+    }
   },
+
+  /** 
+   * 获取菜单按钮的 title 文字. 
+   * 根据编辑器的语言返回对应的内容.
+   */
+  getToolItemTitleText(itemName) {
+    const useLangItem = this.$editor.options.lang.toolbarItem;
+    const key = itemName.toLowerCase();
+    return useLangItem[key];
+  },
+
   // 创建 Edit Tools end =========================
 
   // 创建 Edit 编辑容器 start =========================
@@ -212,7 +236,7 @@ const domRender = {
   },
   createStatusPosition(options) {
     const toggleThemeHtmlStr = this.createStatusToggleTheme();
-    const language = this.lang;
+    const language = this.$editor.options.lang;
     const { line,  columns } = language.statusBar;
     let htmlStr = `<div class="editor-status-positon"><span>${line} ,${columns}  一  ${line}</span>${toggleThemeHtmlStr}</div>`;
 
@@ -224,7 +248,7 @@ const domRender = {
     return htmlStr;
   },
   createStatusLens() {
-    const language = this.lang;
+    const language = this.$editor.options.lang;
     const { length } = language.statusBar;
     let htmlStr = `<div class="editor-status-length">${length}</div>`;
 

diff --git a/src/editor/lang/en.js b/src/editor/lang/en.js
@@ -7,6 +7,24 @@
 // ===================================
 
 export default {
+  toolbarItem: {
+    'bold': 'Bold',
+    'italic': 'Italic',
+    'heading': 'Heading',
+    'quote': 'Quote',
+    'code': 'Code',
+    'unordered-list': 'Generic List',
+    'ordered-list': 'Number List',
+    'link': 'Insert Link',
+    'image': 'Insert Image',
+    'undo': 'Undo',
+    'redo': 'Redo',
+    'about': 'About Editor',
+    'edit': 'Toggle Edit',
+    'compare': 'Toggle Compare',
+    'preview': 'Toggle Preview',
+    'fullscreen': 'Toggle Fullscreen'
+  },
   statusBar: {
     line: 'line',
     columns: 'columns',

diff --git a/src/editor/lang/zh.js b/src/editor/lang/zh.js
@@ -7,6 +7,24 @@
 // ===================================
 
 export default {
+  toolbarItem: {
+    'bold': '加粗',
+    'italic': '斜体',
+    'heading': '标题',
+    'quote': '引用',
+    'code': '代码块',
+    'unordered-list': '无序列表',
+    'ordered-list': '有序列表',
+    'link': '插入链接',
+    'image': '插入图片',
+    'undo': '撤消',
+    'redo': '重做',
+    'about': '关于编辑器',
+    'edit': '编辑模式',
+    'compare': '常规模式',
+    'preview': '预览模式',
+    'fullscreen': '切换全屏'
+  },
   statusBar: {
     line: '行',
     columns: '列',