merge

originjs · Nov 24, 2017 · 353b39a · 353b39a
1 parent 2ee9789
commit 353b39a
Show file tree

Hide file tree

Showing 14 changed files with 886 additions and 223 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -38,6 +38,10 @@ module.exports = {
     //
     'no-unused-vars':0,
     // else 强制换行
-    'brace-style':0
+    'brace-style':0,
+    'no-unneeded-ternary': 0,
+    'quotes': 0,
+    'no-useless-escape': 0,
+    'no-eval': 0
   }
 }
diff --git a/LOG.md b/LOG.md
@@ -1,4 +1,5 @@
 # 更新日志
+- **2.4.2** 添加图片点击预览原图、新窗口打开链接、ishljs默认值为true、开放markdown-it对象(17.11.24)
 - **2.4.0** 抛弃集成`hljs`，改为使用`cdnjs`外链，代码高亮方案也改为使用`cdnjs`外链(17.11.22 [CHENXCHEN](https://github.com/CHENXCHEN))
 - **2.3.1** 修复帮助文档链接无法跳转问题 [#125](https://github.com/hinesboy/mavonEditor/issues/125)(17.11.14 )
 - **2.3.0** 解决const关键字报错问题 (17.10.27 / [lwdgit](https://github.com/lwdgit))

diff --git a/README-EN.md b/README-EN.md
@@ -34,17 +34,18 @@
 $ npm install mavon-editor --save
 ```
 
-#### Webpack
+#### Hightlight
 
 > If you do not need code highlighting, you can ignore this step
 
 Set ishljs = true
 ```javascript
+    // default value is true
     <mavon-editor :ishljs = "true"></mavon-editor>
 ```
 For optimize the size of pack, since **v2.4.0** `hightlight.js` will use `cdnjs` external link,
 the code highlights the file will be used to load the corresponding chain as needed.
-You can dynamically change the `hljs` code color scheme, 
+You can dynamically change the `hljs` code color scheme,
 color scheme will dynamically load the corresponding `cdnjs` external link.
 
 [Option hljs color scheme](./src/lib/core/hljs/lang.hljs.css.js) and [Supported language](./src/lib/core/hljs/lang.hljs.js) is export from [highlight.js/9.12.0](https://github.com/isagalaev/highlight.js/tree/master/src)
@@ -58,6 +59,7 @@ color scheme will dynamically load the corresponding `cdnjs` external link.
     // import with ES6
     import Vue from 'vue'
     import mavonEditor from 'mavon-editor'
+	// the Object of markdown-it : mavonEditor.markdownIt
     import 'mavon-editor/dist/css/index.css'
 
     // use
@@ -71,6 +73,7 @@ color scheme will dynamically load the corresponding `cdnjs` external link.
 ```
 `index.html`
 ```html
+// The same below
 <div id="main">
     <mavon-editor v-model="value"/>
 </div>
@@ -81,24 +84,12 @@ color scheme will dynamically load the corresponding `cdnjs` external link.
 ```javascript
     // Global Registration
     // require with Webpack/Node.js
-    var Vue = require('vue')
+    ...
     var mavonEditor = require('mavon-editor')
+	// the Object of markdown-it : mavonEditor.markdownIt
     import 'mavon-editor/dist/css/index.css'
 
-    // use
-    Vue.use(mavonEditor)
-    new Vue({
-        'el': '#main',
-        data() {
-            return { value: '' }
-        }
-    })
-```
-`index.html`
-```html
-<div id="main">
-    <mavon-editor v-model="value"/>
-</div>
+    ...
 ```
 
 #### method 3
@@ -112,6 +103,7 @@ color scheme will dynamically load the corresponding `cdnjs` external link.
     <script>
     // Local Registration
     import { mavonEditor } from 'mavon-editor'
+	// the Object of markdown-it : mavonEditor.markdownIt
     import 'mavon-editor/dist/css/index.css'
     export default {
         name: 'editor',
@@ -131,6 +123,7 @@ color scheme will dynamically load the corresponding `cdnjs` external link.
 ```
 `index.js`:
 ```javascript
+	// The same below
     import Vue from 'vue';
     var editor = require('./editor.vue');
     new Vue({
@@ -140,22 +133,20 @@ color scheme will dynamically load the corresponding `cdnjs` external link.
 ```
 `index.html`:
 ```html
+// The same below
 <div id="main">
 </div>
 ```
 
 #### method 4
 `editor.vue`:
 ```javascript
-    <template>
-        <div id="editor">
-            <mavon-editor style="height: 100%"></mavon-editor>
-        </div>
-    </template>
+    ...
     <script>
     // Local Registration
     // import mavonEditor from 'mavon-editor'
     var mavonEditor = require('mavon-editor')
+	// the Object of markdown-it : mavonEditor.markdownIt
     import 'mavon-editor/dist/css/index.css'
     export default {
         name: 'editor',
@@ -165,28 +156,9 @@ color scheme will dynamically load the corresponding `cdnjs` external link.
     }
     </script>
     <style>
-    #editor {
-        margin: auto;
-        width: 80%;
-        height: 580px;
-    }
+    ...
     </style>
 ```
-`index.js`:
-```javascript
-    import Vue from 'vue';
-    var editor = require('./editor.vue');
-    new Vue({
-        el: '#main',
-        render: h => h(editor)
-    });
-```
-`index.html`:
-```html
-<div id="main">
-</div>
-```
-
 #### Images Upload & Preview
 
 ```javascript
@@ -232,7 +204,7 @@ exports default {
 - **Default size: min-height: 300px , ming-width: 300px , Can be covered**
 - **z-index: 1500**
 - **If screen resolution less than 768px ,replace【single column | double column】 edit mode to 【edit | preview】 edit mode**
-
+- **Just for show html of md: toolbarsFlag: false , subfield: false, default_open: "preview"**
 ## API
 
 ### props
@@ -249,7 +221,7 @@ exports default {
 | code_style | String |    code-github     | markdown Style: default github, [option hljs color scheme](./src/lib/core/hljs/lang.hljs.css.js)  |
 | toolbarsFlag | Boolean     |   true       | Show toolbars |
 | toolbars   | Object      |   As in the following example  | toolbars |
-| ishljs       | Boolean |     false     | highlight code switch |
+| ishljs       | Boolean |     true     | highlight code switch(cdn) |
 
 ```javascript
  /*

diff --git a/README.md b/README.md
@@ -35,12 +35,13 @@
 $ npm install mavon-editor --save
 ```
 
-#### Webpack
+#### 代码高亮
 
 > 如不需要hightlight代码高亮显示，可以忽略此步骤
 
 开启代码高亮props
 ```javascript
+    // ishljs默认为true
     <mavon-editor :ishljs = "true"></mavon-editor>
 ```
 
@@ -58,8 +59,8 @@ $ npm install mavon-editor --save
     // import with ES6
     import Vue from 'vue'
     import mavonEditor from 'mavon-editor'
+	// 可以通过 mavonEditor.markdownIt 获取解析器markdown-it对象
     import 'mavon-editor/dist/css/index.css'
-
     // use
     Vue.use(mavonEditor)
     new Vue({
@@ -71,6 +72,7 @@ $ npm install mavon-editor --save
 ```
 `index.html`
 ```html
+// 下同
 <div id="main">
     <mavon-editor v-model="value"/>
 </div>
@@ -81,24 +83,11 @@ $ npm install mavon-editor --save
 ```javascript
     // 全局注册
     // require with Webpack/Node.js
-    var Vue = require('vue')
+    ...
     var mavonEditor = require('mavon-editor')
+	// 可以通过 mavonEditor.markdownIt 获取解析器markdown-it对象
     import 'mavon-editor/dist/css/index.css'
-
-    // use
-    Vue.use(mavonEditor)
-    new Vue({
-        'el': '#main',
-        data() {
-            return { value: '' }
-        }
-    })
-```
-`index.html`
-```html
-<div id="main">
-    <mavon-editor v-model="value"/>
-</div>
+    ...
 ```
 
 #### 方法3
@@ -112,6 +101,7 @@ $ npm install mavon-editor --save
     <script>
     // Local Registration
     import { mavonEditor } from 'mavon-editor'
+	// 可以通过 mavonEditor.markdownIt 获取解析器markdown-it对象
     import 'mavon-editor/dist/css/index.css'
     export default {
         name: 'editor',
@@ -131,27 +121,26 @@ $ npm install mavon-editor --save
 ```
 `index.js`:
 ```javascript
+	// 下同
     import Vue from 'vue';
     var editor = require('./editor.vue');
+	// 可以通过 mavonEditor.markdownIt 获取解析器markdown-it对象
     new Vue({
         el: '#main',
         render: h => h(editor)
     });
 ```
 `index.html`:
 ```html
+// 下同
 <div id="main">
 </div>
 ```
 
 #### 方法4
 `editor.vue`:
 ```javascript
-    <template>
-        <div id="editor">
-            <mavon-editor style="height: 100%"></mavon-editor>
-        </div>
-    </template>
+    ...
     <script>
     // Local Registration
     // import mavonEditor from 'mavon-editor'
@@ -166,26 +155,10 @@ $ npm install mavon-editor --save
     </script>
     <style>
     #editor {
-        margin: auto;
-        width: 80%;
-        height: 580px;
-    }
+    ...
     </style>
 ```
-`index.js`:
-```javascript
-    import Vue from 'vue';
-    var editor = require('./editor.vue');
-    new Vue({
-        el: '#main',
-        render: h => h(editor)
-    });
-```
-`index.html`:
-```html
-<div id="main">
-</div>
-```
+
 
 #### Images Upload & Preview
 
@@ -231,8 +204,7 @@ exports default {
 - **默认大小样式为 min-height: 300px , ming-width: 300px 可自行覆盖**
 - **基础z-index: 1500**
 - **屏幕分辨率低于768px ，自动取消【单栏 | 双栏】编辑模式 ，更改为【编辑 | 预览】切换 )**
-- **快捷键的监听对象更改为编辑器自身，所以当编辑器失去焦点后，快捷键失效**
-
+- **仅用作展示可以设置props: toolbarsFlag: false , subfield: false, default_open: "preview"**
 ## API 文档
 
 ### props
@@ -249,7 +221,7 @@ exports default {
 | code_style | String |    code-github     | markdown样式： 默认github, [可选配色方案](./src/lib/core/hljs/lang.hljs.css.js)   |
 | toolbarsFlag | Boolean |    true     | 工具栏是否显示                |
 | toolbars     | Object  |     如下例     | 工具栏                      |
-| ishljs       | Boolean |     false     |  是否高亮代码 |
+| ishljs       | Boolean |     true     |  代码高亮(cdn外链) |
 
 ```javascript
  /*

diff --git a/dist/mavon-editor.js b/dist/mavon-editor.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mavon-editor",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "Vue markdown editor",
   "main": "dist/mavon-editor.js",
   "scripts": {

diff --git a/src/dev/app.vue b/src/dev/app.vue
@@ -18,7 +18,7 @@
             </h2>
             <button @click="uploadimg">upload</button>
             <button @click="imgreplace">imgreplace</button>
-            <mavon-editor  ref=md :subfield="subfield" :code_style="code_style" :toolbarsFlag="toolbarsFlag" :editable="editable"
+            <mavon-editor  ref=md :subfield="subfield" :toolbarsFlag="toolbarsFlag" :editable="editable" :code_style="code_style"
                           :language="d_language" @change="change" @save="saveone" :ishljs="true" class="item-editor" v-model="help1"
                           @imgAdd="$imgAdd" @imgDel="$imgDel" @subfieldtoggle="$subfieldtoggle" @previewtoggle="$previewtoggle"></mavon-editor>
 
@@ -74,7 +74,7 @@
                 editable: true,
                 toolbarsFlag: true,
                 img_file: {},
-                code_style: 'code-hybrid'
+                code_style: 'darcula'
             }
         },
         created () {

diff --git a/src/dev/index.js b/src/dev/index.js
@@ -12,7 +12,7 @@
 import Vue from 'vue';
 var editor = require('./app.vue');
 var sMd = require('../index.js');
-/*var sMd = require('../../dist/mavon-editor.js')*/
+// var sMd = require('../../dist/mavon-editor.js')
 // use
 Vue.use(sMd);
 

diff --git a/src/index.js b/src/index.js
@@ -9,9 +9,10 @@
  */
 
 const mavonEditor = require('./mavon-editor.vue');
-
+const markdown = require('./lib/core/markdown');
 const VueMavonEditor = {
-    mavonEditor: mavonEditor,
+    markdown: markdown,
+    mavonEditorIt: mavonEditor,
     install: function(Vue) {
         Vue.component('mavon-editor', mavonEditor);
     },

diff --git a/src/lib/core/extra-function.js b/src/lib/core/extra-function.js
@@ -239,3 +239,13 @@ export function loadLink(src, callback) {
     }
     head.appendChild(link);
 }
+
+export const ImagePreviewListener = ($vm) => {
+    document.querySelector('.v-show-content').onclick = document.querySelector('.v-note-read-content').onclick = function (event) {
+        event = event ? event : window.event;
+        let ele = event.srcElement ? event.srcElement : event.target;
+        if (ele.tagName === 'IMG') {
+            $vm.d_preview_imgsrc = ele.src;
+        }
+    }
+}
diff --git a/src/lib/core/markdown.js b/src/lib/core/markdown.js
@@ -30,11 +30,10 @@ var markdown_config = {
         return '<pre><code class="' + lang + '">' + markdown.utils.escapeHtml(str) + '</code></pre>';
     }
 }
-
 var markdown = require('markdown-it')(markdown_config);
 // 表情
 var emoji = require('markdown-it-emoji');
-//
+
 // 下标
 var sub = require('markdown-it-sub')
 // 上标