Home Explore Help
Register Sign In
Apq
/
vditor
mirror of https://github.com/Vanessa219/vditor.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

:recycle: update demo

Van 6 years ago
parent
a514874d31
commit
4b9df9bf8b
8 changed files with 694 additions and 764 deletions
Split View Show Diff Stats
  1. 298 0
      demo/index-preview.html
  2. 4 0
      demo/index-preview.js
  3. 2 256
      demo/index.html
  4. 42 53
      demo/index.js
  5. 303 0
      demo/static-preview.html
  6. 38 259
      demo/static.html
  7. 0 195
      demo/static.js
  8. 7 1
      webpack.start.js

+ 298 - 0
demo/index-preview.html
View File 

@@ -0,0 +1,298 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-cmn-Hans">
 
+<head>
 
+    <meta charset="utf-8"/>
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
 
+    <meta name="theme-color" content="#f1f7fe">
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="mobile-web-app-capable" content="yes"/>
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <title>Vditor - A markdown editor written in TypeScript.</title>
 
+    <meta name="description"
 
+          content="B3log 开源社区 markdown 编辑器，使用 TypeScript 编写。支持在线预览、表情插入、at 用户提示、HTML 转换等必要功能。"/>
 
+    <meta property="og:description"
 
+          content="B3log 开源社区 markdown 编辑器，使用 TypeScript 编写。支持在线预览、表情插入、at 用户提示、HTML 转换等必要功能。"/>
 
+    <meta name="twitter:description" property="og:description" itemprop="description"
 
+          content="B3log 开源社区 markdown 编辑器，使用 TypeScript 编写。支持在线预览、表情插入、at 用户提示、HTML 转换等必要功能。"/>
 
+    <link rel="dns-prefetch" href="//cdn.jsdelivr.net/"/>
 
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
 
+    <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png"/>
 
+    <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png">
 
+    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png">
 
+    <meta name="copyright" content="B3log"/>
 
+    <meta http-equiv="Window-target" content="_top"/>
 
+    <meta property="og:locale" content="zh-cmn-Hans"/>
 
+    <meta property="og:title" content="Vditor - A markdown editor written in TypeScript."/>
 
+    <meta property="og:site_name" content="Blog-vditor"/>
 
+    <meta property="og:url" content="https://github.com/b3log/vditor"/>
 
+    <meta name="twitter:card" content="summary"/>
 
+    <meta name="twitter:domain" content="b3log.org"/>
 
+    <meta name="twitter:title" property="og:title" itemprop="b3lig vditor"
 
+          content="Vditor - A markdown editor written in TypeScript."/>
 
+    <meta name="twitter:site" content="@B3logOS"/>
 
+    <meta name="twitter:url" content="https://github.com/b3log/vditor"/>
 
+    <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png"/>
 
+    <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png"/>
 
+</head>
 
+<body>
 
+<h2><a href="https://hacpai.com/article/1549638745630?r=Vanessa" target="_blank">Doc</a></h2>
 
+<h2><a href="index.html">Vditor for you</a></h2>
 
+<h2>Vditor for Preview</h2>
 
+<textarea id="vditorPreview" class="vditor-reset" style="width: 600px;margin: 0 auto;display: none">## Guide
 
+
 
+这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。
 
+
 
+> 引用文本：Markdown is a text formatting syntax inspired
 
+
 
+## 语法指导
 
+
 
+### 普通内容
 
+
 
+这段内容展示了在内容里面一些排版格式，比如：
 
+
 
+- **加粗** - `**加粗**`
 
+- *倾斜* - `*倾斜*`
 
+- ~~删除线~~ - `~~删除线~~`
 
+- `Code 标记` - `` `Code 标记` ``
 
+- [超级链接](https://hacpai.com) - `[超级链接](https://hacpai.com)`
 
+- [[email protected]](mailto:[email protected]) - `[[email protected]](mailto:[email protected])`
 
+
 
+### 提及用户
 
+
 
+@Vanessa 通过 `@User` 可以在内容中提及用户，被提及的用户将会收到系统通知。
 
+
 
+> NOTE:
 
+>
 
+> 1. @用户名之后需要有一个空格
 
+> 2. 新手没有艾特的功能权限
 
+
 
+### 表情符号 Emoji
 
+
 
+支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。通过输入 `:` 触发自动完成，可在个人设置中[设置常用表情](https://hacpai.com/settings/function)。
 
+
 
+#### 一些表情例子
 
+
 
+:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile:  :cry: :triumph: :heart_eyes: :relieved:
 
+:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :anger:
 
+
 
+### 大标题 - Heading 3
 
+
 
+你可以选择使用 H1 至 H6，使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3，不要使用 1 或 2，因为 1 是系统站点级，2 是帖子标题级。
 
+
 
+> NOTE: 别忘了 # 后面需要有空格！
 
+
 
+#### Heading 4
 
+
 
+##### Heading 5
 
+
 
+###### Heading 6
 
+
 
+### 图片
 
+
 
+```
 
+![alt 文本](http://image-path.png)
 
+![alt 文本](http://image-path.png "图片 Title 值")
 
+```
 
+
 
+支持复制粘贴直接上传。
 
+
 
+### 代码块
 
+
 
+#### 普通
 
+
 
+```
 
+*emphasize*    **strong**
 
+_emphasize_    __strong__
 
+var a = 1
 
+```
 
+
 
+#### 语法高亮支持
 
+
 
+如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如:
 
+
 
+##### 演示 Go 代码高亮
 
+
 
+```go
 
+package main
 
+
 
+import "fmt"
 
+
 
+func main() {
 
+	fmt.Println("Hello, 世界")
 
+}
 
+```
 
+
 
+##### 演示 Java 高亮
 
+
 
+```java
 
+public class HelloWorld {
 
+
 
+    public static void main(String[] args) {
 
+        System.out.println("Hello World!");
 
+    }
 
+
 
+}
 
+```
 
+
 
+> Tip: 语言名称支持下面这些: `ruby`, `python`, `js`, `html`, `erb`, `css`, `coffee`, `bash`, `json`, `yml`, `xml` ...
 
+
 
+### 有序、无序、任务列表
 
+
 
+#### 无序列表
 
+
 
+- Java
 
+  - Spring
 
+    - IoC
 
+    - AOP
 
+- Go
 
+  - gofmt
 
+  - Wide
 
+- Node.js
 
+  - Koa
 
+  - Express
 
+
 
+#### 有序列表
 
+
 
+1. Node.js
 
+   1.1. Express
 
+   1.2. Koa
 
+   1.3. Sails
 
+2. Go
 
+   2.1. gofmt
 
+   2.2. Wide
 
+3. Java
 
+   3.1. Latke
 
+   3.2. IDEA
 
+
 
+#### 任务列表
 
+
 
+- [x] 发布 Sym
 
+- [X] 发布 Solo
 
+- [ ] 预约牙医
 
+
 
+### 表格
 
+
 
+如果需要展示数据什么的，可以选择使用表格。
 
+
 
+| header 1 | header 3 |
 
+| -------- | -------- |
 
+| cell 1   | cell 2   |
 
+| cell 3   | cell 4   |
 
+| cell 5   | cell 6   |
 
+
 
+### 隐藏细节
 
+
 
+<details>
 
+<summary>这里是摘要部分。</summary>
 
+这里是细节部分。
 
+</details>
 
+
 
+### 段落
 
+
 
+空行可以将内容进行分段，便于阅读。（这是第一段）
 
+
 
+使用空行在 Markdown 排版中相当重要。（这是第二段）
 
+
 
+### 数学公式
 
+
 
+$$a^2 + b^2 = \color{red}c^2$$
 
+
 
+### 流程图
 
+
 
+```mermaid
 
+graph TB
 
+    c1-->a2
 
+    subgraph one
 
+    a1-->a2
 
+    end
 
+    subgraph two
 
+    b1-->b2
 
+    end
 
+    subgraph three
 
+    c1-->c2
 
+    end
 
+```
 
+
 
+### 时序图
 
+
 
+```mermaid
 
+sequenceDiagram
 
+    Alice->>John: Hello John, how are you?
 
+    loop Every minute
 
+        John-->>Alice: Great!
 
+    end
 
+```
 
+
 
+### 甘特图
 
+
 
+```mermaid
 
+gantt
 
+    title A Gantt Diagram
 
+    dateFormat  YYYY-MM-DD
 
+    section Section
 
+    A task           :a1, 2019-01-01, 30d
 
+    Another task     :after a1  , 20d
 
+    section Another
 
+    Task in sec      :2019-01-12  , 12d
 
+    another task      : 24d
 
+```
 
+
 
+### 图表
 
+
 
+```echarts
 
+{
 
+  "title": { "text": "最近 30 天" },
 
+  "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
 
+  "legend": { "data": ["帖子", "用户", "回帖"] },
 
+  "xAxis": [{
 
+      "type": "category",
 
+      "boundaryGap": false,
 
+      "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"],
 
+      "axisTick": { "show": false },
 
+      "axisLine": { "show": false }
 
+  }],
 
+  "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
 
+  "series": [
 
+    {
 
+      "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
 
+      "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"]
 
+    },
 
+    {
 
+      "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
 
+      "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"]
 
+    },
 
+    {
 
+      "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
 
+      "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"]
 
+    }
 
+  ]
 
+}
 
+```
 
+
 
+### 五线谱
 
+
 
+```abc
 
+X: 24
 
+T: Clouds Thicken
 
+C: Paul Rosen
 
+S: Copyright 2005, Paul Rosen
 
+M: 6/8
 
+L: 1/8
 
+Q: 3/8=116
 
+R: Creepy Jig
 
+K: Em
 
+|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\
 
+"C7"_B2A "B7"=B3|"Em"EEE E2G|
 
+"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\
 
+1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|
 
+"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\
 
+"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|
 
+```
 
+
 
+## 快捷键
 
+
 
+我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://hacpai.com/article/1474030007391)（或者按 "`?` ":smirk_cat:）
 
+</textarea>
 
+</body>
 
+</html>

+ 4 - 0
demo/index-preview.js
View File 

@@ -0,0 +1,4 @@
 
+import VditorPreview from '../src/method'
 
+import '../src/assets/scss/classic.scss'
 
+
 
+VditorPreview.preview(document.getElementById('vditorPreview'))

+ 2 - 256
demo/index.html
View File 

@@ -36,6 +36,8 @@
 
     <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/src/assets/images/logo.png"/>
 
 </head>
 
 <body>
 
+<h2><a href="https://hacpai.com/article/1549638745630?r=Vanessa" target="_blank">Doc</a></h2>
 
+<h2><a href="index-preview.html">Vditor for Preview</a></h2>
 
 <h2>Vditor for you</h2>
 
 <div id="vditor">
 
     <h1>Vditor</h1>
 
@@ -44,262 +46,6 @@
 
         <li>bar</li>
 
     </ul>
 
 </div>
 
-<h2>Vditor for Preview</h2>
 
-<textarea id="vditorPreview" class="vditor-reset" style="width: 600px;margin: 0 auto;display: none">## Guide
 
-
 
-这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。
 
-
 
-> 引用文本：Markdown is a text formatting syntax inspired
 
-
 
-## 语法指导
 
-
 
-### 普通内容
 
-
 
-这段内容展示了在内容里面一些排版格式，比如：
 
-
 
-- **加粗** - `**加粗**`
 
-- *倾斜* - `*倾斜*`
 
-- ~~删除线~~ - `~~删除线~~`
 
-- `Code 标记` - `` `Code 标记` ``
 
-- [超级链接](https://hacpai.com) - `[超级链接](https://hacpai.com)`
 
-- [[email protected]](mailto:[email protected]) - `[[email protected]](mailto:[email protected])`
 
-
 
-### 提及用户
 
-
 
-@Vanessa 通过 `@User` 可以在内容中提及用户，被提及的用户将会收到系统通知。
 
-
 
-> NOTE:
 
->
 
-> 1. @用户名之后需要有一个空格
 
-> 2. 新手没有艾特的功能权限
 
-
 
-### 表情符号 Emoji
 
-
 
-支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。通过输入 `:` 触发自动完成，可在个人设置中[设置常用表情](https://hacpai.com/settings/function)。
 
-
 
-#### 一些表情例子
 
-
 
-:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile:  :cry: :triumph: :heart_eyes: :relieved:
 
-:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :anger:
 
-
 
-### 大标题 - Heading 3
 
-
 
-你可以选择使用 H1 至 H6，使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3，不要使用 1 或 2，因为 1 是系统站点级，2 是帖子标题级。
 
-
 
-> NOTE: 别忘了 # 后面需要有空格！
 
-
 
-#### Heading 4
 
-
 
-##### Heading 5
 
-
 
-###### Heading 6
 
-
 
-### 图片
 
-
 
-```
 
-![alt 文本](http://image-path.png)
 
-![alt 文本](http://image-path.png "图片 Title 值")
 
-```
 
-
 
-支持复制粘贴直接上传。
 
-
 
-### 代码块
 
-
 
-#### 普通
 
-
 
-```
 
-*emphasize*    **strong**
 
-_emphasize_    __strong__
 
-var a = 1
 
-```
 
-
 
-#### 语法高亮支持
 
-
 
-如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如:
 
-
 
-##### 演示 Go 代码高亮
 
-
 
-```go
 
-package main
 
-
 
-import "fmt"
 
-
 
-func main() {
 
-	fmt.Println("Hello, 世界")
 
-}
 
-```
 
-
 
-##### 演示 Java 高亮
 
-
 
-```java
 
-public class HelloWorld {
 
-
 
-    public static void main(String[] args) {
 
-        System.out.println("Hello World!");
 
-    }
 
-
 
-}
 
-```
 
-
 
-> Tip: 语言名称支持下面这些: `ruby`, `python`, `js`, `html`, `erb`, `css`, `coffee`, `bash`, `json`, `yml`, `xml` ...
 
-
 
-### 有序、无序、任务列表
 
-
 
-#### 无序列表
 
-
 
-- Java
 
-  - Spring
 
-    - IoC
 
-    - AOP
 
-- Go
 
-  - gofmt
 
-  - Wide
 
-- Node.js
 
-  - Koa
 
-  - Express
 
-
 
-#### 有序列表
 
-
 
-1. Node.js
 
-   1.1. Express
 
-   1.2. Koa
 
-   1.3. Sails
 
-2. Go
 
-   2.1. gofmt
 
-   2.2. Wide
 
-3. Java
 
-   3.1. Latke
 
-   3.2. IDEA
 
-
 
-#### 任务列表
 
-
 
-- [x] 发布 Sym
 
-- [X] 发布 Solo
 
-- [ ] 预约牙医
 
-
 
-### 表格
 
-
 
-如果需要展示数据什么的，可以选择使用表格。
 
-
 
-| header 1 | header 3 |
 
-| -------- | -------- |
 
-| cell 1   | cell 2   |
 
-| cell 3   | cell 4   |
 
-| cell 5   | cell 6   |
 
-
 
-### 隐藏细节
 
-
 
-<details>
 
-<summary>这里是摘要部分。</summary>
 
-这里是细节部分。
 
-</details>
 
-
 
-### 段落
 
-
 
-空行可以将内容进行分段，便于阅读。（这是第一段）
 
-
 
-使用空行在 Markdown 排版中相当重要。（这是第二段）
 
-
 
-### 数学公式
 
-
 
-$$a^2 + b^2 = \color{red}c^2$$
 
-
 
-### 流程图
 
-
 
-```mermaid
 
-graph TB
 
-    c1-->a2
 
-    subgraph one
 
-    a1-->a2
 
-    end
 
-    subgraph two
 
-    b1-->b2
 
-    end
 
-    subgraph three
 
-    c1-->c2
 
-    end
 
-```
 
-
 
-### 时序图
 
-
 
-```mermaid
 
-sequenceDiagram
 
-    Alice->>John: Hello John, how are you?
 
-    loop Every minute
 
-        John-->>Alice: Great!
 
-    end
 
-```
 
-
 
-### 甘特图
 
-
 
-```mermaid
 
-gantt
 
-    title A Gantt Diagram
 
-    dateFormat  YYYY-MM-DD
 
-    section Section
 
-    A task           :a1, 2019-01-01, 30d
 
-    Another task     :after a1  , 20d
 
-    section Another
 
-    Task in sec      :2019-01-12  , 12d
 
-    another task      : 24d
 
-```
 
-
 
-### 图表
 
-
 
-```echarts
 
-{
 
-  "title": { "text": "最近 30 天" },
 
-  "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
 
-  "legend": { "data": ["帖子", "用户", "回帖"] },
 
-  "xAxis": [{
 
-      "type": "category",
 
-      "boundaryGap": false,
 
-      "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"],
 
-      "axisTick": { "show": false },
 
-      "axisLine": { "show": false }
 
-  }],
 
-  "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
 
-  "series": [
 
-    {
 
-      "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
 
-      "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"]
 
-    },
 
-    {
 
-      "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
 
-      "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"]
 
-    },
 
-    {
 
-      "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
 
-      "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"]
 
-    }
 
-  ]
 
-}
 
-```
 
-
 
-### 五线谱
 
-
 
-```abc
 
-X: 24
 
-T: Clouds Thicken
 
-C: Paul Rosen
 
-S: Copyright 2005, Paul Rosen
 
-M: 6/8
 
-L: 1/8
 
-Q: 3/8=116
 
-R: Creepy Jig
 
-K: Em
 
-|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\
 
-"C7"_B2A "B7"=B3|"Em"EEE E2G|
 
-"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\
 
-1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|
 
-"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\
 
-"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|
 
-```
 
-
 
-## 快捷键
 
-
 
-我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://hacpai.com/article/1474030007391)（或者按 "`?` ":smirk_cat:）
 
-</textarea>
 
 <h2>Vditor for jest puppeteer</h2>
 
 <div id="vditorTest"></div>
 
 </body>

+ 42 - 53
demo/index.js
View File 

@@ -1,51 +1,6 @@
 
 import Vditor from '../src/index'
 
-import VditorPreview from '../src/method'
 
 import '../src/assets/scss/classic.scss'
 
 
-VditorPreview.preview(document.getElementById('vditorPreview'))
 
-
 
-const LazyLoadImage = () => {
 
-  const loadImg = (it) => {
 
-    const testImage = document.createElement('img')
 
-    testImage.src = it.getAttribute('data-src')
 
-    testImage.addEventListener('load', () => {
 
-      it.src = testImage.src
 
-      it.style.backgroundImage = 'none'
 
-      it.style.backgroundColor = 'transparent'
 
-    })
 
-    it.removeAttribute('data-src')
 
-  }
 
-
 
-  if (!('IntersectionObserver' in window)) {
 
-    document.querySelectorAll('img').forEach((data) => {
 
-      if (data.getAttribute('data-src')) {
 
-        loadImg(data)
 
-      }
 
-    })
 
-    return false
 
-  }
 
-
 
-  if (window.imageIntersectionObserver) {
 
-    window.imageIntersectionObserver.disconnect()
 
-    document.querySelectorAll('img').forEach(function (data) {
 
-      window.imageIntersectionObserver.observe(data)
 
-    })
 
-  } else {
 
-    window.imageIntersectionObserver = new IntersectionObserver((entries) => {
 
-      entries.forEach((entrie) => {
 
-        if ((typeof entrie.isIntersecting === 'undefined'
 
-          ? entrie.intersectionRatio !== 0
 
-          : entrie.isIntersecting) && entrie.target.getAttribute('data-src')) {
 
-          loadImg(entrie.target)
 
-        }
 
-      })
 
-    })
 
-    document.querySelectorAll('img').forEach(function (data) {
 
-      window.imageIntersectionObserver.observe(data)
 
-    })
 
-  }
 
-}
 
-
 
 window.vditor = new Vditor('vditor', {
 
   counter: 100,
 
   height: 300,
 
@@ -75,16 +30,9 @@ window.vditor = new Vditor('vditor', {
 
       // ? \ / : | < > * [ ] white to -
 
       return name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
 
     },
 
-    handler (file) {
 
-      console.log(file)
 
-      return 'handler'
 
-    },
 
   },
 
   preview: {
 
     mode: 'both',
 
-    parse: () => {
 
-      LazyLoadImage()
 
-    },
 
   },
 
 })
 
 
@@ -105,7 +53,6 @@ window.vditorTest = new Vditor('vditorTest', {
 
   preview: {
 
     url: '/api/markdown',
 
     parse: (element) => {
 
-      console.log(element)
 
       LazyLoadImage()
 
     },
 
   },
 
@@ -197,3 +144,45 @@ window.vditorTest = new Vditor('vditorTest', {
 
     },
 
   ],
 
 })
 
+
 
+const LazyLoadImage = () => {
 
+  const loadImg = (it) => {
 
+    const testImage = document.createElement('img')
 
+    testImage.src = it.getAttribute('data-src')
 
+    testImage.addEventListener('load', () => {
 
+      it.src = testImage.src
 
+      it.style.backgroundImage = 'none'
 
+      it.style.backgroundColor = 'transparent'
 
+    })
 
+    it.removeAttribute('data-src')
 
+  }
 
+
 
+  if (!('IntersectionObserver' in window)) {
 
+    document.querySelectorAll('img').forEach((data) => {
 
+      if (data.getAttribute('data-src')) {
 
+        loadImg(data)
 
+      }
 
+    })
 
+    return false
 
+  }
 
+
 
+  if (window.imageIntersectionObserver) {
 
+    window.imageIntersectionObserver.disconnect()
 
+    document.querySelectorAll('img').forEach(function (data) {
 
+      window.imageIntersectionObserver.observe(data)
 
+    })
 
+  } else {
 
+    window.imageIntersectionObserver = new IntersectionObserver((entries) => {
 
+      entries.forEach((entrie) => {
 
+        if ((typeof entrie.isIntersecting === 'undefined'
 
+          ? entrie.intersectionRatio !== 0
 
+          : entrie.isIntersecting) && entrie.target.getAttribute('data-src')) {
 
+          loadImg(entrie.target)
 
+        }
 
+      })
 
+    })
 
+    document.querySelectorAll('img').forEach(function (data) {
 
+      window.imageIntersectionObserver.observe(data)
 
+    })
 
+  }
 
+}

+ 303 - 0
demo/static-preview.html
View File 

@@ -0,0 +1,303 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-cmn-Hans">
 
+<head>
 
+    <meta charset="utf-8"/>
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
 
+    <meta name="theme-color" content="#f1f7fe">
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="mobile-web-app-capable" content="yes"/>
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <title>Vditor - A markdown editor written in TypeScript.</title>
 
+    <meta name="description"
 
+          content="B3log 开源社区 markdown 编辑器，使用 TypeScript 编写。支持在线预览、表情插入、at 用户提示、HTML 转换等必要功能。"/>
 
+    <meta property="og:description"
 
+          content="B3log 开源社区 markdown 编辑器，使用 TypeScript 编写。支持在线预览、表情插入、at 用户提示、HTML 转换等必要功能。"/>
 
+    <meta name="twitter:description" property="og:description" itemprop="description"
 
+          content="B3log 开源社区 markdown 编辑器，使用 TypeScript 编写。支持在线预览、表情插入、at 用户提示、HTML 转换等必要功能。"/>
 
+    <link rel="dns-prefetch" href="//cdn.jsdelivr.net/"/>
 
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
 
+    <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
 
+    <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
 
+    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
 
+    <meta name="copyright" content="B3log"/>
 
+    <meta http-equiv="Window-target" content="_top"/>
 
+    <meta property="og:locale" content="zh-cmn-Hans"/>
 
+    <meta property="og:title" content="Vditor - A markdown editor written in TypeScript."/>
 
+    <meta property="og:site_name" content="Blog-vditor"/>
 
+    <meta property="og:url" content="https://github.com/b3log/vditor"/>
 
+    <meta name="twitter:card" content="summary"/>
 
+    <meta name="twitter:domain" content="b3log.org"/>
 
+    <meta name="twitter:title" property="og:title" itemprop="b3lig vditor"
 
+          content="Vditor - A markdown editor written in TypeScript."/>
 
+    <meta name="twitter:site" content="@B3logOS"/>
 
+    <meta name="twitter:url" content="https://github.com/b3log/vditor"/>
 
+    <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
 
+    <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.classic.css" />
 
+    <script src="https://cdn.jsdelivr.net/npm/vditor@latest/dist/method.min.js"></script>
 
+</head>
 
+<body>
 
+<h2><a href="https://hacpai.com/article/1549638745630?r=Vanessa" target="_blank">Doc</a></h2>
 
+<h2><a href="static.html">Vditor for you</a></h2>
 
+<h2>Vditor for Preview</h2>
 
+<textarea id="vditorPreview" class="vditor-reset" style="width: 600px;margin: 0 auto;display:none">## Guide
 
+
 
+这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。
 
+
 
+> 引用文本：Markdown is a text formatting syntax inspired
 
+
 
+## 语法指导
 
+
 
+### 普通内容
 
+
 
+这段内容展示了在内容里面一些排版格式，比如：
 
+
 
+- **加粗** - `**加粗**`
 
+- *倾斜* - `*倾斜*`
 
+- ~~删除线~~ - `~~删除线~~`
 
+- `Code 标记` - `` `Code 标记` ``
 
+- [超级链接](https://hacpai.com) - `[超级链接](https://hacpai.com)`
 
+- [[email protected]](mailto:[email protected]) - `[[email protected]](mailto:[email protected])`
 
+
 
+### 提及用户
 
+
 
+@Vanessa 通过 `@User` 可以在内容中提及用户，被提及的用户将会收到系统通知。
 
+
 
+> NOTE:
 
+>
 
+> 1. @用户名之后需要有一个空格
 
+> 2. 新手没有艾特的功能权限
 
+
 
+### 表情符号 Emoji
 
+
 
+支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。通过输入 `:` 触发自动完成，可在个人设置中[设置常用表情](https://hacpai.com/settings/function)。
 
+
 
+#### 一些表情例子
 
+
 
+:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile:  :cry: :triumph: :heart_eyes: :relieved:
 
+:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :anger:
 
+
 
+### 大标题 - Heading 3
 
+
 
+你可以选择使用 H1 至 H6，使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3，不要使用 1 或 2，因为 1 是系统站点级，2 是帖子标题级。
 
+
 
+> NOTE: 别忘了 # 后面需要有空格！
 
+
 
+#### Heading 4
 
+
 
+##### Heading 5
 
+
 
+###### Heading 6
 
+
 
+### 图片
 
+
 
+```
 
+![alt 文本](http://image-path.png)
 
+![alt 文本](http://image-path.png "图片 Title 值")
 
+```
 
+
 
+支持复制粘贴直接上传。
 
+
 
+### 代码块
 
+
 
+#### 普通
 
+
 
+```
 
+*emphasize*    **strong**
 
+_emphasize_    __strong__
 
+var a = 1
 
+```
 
+
 
+#### 语法高亮支持
 
+
 
+如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如:
 
+
 
+##### 演示 Go 代码高亮
 
+
 
+```go
 
+package main
 
+
 
+import "fmt"
 
+
 
+func main() {
 
+	fmt.Println("Hello, 世界")
 
+}
 
+```
 
+
 
+##### 演示 Java 高亮
 
+
 
+```java
 
+public class HelloWorld {
 
+
 
+    public static void main(String[] args) {
 
+        System.out.println("Hello World!");
 
+    }
 
+
 
+}
 
+```
 
+
 
+> Tip: 语言名称支持下面这些: `ruby`, `python`, `js`, `html`, `erb`, `css`, `coffee`, `bash`, `json`, `yml`, `xml` ...
 
+
 
+### 有序、无序、任务列表
 
+
 
+#### 无序列表
 
+
 
+- Java
 
+  - Spring
 
+    - IoC
 
+    - AOP
 
+- Go
 
+  - gofmt
 
+  - Wide
 
+- Node.js
 
+  - Koa
 
+  - Express
 
+
 
+#### 有序列表
 
+
 
+1. Node.js
 
+   1.1. Express
 
+   1.2. Koa
 
+   1.3. Sails
 
+2. Go
 
+   2.1. gofmt
 
+   2.2. Wide
 
+3. Java
 
+   3.1. Latke
 
+   3.2. IDEA
 
+
 
+#### 任务列表
 
+
 
+- [x] 发布 Sym
 
+- [X] 发布 Solo
 
+- [ ] 预约牙医
 
+
 
+### 表格
 
+
 
+如果需要展示数据什么的，可以选择使用表格。
 
+
 
+| header 1 | header 3 |
 
+| -------- | -------- |
 
+| cell 1   | cell 2   |
 
+| cell 3   | cell 4   |
 
+| cell 5   | cell 6   |
 
+
 
+### 隐藏细节
 
+
 
+<details>
 
+<summary>这里是摘要部分。</summary>
 
+这里是细节部分。
 
+</details>
 
+
 
+### 段落
 
+
 
+空行可以将内容进行分段，便于阅读。（这是第一段）
 
+
 
+使用空行在 Markdown 排版中相当重要。（这是第二段）
 
+
 
+### 数学公式
 
+
 
+$$a^2 + b^2 = \color{red}c^2$$
 
+
 
+### 流程图
 
+
 
+```mermaid
 
+graph TB
 
+    c1-->a2
 
+    subgraph one
 
+    a1-->a2
 
+    end
 
+    subgraph two
 
+    b1-->b2
 
+    end
 
+    subgraph three
 
+    c1-->c2
 
+    end
 
+```
 
+
 
+### 时序图
 
+
 
+```mermaid
 
+sequenceDiagram
 
+    Alice->>John: Hello John, how are you?
 
+    loop Every minute
 
+        John-->>Alice: Great!
 
+    end
 
+```
 
+
 
+### 甘特图
 
+
 
+```mermaid
 
+gantt
 
+    title A Gantt Diagram
 
+    dateFormat  YYYY-MM-DD
 
+    section Section
 
+    A task           :a1, 2019-01-01, 30d
 
+    Another task     :after a1  , 20d
 
+    section Another
 
+    Task in sec      :2019-01-12  , 12d
 
+    another task      : 24d
 
+```
 
+
 
+### 图表
 
+
 
+```echarts
 
+{
 
+  "title": { "text": "最近 30 天" },
 
+  "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
 
+  "legend": { "data": ["帖子", "用户", "回帖"] },
 
+  "xAxis": [{
 
+      "type": "category",
 
+      "boundaryGap": false,
 
+      "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"],
 
+      "axisTick": { "show": false },
 
+      "axisLine": { "show": false }
 
+  }],
 
+  "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
 
+  "series": [
 
+    {
 
+      "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
 
+      "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"]
 
+    },
 
+    {
 
+      "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
 
+      "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"]
 
+    },
 
+    {
 
+      "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
 
+      "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"]
 
+    }
 
+  ]
 
+}
 
+```
 
+
 
+### 五线谱
 
+
 
+```abc
 
+X: 24
 
+T: Clouds Thicken
 
+C: Paul Rosen
 
+S: Copyright 2005, Paul Rosen
 
+M: 6/8
 
+L: 1/8
 
+Q: 3/8=116
 
+R: Creepy Jig
 
+K: Em
 
+|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\
 
+"C7"_B2A "B7"=B3|"Em"EEE E2G|
 
+"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\
 
+1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|
 
+"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\
 
+"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|
 
+```
 
+
 
+## 快捷键
 
+
 
+我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://hacpai.com/article/1474030007391)（或者按 "`?` ":smirk_cat:）
 
+</textarea>
 
+<script>
 
+  Vditor.preview(document.getElementById('vditorPreview'))
 
+</script>
 
+</body>
 
+</html>

+ 38 - 259
demo/static.html
View File 

@@ -34,11 +34,12 @@
 
     <meta name="twitter:url" content="https://github.com/b3log/vditor"/>
 
     <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
 
     <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.classic.css" />
 
-    <script src="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.min.js" defer></script>
 
-    <script src="static.js" defer></script>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.classic.css"/>
 
+    <script src="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.min.js"></script>
 
 </head>
 
 <body>
 
+<h2><a href="https://hacpai.com/article/1549638745630?r=Vanessa" target="_blank">Doc</a></h2>
 
+<h2><a href="static-preview.html">Vditor for Preview</a></h2>
 
 <h2>Vditor for you</h2>
 
 <div id="vditor">
 
     <h1>Vditor</h1>
 
@@ -47,263 +48,41 @@
 
         <li>bar</li>
 
     </ul>
 
 </div>
 
-<h2>Vditor for Preview</h2>
 
-<textarea id="vditorPreview" class="vditor-reset" style="width: 600px;margin: 0 auto;display:none">## Guide
 
-
 
-这是一篇讲解如何正确使用 **Markdown** 的排版示例，学会这个很有必要，能让你的文章有更佳清晰的排版。
 
-
 
-> 引用文本：Markdown is a text formatting syntax inspired
 
-
 
-## 语法指导
 
-
 
-### 普通内容
 
-
 
-这段内容展示了在内容里面一些排版格式，比如：
 
-
 
-- **加粗** - `**加粗**`
 
-- *倾斜* - `*倾斜*`
 
-- ~~删除线~~ - `~~删除线~~`
 
-- `Code 标记` - `` `Code 标记` ``
 
-- [超级链接](https://hacpai.com) - `[超级链接](https://hacpai.com)`
 
-- [[email protected]](mailto:[email protected]) - `[[email protected]](mailto:[email protected])`
 
-
 
-### 提及用户
 
-
 
-@Vanessa 通过 `@User` 可以在内容中提及用户，被提及的用户将会收到系统通知。
 
-
 
-> NOTE:
 
->
 
-> 1. @用户名之后需要有一个空格
 
-> 2. 新手没有艾特的功能权限
 
-
 
-### 表情符号 Emoji
 
-
 
-支持大部分标准的表情符号，可使用输入法直接输入，也可手动输入字符格式。通过输入 `:` 触发自动完成，可在个人设置中[设置常用表情](https://hacpai.com/settings/function)。
 
-
 
-#### 一些表情例子
 
-
 
-:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile:  :cry: :triumph: :heart_eyes: :relieved:
 
-:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :anger:
 
-
 
-### 大标题 - Heading 3
 
-
 
-你可以选择使用 H1 至 H6，使用 ##(N) 打头。建议帖子或回帖中的顶级标题使用 Heading 3，不要使用 1 或 2，因为 1 是系统站点级，2 是帖子标题级。
 
-
 
-> NOTE: 别忘了 # 后面需要有空格！
 
-
 
-#### Heading 4
 
-
 
-##### Heading 5
 
-
 
-###### Heading 6
 
-
 
-### 图片
 
-
 
-```
 
-![alt 文本](http://image-path.png)
 
-![alt 文本](http://image-path.png "图片 Title 值")
 
-```
 
-
 
-支持复制粘贴直接上传。
 
-
 
-### 代码块
 
-
 
-#### 普通
 
-
 
-```
 
-*emphasize*    **strong**
 
-_emphasize_    __strong__
 
-var a = 1
 
-```
 
-
 
-#### 语法高亮支持
 
-
 
-如果在 ``` 后面跟随语言名称，可以有语法高亮的效果哦，比如:
 
-
 
-##### 演示 Go 代码高亮
 
-
 
-```go
 
-package main
 
-
 
-import "fmt"
 
-
 
-func main() {
 
-	fmt.Println("Hello, 世界")
 
-}
 
-```
 
-
 
-##### 演示 Java 高亮
 
-
 
-```java
 
-public class HelloWorld {
 
-
 
-    public static void main(String[] args) {
 
-        System.out.println("Hello World!");
 
-    }
 
-
 
-}
 
-```
 
-
 
-> Tip: 语言名称支持下面这些: `ruby`, `python`, `js`, `html`, `erb`, `css`, `coffee`, `bash`, `json`, `yml`, `xml` ...
 
-
 
-### 有序、无序、任务列表
 
-
 
-#### 无序列表
 
-
 
-- Java
 
-  - Spring
 
-    - IoC
 
-    - AOP
 
-- Go
 
-  - gofmt
 
-  - Wide
 
-- Node.js
 
-  - Koa
 
-  - Express
 
-
 
-#### 有序列表
 
-
 
-1. Node.js
 
-   1.1. Express
 
-   1.2. Koa
 
-   1.3. Sails
 
-2. Go
 
-   2.1. gofmt
 
-   2.2. Wide
 
-3. Java
 
-   3.1. Latke
 
-   3.2. IDEA
 
-
 
-#### 任务列表
 
-
 
-- [x] 发布 Sym
 
-- [X] 发布 Solo
 
-- [ ] 预约牙医
 
-
 
-### 表格
 
-
 
-如果需要展示数据什么的，可以选择使用表格。
 
-
 
-| header 1 | header 3 |
 
-| -------- | -------- |
 
-| cell 1   | cell 2   |
 
-| cell 3   | cell 4   |
 
-| cell 5   | cell 6   |
 
-
 
-### 隐藏细节
 
-
 
-<details>
 
-<summary>这里是摘要部分。</summary>
 
-这里是细节部分。
 
-</details>
 
-
 
-### 段落
 
-
 
-空行可以将内容进行分段，便于阅读。（这是第一段）
 
-
 
-使用空行在 Markdown 排版中相当重要。（这是第二段）
 
-
 
-### 数学公式
 
-
 
-$$a^2 + b^2 = \color{red}c^2$$
 
-
 
-### 流程图
 
-
 
-```mermaid
 
-graph TB
 
-    c1-->a2
 
-    subgraph one
 
-    a1-->a2
 
-    end
 
-    subgraph two
 
-    b1-->b2
 
-    end
 
-    subgraph three
 
-    c1-->c2
 
-    end
 
-```
 
-
 
-### 时序图
 
-
 
-```mermaid
 
-sequenceDiagram
 
-    Alice->>John: Hello John, how are you?
 
-    loop Every minute
 
-        John-->>Alice: Great!
 
-    end
 
-```
 
-
 
-### 甘特图
 
-
 
-```mermaid
 
-gantt
 
-    title A Gantt Diagram
 
-    dateFormat  YYYY-MM-DD
 
-    section Section
 
-    A task           :a1, 2019-01-01, 30d
 
-    Another task     :after a1  , 20d
 
-    section Another
 
-    Task in sec      :2019-01-12  , 12d
 
-    another task      : 24d
 
-```
 
-
 
-### 图表
 
-
 
-```echarts
 
-{
 
-  "title": { "text": "最近 30 天" },
 
-  "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
 
-  "legend": { "data": ["帖子", "用户", "回帖"] },
 
-  "xAxis": [{
 
-      "type": "category",
 
-      "boundaryGap": false,
 
-      "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"],
 
-      "axisTick": { "show": false },
 
-      "axisLine": { "show": false }
 
-  }],
 
-  "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
 
-  "series": [
 
-    {
 
-      "name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
 
-      "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"]
 
+<script>
 
+  const vditor = new Vditor('vditor', {
 
+    counter: 100,
 
+    height: 300,
 
+    hint: {
 
+      emojiPath: 'https://static.hacpai.com/emoji/graphics',
 
+      emojiTail: '<a href="https://hacpai.com/settings/function" target="_blank">设置常用表情</a>',
 
+      emoji: {
 
+        'sd': '💔',
 
+        'huaji': 'https://unpkg.com/[email protected]/dist/images/emoji/huaji.gif',
 
+        'sym': '//static.b3log.org/images/brand/sym-128.png',
 
+        'pipe': '//static.b3log.org/images/brand/pipe-128.png',
 
+        'solo': '//static.b3log.org/images/brand/solo-128.png',
 
+        'wide': '//static.b3log.org/images/brand/wide-128.png',
 
+        'chainbook': '//static.b3log.org/images/brand/chainbook-128.png',
 
+        'vditor': '//static.b3log.org/images/brand/vditor-128.png',
 
+        'b3log': '//static.b3log.org/images/brand/b3log-128.png',
 
+        'bnd': '//static.b3log.org/images/brand/bnd-128.png',
 
+      },
 
     },
 
-    {
 
-      "name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
 
-      "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"]
 
+    tab: '\t',
 
+    upload: {
 
+      accept: 'image/*,.wav',
 
+      token: 'test',
 
+      url: '/api/upload/editor',
 
+      linkToImgUrl: '/api/upload/fetch',
 
+      filename (name) {
 
+        // ? \ / : | < > * [ ] white to -
 
+        return name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
 
+      },
 
     },
 
-    {
 
-      "name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
 
-      "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"]
 
-    }
 
-  ]
 
-}
 
-```
 
-
 
-### 五线谱
 
-
 
-```abc
 
-X: 24
 
-T: Clouds Thicken
 
-C: Paul Rosen
 
-S: Copyright 2005, Paul Rosen
 
-M: 6/8
 
-L: 1/8
 
-Q: 3/8=116
 
-R: Creepy Jig
 
-K: Em
 
-|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\
 
-"C7"_B2A "B7"=B3|"Em"EEE E2G|
 
-"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\
 
-1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|
 
-"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\
 
-"G"g2ab3|"Em"gfe"D"f2d|"Em"e3-e3:|
 
-```
 
-
 
-## 快捷键
 
-
 
-我们的编辑器支持很多快捷键，具体请参考 [键盘快捷键](https://hacpai.com/article/1474030007391)（或者按 "`?` ":smirk_cat:）
 
-</textarea>
 
-<h2>Vditor for jest puppeteer</h2>
 
-<div id="vditorTest"></div>
 
+    preview: {
 
+      mode: 'both',
 
+    },
 
+  })
 
+</script>
 
 </body>
 
 </html>

+ 0 - 195
demo/static.js
View File 

@@ -1,195 +0,0 @@
 
-const LazyLoadImage = () => {
 
-  const loadImg = (it) => {
 
-    const testImage = document.createElement('img')
 
-    testImage.src = it.getAttribute('data-src')
 
-    testImage.addEventListener('load', () => {
 
-      it.src = testImage.src
 
-      it.style.backgroundImage = 'none'
 
-      it.style.backgroundColor = 'transparent'
 
-    })
 
-    it.removeAttribute('data-src')
 
-  }
 
-
 
-  if (!('IntersectionObserver' in window)) {
 
-    document.querySelectorAll('img').forEach((data) => {
 
-      if (data.getAttribute('data-src')) {
 
-        loadImg(data)
 
-      }
 
-    })
 
-    return false
 
-  }
 
-
 
-  if (window.imageIntersectionObserver) {
 
-    window.imageIntersectionObserver.disconnect()
 
-    document.querySelectorAll('img').forEach(function (data) {
 
-      window.imageIntersectionObserver.observe(data)
 
-    })
 
-  } else {
 
-    window.imageIntersectionObserver = new IntersectionObserver((entries) => {
 
-      entries.forEach((entrie) => {
 
-        if ((typeof entrie.isIntersecting === 'undefined'
 
-          ? entrie.intersectionRatio !== 0
 
-          : entrie.isIntersecting) && entrie.target.getAttribute('data-src')) {
 
-          loadImg(entrie.target)
 
-        }
 
-      })
 
-    })
 
-    document.querySelectorAll('img').forEach(function (data) {
 
-      window.imageIntersectionObserver.observe(data)
 
-    })
 
-  }
 
-}
 
-
 
-Vditor.preview(document.getElementById('vditorPreview'))
 
-
 
-const vditor = new Vditor('vditor', {
 
-  counter: 100,
 
-  height: 300,
 
-  hint: {
 
-    emojiPath: 'https://static.hacpai.com/emoji/graphics',
 
-    emojiTail: '<a href="https://hacpai.com/settings/function" target="_blank">设置常用表情</a>',
 
-    emoji: {
 
-      'sd': '💔',
 
-      'huaji': 'https://unpkg.com/[email protected]/dist/images/emoji/huaji.gif',
 
-      'sym': '//static.b3log.org/images/brand/sym-128.png',
 
-      'pipe': '//static.b3log.org/images/brand/pipe-128.png',
 
-      'solo': '//static.b3log.org/images/brand/solo-128.png',
 
-      'wide': '//static.b3log.org/images/brand/wide-128.png',
 
-      'chainbook': '//static.b3log.org/images/brand/chainbook-128.png',
 
-      'vditor': '//static.b3log.org/images/brand/vditor-128.png',
 
-      'b3log': '//static.b3log.org/images/brand/b3log-128.png',
 
-      'bnd': '//static.b3log.org/images/brand/bnd-128.png',
 
-    },
 
-  },
 
-  tab: '\t',
 
-  upload: {
 
-    accept: 'image/*,.wav',
 
-    token: 'test',
 
-    url: '/api/upload/editor',
 
-    linkToImgUrl: '/api/upload/fetch',
 
-    filename (name) {
 
-      // ? \ / : | < > * [ ] white to -
 
-      return name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
 
-    },
 
-    handler (file) {
 
-      console.log(file)
 
-      return 'handler'
 
-    },
 
-  },
 
-  preview: {
 
-    mode: 'both',
 
-    parse: () => {
 
-      LazyLoadImage()
 
-    },
 
-  },
 
-})
 
-
 
-window.vditorTest = new Vditor('vditorTest', {
 
-  cache: true,
 
-  height: 200,
 
-  width: 500,
 
-  counter: 100,
 
-  resize: {
 
-    enable: true,
 
-    position: 'top',
 
-    after: height => {
 
-      console.log(`after resize, height change: ${height}`)
 
-    },
 
-  },
 
-  placeholder: 'say sth...',
 
-  lang: 'en_US',
 
-  preview: {
 
-    url: '/api/markdown',
 
-    parse: (element) => {
 
-      console.log(element)
 
-      LazyLoadImage()
 
-    },
 
-  },
 
-  hint: {
 
-    emojiPath: 'https://static.hacpai.com/emoji/graphics',
 
-    emojiTail: '<a href="https://hacpai.com/settings/function" target="_blank">设置常用表情</a>',
 
-    emoji: {
 
-      '+1': '👍',
 
-      '-1': '👎',
 
-      'trollface': 'https://unpkg.com/[email protected]/dist/images/emoji/trollface.png',
 
-      'huaji': 'https://unpkg.com/[email protected]/dist/images/emoji/huaji.gif',
 
-    },
 
-    at: (key) => {
 
-      console.log(`atUser: ${key}`)
 
-      return [
 
-        {
 
-          value: '@88250',
 
-          html: '<img src="https://img.hacpai.com/avatar/1353745196354_1535379434567.png?imageView2/1/w/52/h/52/interlace/0/q"> 88250',
 
-        },
 
-        {
 
-          value: '@Vanessa',
 
-          html: '<img src="https://img.hacpai.com/avatar/1353745196354_1535379434567.png?imageView2/1/w/52/h/52/interlace/0/q"> Vanessa',
 
-        }]
 
-    },
 
-  },
 
-  focus: (val) => {
 
-    console.log(`focus value: ${val}`)
 
-  },
 
-  blur: (val) => {
 
-    console.log(`blur: ${val}`)
 
-  },
 
-  input: (val, mdElement) => {
 
-    console.log('change:' + val, mdElement)
 
-  },
 
-  esc: (val) => {
 
-    console.log(`esc: ${val}`)
 
-    console.log(
 
-      `cursor position:${JSON.stringify(vditorTest.getCursorPosition())}`)
 
-  },
 
-  ctrlEnter: (val) => {
 
-    console.log(`ctrlEnter: ${val}`)
 
-  },
 
-  select: (val) => {
 
-    console.log('select:', val)
 
-  },
 
-  upload: {
 
-    accept: 'image/*,.pdf',
 
-    token: 'test',
 
-    url: '/api/upload/editor',
 
-    linkToImgUrl: '/api/upload/fetch',
 
-    filename: name => {
 
-      // ? \ / : | < > * [ ] white to -
 
-      return name.replace(/\?|\\|\/|:|\||<|>|\*|\[|\]|\s+/g, '-')
 
-    },
 
-  },
 
-  toolbar: [
 
-    {
 
-      hotkey: '⌘-⇧-f',
 
-      name: 'format',
 
-      tipPosition: 'ne',
 
-      tip: 'format',
 
-      icon: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="0 0 768 768"><path d="M342 426v-84h426v84h-426zM342 256v-86h426v86h-426zM0 0h768v86h-768v-86zM342 598v-86h426v86h-426zM0 214l170 170-170 170v-340zM0 768v-86h768v86h-768z"></path></svg>',
 
-      click: () => {
 
-        alert('custom toolbar')
 
-      },
 
-    },
 
-    {
 
-      name: 'preview',
 
-      tipPosition: 'ne',
 
-    },
 
-    {
 
-      name: 'both',
 
-      tipPosition: 'ne',
 
-    },
 
-    'br',
 
-    {
 
-      name: 'emoji',
 
-    },
 
-    'strike',
 
-    {
 
-      name: 'download',
 
-      tipPosition: 'nw',
 
-      tip: '下载',
 
-      icon: '<svg t="1566271629641" class="icon" viewBox="0 0 1092 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1960" xmlns:xlink="http://www.w3.org/1999/xlink" width="34.125" height="32"><defs><style type="text/css"></style></defs><path d="M1044.753067 902.3488H47.5136a47.5136 47.5136 0 0 0 0 94.890667h997.239467a45.806933 45.806933 0 0 0 33.5872-13.858134 47.5136 47.5136 0 0 0-33.5872-81.032533z m-522.4448-103.970133a33.450667 33.450667 0 0 0 23.825066 8.874666 33.450667 33.450667 0 0 0 23.825067-8.874666l302.2848-290.952534c7.509333-7.236267 8.874667-16.452267 3.6864-24.7808-5.188267-8.3968-32.768-7.714133-44.8512-7.714133h-118.784V47.5136c0-25.941333-13.789867-47.5136-47.445333-47.5136H427.4176c-33.655467 0-47.5136 21.572267-47.5136 47.5136v427.349333H237.431467c-12.014933 0-15.906133-0.6144-21.162667 7.7824-5.188267 8.328533-3.754667 17.544533 3.6864 24.7808l302.421333 290.952534z" p-id="1961"></path></svg>',
 
-      click:
 
-        () => {
 
-          alert('download')
 
-        },
 
-    },
 
-  ],
 
-})

+ 7 - 1
webpack.start.js
View File 

@@ -2,7 +2,7 @@
 
  * @fileoverview demo.
 
  *
 
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
 
- * @version 0.2.0.0, Sep 2, 2019
 
+ * @version 0.3.0.0, Sep 3, 2019
 
  */
 
 
 const path = require('path')
 
@@ -21,6 +21,7 @@ module.exports = {
 
   },
 
   entry: {
 
     'index.js': './demo/index.js',
 
+    'index-preview.js': './demo/index-preview.js',
 
   },
 
   resolve: {
 
     extensions: ['.js', '.ts', '.svg', '.png', '.scss'],
 
@@ -111,6 +112,11 @@ module.exports = {
 
       filename: './index.html',
 
       template: './demo/index.html',
 
     }),
 
+    new HtmlWebpackPlugin({
 
+      chunks: ['index-preview.js'],
 
+      filename: './index-preview.html',
 
+      template: './demo/index-preview.html',
 
+    }),
 
     new webpack.DefinePlugin({
 
       VDITOR_VERSION: JSON.stringify(pkg.version),
 
       CDN_PATH: JSON.stringify(pkg.cdn),