refactor: 产出 HTML 使用 a 标签

DEV.md

@@ -11,6 +11,10 @@
 
 `yarn dev` 启动本地服务，**使用 example 目录**。
 
+PS：需启动 https://github.com/wangeditor-team/server 创建一个服务端，提供上传接口
+
+## 单元测试
+
 `yarn test` 单元测试，使用 test 目录。
 
 ## build 构建

README-en.md

@@ -156,7 +156,7 @@ Failed，will trigger `onFailed` function.
 You will get a attachment's HTML format like this
 
 ```html
-<span data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline data-link="https://xxx.com/aaa/bbb/xxx.zip" data-fileName="xxx.zip">xxx.zip</span>
+<a data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline href="https://xxx.com/aaa/bbb/xxx.zip" download="xxx.zip">xxx.zip</a>
 ```
 
 ## Others

README.md

@@ -16,6 +16,8 @@ yarn add @wangeditor/plugin-upload-attachment
 
 ## 使用
 
+【注意】该文档要求 `@wangeditor/editor` 版本 `>=5.1.16`
+
 ### 注册到编辑器
 
 ```js
@@ -34,6 +36,7 @@ Boot.registerModule(attachmentModule)
 import { IEditorConfig } from '@wangeditor/editor'
 
 const editorConfig: Partial<IEditorConfig> = {
+
   // 在编辑器中，点击选中“附件”节点时，要弹出的菜单
   hoverbarKeys: {
     attachment: {
@@ -160,7 +163,7 @@ const toolbarConfig: Partial<IToolbarConfig> = {
 附件节点获取的 HTML 格式如下，可以直接显示。
 
 ```html
-<span data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline data-link="https://xxx.com/aaa/bbb/xxx.zip" data-fileName="xxx.zip">xxx.zip</span>
+<a data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline href="https://xxx.com/aaa/bbb/xxx.zip" download="xxx.zip">xxx.zip</a>
 ```
 
 ## 其他

build/webpack.dev.js

@@ -9,7 +9,7 @@ module.exports = merge(webpackCommonConf, {
   mode: 'development',
   entry: path.join(examplePath, 'index'),
   devServer: {
-    port: 3000,
+    port: 8000,
     progress: true, // 显示打包的进度条
     contentBase: distPath, // 根目录
     // open: true,  // 自动打开浏览器

example/index.ts

@@ -34,7 +34,7 @@ const editorConfig: Partial<IEditorConfig> = {
   MENU_CONF: {
     // 上传附件的菜单配置
     uploadAttachment: {
-      server: 'http://106.12.198.214:3000/api/upload-video', //一个文件地址
+      server: 'http://127.0.0.1:3000/api/upload-video', //一个文件地址
       timeout: 5 * 1000, // 5s
 
       fieldName: 'custom-fileName',
@@ -118,13 +118,33 @@ const editor = createEditor({
   //       },
   //     ],
   //   },
+  // {
+  //   "type": "paragraph",
+  //   "children": [
+  //     {
+  //       "text": " "
+  //     },
+  //     {
+  //       "type": "link",
+  //       "url": "http://localhost:8000/",
+  //       "children": [
+  //         {
+  //           "text": "http://localhost:8000/"
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       "text": " "
+  //     }
+  //   ]
+  // },
   //   {
   //     // @ts-ignore
   //     type: 'paragraph',
   //     children: [{ text: '选一个视频文件，作为附件上传：' }],
   //   },
   // ],
-  html: '<p>hello&nbsp;world<span data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline data-link="https://pan.baidu.com/" data-fileName="附件文件名"></span></p><p>选一个视频文件，作为附件上传：</p>',
+  html: '<p>hello world<a data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline href="https://pan.baidu.com/" download="附件文件名">附件文件名</a></p><p> <a href="http://localhost:8000/" target="_blank">http://localhost:8000/</a> </p><p>选一个视频文件，作为附件上传：</p>',
 })
 const toolbar = createToolbar({
   editor,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangeditor/plugin-upload-attachment",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "wangEditor 上传附件",
   "repository": {
     "type": "git",
@@ -58,7 +58,7 @@
     "@types/jest": "^27.4.0",
     "@typescript-eslint/eslint-plugin": "^5.12.0",
     "@typescript-eslint/parser": "^5.12.0",
-    "@wangeditor/editor": "^5.0.0",
+    "@wangeditor/editor": "^5.1.16",
     "autoprefixer": "^10.2.5",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.2",
@@ -97,7 +97,7 @@
   },
   "peerDependencies": {
     "@uppy/core": "^2.1.5",
-    "@wangeditor/editor": ">=5.0.0",
+    "@wangeditor/editor": ">=5.1.16",
     "snabbdom": "^3.3.1"
   },
   "dependencies": {

src/module/elem-to-html.ts

@@ -9,7 +9,7 @@ import { AttachmentElement } from './custom-types'
 // 生成 html 的函数
 function attachmentToHtml(elem: SlateElement, childrenHtml: string): string {
   const { link = '', fileName = '' } = elem as AttachmentElement
-  return `<span data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline data-link="${link}" data-fileName="${fileName}">${fileName}</span>`
+  return `<a data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline href="${link}" download="${fileName}">${fileName}</a>`
 }
 
 // 配置

src/module/parse-elem-html.ts

@@ -12,8 +12,8 @@ function parseHtml(
   children: SlateDescendant[],
   editor: IDomEditor
 ): SlateElement {
-  const link = elem.getAttribute('data-link') || ''
-  const fileName = elem.getAttribute('data-fileName') || ''
+  const link = elem.getAttribute('href') || ''
+  const fileName = elem.getAttribute('download') || ''
   return {
     type: 'attachment',
     link,
@@ -23,7 +23,7 @@ function parseHtml(
 }
 
 const parseHtmlConf = {
-  selector: 'span[data-w-e-type="attachment"]',
+  selector: 'a[data-w-e-type="attachment"]',
   parseElemHtml: parseHtml,
 }
 

test/module/elem-to-html.test.ts

@@ -23,7 +23,7 @@ describe('attachment elem-to-html', () => {
   it('elem to html', () => {
     const html = elemToHtmlConf.elemToHtml(attachmentElem, '')
     expect(html).toBe(
-      `<span data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline data-link="${link}" data-fileName="${fileName}">${fileName}</span>`
+      `<a data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline href="${link}" download="${fileName}">${fileName}</a>`
     )
   })
 })

test/module/parse-elem-html.test.ts

@@ -11,17 +11,17 @@ describe('parse elem html', () => {
   const editor = createEditor()
 
   it('selector', () => {
-    expect(parseHtmlConf.selector).toBe('span[data-w-e-type="attachment"]')
+    expect(parseHtmlConf.selector).toBe('a[data-w-e-type="attachment"]')
   })
 
   it('parse html', () => {
     const link = 'aaa'
     const fileName = 'bbb'
-    // elem-to-html 产出的 html 格式： <span data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline data-link="${link}" data-fileName="${fileName}">${fileName}</span>
-    const elem = document.createElement('span')
+    // elem-to-html 产出的 html 格式： <a data-w-e-type="attachment" data-w-e-is-void data-w-e-is-inline href="${link}" download="${fileName}">${fileName}</a>
+    const elem = document.createElement('a')
     elem.setAttribute('data-w-e-type', 'attachment')
-    elem.setAttribute('data-link', link)
-    elem.setAttribute('data-fileName', fileName)
+    elem.setAttribute('href', link)
+    elem.setAttribute('download', fileName)
 
     const attachment = parseHtmlConf.parseElemHtml(elem, [], editor) as AttachmentElement
     expect(attachment.type).toBe('attachment')

test/module/plugin.test.ts

@@ -11,8 +11,8 @@ describe('attachment plugin', () => {
   const editor = withAttachment(createEditor())
   const elem: AttachmentElement = {
     type: 'attachment',
-    link: 'a',
-    fileName: 'b',
+    link: 'x',
+    fileName: 'y',
     children: [{ text: '' }],
   }
 

test/module/render-elem.test.ts

@@ -14,7 +14,7 @@ describe('attachment render-elem', () => {
   const attachmentElem: AttachmentElement = {
     type: 'attachment',
     fileName,
-    link: 'a',
+    link: 'x',
     children: [{ text: '' }],
   }
 

yarn.lock

@@ -1885,24 +1885,24 @@
     "@uppy/utils" "^4.0.4"
     nanoid "^3.1.25"
 
-"@wangeditor/basic-modules@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/basic-modules/-/basic-modules-1.0.0.tgz#07e8f9096876da5437e2126ed53a2e8b9ea8c802"
-  integrity sha512-s+xkK6UbQg7ALzd6IxpnYdxMOZMOj6v4lPYYF0xVE5yjGsoZ1Ez/meTSH7MErE4lH/8ZAt2opfEe5B4jhgVBvg==
+"@wangeditor/basic-modules@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.npmmirror.com/@wangeditor/basic-modules/-/basic-modules-1.1.4.tgz#bc8b63732946b3ce962d92be25ca48de78f3b19c"
+  integrity sha512-jIl3Rzsl+URdF8fbpWNFCHC+93hfHkngROXltcH6VUx5XW++1NiqwlLGMnPmidmThlqnjrdpeq3qtelHZqg29g==
   dependencies:
     is-url "^1.2.4"
 
-"@wangeditor/code-highlight@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/code-highlight/-/code-highlight-1.0.0.tgz#b7a95e742827c63130b9273cdc3ce153f6e60884"
-  integrity sha512-1l97wm9K2GKcENDNrHgPa+9qPkXtvcyxHnMvmIxxLe8VoPcc8URQDf7FO2ZQYkGqsZiL6NdYgVT79gRh9vLsUQ==
+"@wangeditor/code-highlight@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/@wangeditor/code-highlight/-/code-highlight-1.0.3.tgz#90256857714d5c0cf83ac475aea64db7bf29a7cd"
+  integrity sha512-iazHwO14XpCuIWJNTQTikqUhGKyqj+dUNWJ9288Oym9M2xMVHvnsOmDU2sgUDWVy+pOLojReMPgXCsvvNlOOhw==
   dependencies:
     prismjs "^1.23.0"
 
-"@wangeditor/core@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/core/-/core-1.0.0.tgz#0eb1d691672443068e1c2255629d0ca4c8de39f6"
-  integrity sha512-rHtDLEWbfyGjK8oQPfk+O0OckhsDc4nDulaci9hSR69+KqcIQAc6s7qkoUEuMuGax+Q3Csg8yDCGogWDQ7OPQA==
+"@wangeditor/core@^1.1.12":
+  version "1.1.12"
+  resolved "https://registry.npmmirror.com/@wangeditor/core/-/core-1.1.12.tgz#37f4b8bcc34cc832ed62174d9fb206b11007fac3"
+  integrity sha512-u6NBap1fHldFkxTLYdpezsGsi+a8F3ES0Bg6pu2TCQm4Qwl6xV0yvehFxZnOPomL+GrVGuCrvvOLnr9T3zntEg==
   dependencies:
     "@types/event-emitter" "^0.3.3"
     event-emitter "^0.3.5"
@@ -1911,20 +1911,20 @@
     scroll-into-view-if-needed "^2.2.28"
     slate-history "^0.66.0"
 
-"@wangeditor/editor@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/editor/-/editor-5.0.0.tgz#8ccca4bee639343e560a78b7063c63a1013724a2"
-  integrity sha512-yOoGafe8lH3oXGDuWs7niZPTCPQNuqqcWA7638cusI41FTRO+0G638HWLq3gpKpnp+kTzxzXxNlC4ok0sK71pw==
+"@wangeditor/editor@^5.1.16":
+  version "5.1.16"
+  resolved "https://registry.npmmirror.com/@wangeditor/editor/-/editor-5.1.16.tgz#0091953f852459acafd7973e1b7fcb708af72ea1"
+  integrity sha512-XmzO29pGz5rK/JS9ML7RxMXprR1YoX3wLsJIOj037U2HbP3tZ1QDcI/nCSQP3gCTA0o8/fD2P/WvxaZ6fEt7Mg==
   dependencies:
     "@uppy/core" "^2.1.1"
     "@uppy/xhr-upload" "^2.0.3"
-    "@wangeditor/basic-modules" "^1.0.0"
-    "@wangeditor/code-highlight" "^1.0.0"
-    "@wangeditor/core" "^1.0.0"
-    "@wangeditor/list-module" "^1.0.0"
-    "@wangeditor/table-module" "^1.0.0"
-    "@wangeditor/upload-image-module" "^1.0.0"
-    "@wangeditor/video-module" "^1.0.0"
+    "@wangeditor/basic-modules" "^1.1.4"
+    "@wangeditor/code-highlight" "^1.0.3"
+    "@wangeditor/core" "^1.1.12"
+    "@wangeditor/list-module" "^1.0.3"
+    "@wangeditor/table-module" "^1.1.2"
+    "@wangeditor/upload-image-module" "^1.0.1"
+    "@wangeditor/video-module" "^1.1.2"
     dom7 "^3.0.0"
     is-hotkey "^0.2.0"
     lodash.camelcase "^4.3.0"
@@ -1938,25 +1938,25 @@
     slate "^0.72.0"
     snabbdom "^3.1.0"
 
-"@wangeditor/list-module@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.0.tgz#654c64b345648445dc032c63331a31980cb064e2"
-  integrity sha512-kRh8qqmebqCBJAiINFJnfQP6hA0wBqKOVWcSaQgUiDRC2PRf91HQrCjdza8xeaNzB+/qAPLbz/lmp+ru/1v1Yg==
+"@wangeditor/list-module@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.3.tgz#52b12ed61b5cd48a591e835b4d2cb41feec0b5ac"
+  integrity sha512-hH1OZGT0pBPSywFyGELkPHh9bGJQk5fcGgP9S3cXcQYxrPPhnAKjCCr5YzFzZhaSI6Epj83HfOHaAelEjkibNg==
 
-"@wangeditor/table-module@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.0.0.tgz#a279680cf8203f63013a42bb17f9a004d64f4b0c"
-  integrity sha512-+DDRjKgBJn24oczx6skEjP5ApggThzTxG8I9tbGmEF3wPQFmidiW+OEiMON57bqMMmQ51qMVeYl1vL4BcYm3ew==
+"@wangeditor/table-module@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.2.tgz#a361045a78cd21399cdcde3c04cffadba2db8c36"
+  integrity sha512-HavBTzHxdk0+CLPR4KrYCQmOoJ5t5J6UQuFUb2lO7n9YPIF2W/0xsNDK5Nkw/AsKjwYkqfUdG+6QbS1jV2Vdng==
 
-"@wangeditor/upload-image-module@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.0.tgz#2d22cb9d51e8d8d77e380e12dbf436b7b47a819c"
-  integrity sha512-WaxtlgxfEP7/+Qo4JA0wOtEBn4uqNRDoWPshbzB25J0KeMaHpst9DvpqCjMxYBzjYjtJoEhYeyazvrT/vnzzzA==
+"@wangeditor/upload-image-module@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@wangeditor/upload-image-module/-/upload-image-module-1.0.1.tgz#a074518d73ce9c5cfd3e8ee56d1adf831996f142"
+  integrity sha512-vgUV4ENttTITblqtVuzleIq732OmzmzzgrIvX6b3GRGPSw5u8glJ/87tOEhvHjHECc4oFo18B7xzJ1GpBj79/w==
 
-"@wangeditor/video-module@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.0.0.tgz#0302b99012e17e864e1c64f84fe561183cf19052"
-  integrity sha512-TBN+aUWVFR4Og1+usqLsVZQ/SbFVy238SnZcJ6fanhm1VAFbi8CMU40OO9iXmFcVNe0yh+8EPvNuULNgb0f5xA==
+"@wangeditor/video-module@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/@wangeditor/video-module/-/video-module-1.1.2.tgz#ad6a2217504130a318aceec7842a922c702374e7"
+  integrity sha512-y8pMejpQ/AnAQZx+A86sGFo+ockg4tSc3oKpuN+1xFbnYMF6Tb+t7yt3+qY/ZJ2FffL635wxZpYbQWOboNUn9g==
 
 "@webassemblyjs/[email protected]":
   version "1.11.1"