{"_id":"@clobar-wangeditor-next/plugin-link-card","name":"@clobar-wangeditor-next/plugin-link-card","dist-tags":{"latest":"1.0.32"},"versions":{"1.0.32":{"name":"@clobar-wangeditor-next/plugin-link-card","version":"1.0.32","description":"wangEditor link card plugin","author":{"name":"cycleccc","email":"2991205548@qq.com"},"type":"module","homepage":"https://github.com/wangeditor-next/wangEditor-next#readme","license":"MIT","types":"dist/plugin-link-card/src/index.d.ts","main":"dist/index.js","module":"dist/index.mjs","exports":{".":{"types":"./dist/plugin-link-card/src/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./dist/css/style.css":"./dist/css/style.css"},"directories":{"lib":"dist"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/wangeditor-next/wangEditor-next.git"},"bugs":{"url":"https://github.com/wangeditor-next/wangeditor-next/issues"},"peerDependencies":{"@clobar-wangeditor-next/editor":"5.6.47","dom7":"^3.0.0 || ^4.0.0","slate":"^0.82.0","snabbdom":"^3.6.0"},"devDependencies":{"@clobar-wangeditor-next-shared/rollup-config":"^0.0.2"},"scripts":{"dev":"cross-env NODE_ENV=development rollup -c rollup.config.js","dev-watch":"cross-env NODE_ENV=development rollup -c rollup.config.js -w","build":"cross-env NODE_ENV=production rollup -c rollup.config.js","dev-size-stats":"cross-env NODE_ENV=development:size_stats rollup -c rollup.config.js","size-stats":"cross-env NODE_ENV=production:size_stats rollup -c rollup.config.js"},"_id":"@clobar-wangeditor-next/plugin-link-card@1.0.32","_integrity":"sha512-Skww2lPVxZq1/WdQpWP9/cL/HXjKKKO9xfayTOzB/My2bDK6obmgw2ZHLBtg2NHWQJtvVPJUAgu5S71gv82tZA==","_resolved":"/private/var/folders/7f/kx3tpvx12z9bd69s5gj7mv840000gn/T/58bb47fa4656b766b65cc28e1a9cf2ea/clobar-wangeditor-next-plugin-link-card-1.0.32.tgz","_from":"file:clobar-wangeditor-next-plugin-link-card-1.0.32.tgz","_nodeVersion":"20.18.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-Skww2lPVxZq1/WdQpWP9/cL/HXjKKKO9xfayTOzB/My2bDK6obmgw2ZHLBtg2NHWQJtvVPJUAgu5S71gv82tZA==","shasum":"a26bd7ad3e1cd30bc939f5d19b1c1f40d9503ade","tarball":"https://registry.npmjs.org/@clobar-wangeditor-next/plugin-link-card/-/plugin-link-card-1.0.32.tgz","fileCount":421,"unpackedSize":734168,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD4ZhL67dyTKQwOvlD7rFTmNGRKgZQu57oVN3gRjM+gagIhAKttnz7hPCfzw+sgxy1zcwXSUL22/pTo2btK5yepXF6r"}]},"_npmUser":{"name":"dingzhanjun","email":"dingzhanjun@gmail.com"},"maintainers":[{"name":"dingzhanjun","email":"dingzhanjun@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/plugin-link-card_1.0.32_1761748676137_0.5916657745472318"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-29T14:37:56.062Z","1.0.32":"2025-10-29T14:37:56.393Z","modified":"2025-10-29T14:37:56.644Z"},"maintainers":[{"name":"dingzhanjun","email":"dingzhanjun@gmail.com"}],"description":"wangEditor link card plugin","homepage":"https://github.com/wangeditor-next/wangEditor-next#readme","repository":{"type":"git","url":"git+https://github.com/wangeditor-next/wangEditor-next.git"},"author":{"name":"cycleccc","email":"2991205548@qq.com"},"bugs":{"url":"https://github.com/wangeditor-next/wangeditor-next/issues"},"license":"MIT","readme":"# wangEditor 链接卡片 插件\n\n[English Documentation](./README-en.md)\n\n## 介绍\n\n[wangEditor-next](https://wangeditor-next.github.io/docs/) 链接卡片 插件。\n\n![链接卡片演示 (Link Card Demo)](./_img/demo.png)\n\n## 安装\n\n```shell\nyarn add @clobar-wangeditor-next/plugin-link-card\n```\n\n## 使用\n\n### 注册到编辑器\n\n```js\nimport { Boot } from '@clobar-wangeditor-next/editor'\nimport linkCardModule from '@clobar-wangeditor-next/plugin-link-card'\n\n// 注册。要在创建编辑器之前注册，且只能注册一次，不可重复注册。\nBoot.registerModule(linkCardModule)\n```\n\n### 配置\n\n编辑器配置\n\n```ts\nimport { IEditorConfig } from '@clobar-wangeditor-next/editor'\n\nconst editorConfig: Partial = {\n hoverbarKeys: {\n // 在编辑器中，选中链接文本时，要弹出的菜单\n link: {\n menuKeys: [\n 'editLink', 'unLink', 'viewLink', // 默认的配置可以通过 `editor.getConfig().hoverbarKeys.link` 获取\n 'convertToLinkCard' // 增加 '转为链接卡片'菜单\n ],\n },\n },\n\n MENU_CONF: {\n // '转为链接卡片'菜单的配置\n convertToLinkCard: {\n // 自定义获取 link-card 信息，可选\n // 返回 { title, iconImgSrc }\n async getLinkCardInfo(linkText: string, linkUrl: string) {\n // 1. 可通过 iframe 加载网页，然后获取网页 title 和其中的图片\n // 2. 服务端获取（有些网页会设置 `X-Frame-Options` ，无法通过 iframe 加载）\n\n // // 模拟异步返回\n // return new Promise(resolve => {\n // setTimeout(() => {\n // const info = { title: linkText, iconImgSrc: '' }\n // resolve(info)\n // }, 100)\n // })\n }\n },\n\n // 其他...\n },\n\n // 其他...\n}\n```\n\n然后创建编辑器和工具栏，会用到 `editorConfig` 。具体查看 wangEditor 文档。\n\n### 显示 HTML\n\n一个 link-card 节点产出的 HTML 格式如下\n\n```html\n
\n
\n
\n

百度新闻

\n
\n
http://news.baidu.com/
\n
\n
\n \n
\n
\n```\n\n渲染这段 HTML 需要自己定义 CSS 样式，可参考\n\n```css\ndiv[data-w-e-type=\"link-card\"] {\n width: 450px;\n margin: 0 auto;\n background-color: #f1f1f1;\n border-radius: 10px;\n display: flex;\n padding: 10px 20px;\n cursor: pointer;\n}\ndiv[data-w-e-type=\"link-card\"] .info-container {\n flex: 1;\n padding-right: 20px;\n}\ndiv[data-w-e-type=\"link-card\"] .info-container p {\n margin-top: 5px;\n font-weight: bold;\n}\ndiv[data-w-e-type=\"link-card\"] .info-container span {\n opacity: .5;\n}\ndiv[data-w-e-type=\"link-card\"] .icon-container {\n width: 64px;\n overflow: hidden;\n}\ndiv[data-w-e-type=\"link-card\"] .icon-container img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n```\n\n## 其他\n\n支持 i18n 多语言\n\n","readmeFilename":"README.md","_rev":"1-7f26d89b227cf3e64e7f8d3e486d4097"}