链接工具

链接块 编辑.js。 。 。 .

特征

允许在文章中添加链接预览 .

说明: 此工具需要服务器侧执行来获取链接数据 。 见 后端响应格式 更多细节.

安装

拿到包裹

yarn add @editorjs/link

在您的应用程序中包含模块

import LinkTool from '@editorjs/link';

您可以选择从 CDN 装入此工具 JsDelivr CDN (英语)

使用量

添加新工具到 tools 的属性.

const editor = EditorJS({
  ...

  tools: {
    ...
    linkTool: {
      class: LinkTool,
      config: {
        endpoint: 'http://localhost:8008/fetchUrl', // Your backend endpoint for url data fetching,
      }
    }
  },

  ...
});

配置参数

链接工具支持这些配置参数 :

产出数据

此工具返回 data 采用以下格式

{
    "type" : "linkTool",
    "data" : {
        "link" : "https://codex.so",
        "meta" : {
            "title" : "CodeX Team",
            "site_name" : "CodeX",
            "description" : "Club of web-development, design and marketing. We build team learning how to build full-valued projects on the world market.",
            "image" : {
                "url" : "https://codex.so/public/app/img/meta_img.png"
            }
        }
    }
}

后端响应格式

您可以对获取自己方式的链接数据实施后端。 这是一个具体和无关紧要的任务 取决于你 环境与堆栈.

后端响应 应 包含以下格式:

{
    "success" : 1,
    "link": "https://codex.so", // Optionally return a link to set the hyperlink URL
    "meta": {
        // ... any fields you want
    }
}

成功 ——上传状态. 1个成功, 0个失败

链接 - 可选响应参数,以覆盖所提供的 URL

元数据a 链接获取的数据.

目前,插件的设计支持"标题","图像"和"描述"字段. 答复中应采用以下形式:

{
    "success" : 1,
    "meta": {
        "title" : "CodeX Team",
        "description" : "Club of web-development, design and marketing. We build team learning how to build full-valued projects on the world market.",
        "image" : {
            "url" : "https://codex.so/public/app/img/meta_img.png"
        }
    }
}

另外,它还可以包含任何您想要存储的额外字段 .

关于代码X

CodeX是一个由全球数字专家组成的团队,他们有兴趣在全球市场上建立高质量的开源产品. 我们是 打开 帮助那些希望不断提高技能并专业地发展尖端技术的年轻人.