Editor.js Embed 工具常见问题解决方案

Editor.js Embed 工具常见问题解决方案

embed Embed Tool for Editor.js 项目地址: https://gitcode.com/gh_mirrors/embed/embed

1. 项目基础介绍和主要编程语言

Editor.js Embed 是一个开源项目，为 Editor.js 编辑器提供了一个嵌入内容工具。这个工具能够处理 Editor.js 中粘贴的特定服务链接，并自动生成嵌入的 iframe 内容。项目主要使用的编程语言是 JavaScript。

2. 新手常见问题及解决步骤

问题一：如何安装和引入 Editor.js Embed 工具？

解决步骤：

1. 使用 npm 或 yarn 安装包：

   npm add @editorjs/embed
   

   或者

   yarn add @editorjs/embed
   

2. 在你的应用中引入模块：

   import Embed from '@editorjs/embed';
   

   或者，你也可以从 CDN 加载这个工具。

问题二：如何在 Editor.js 配置中添加 Embed 工具？

解决步骤：

1. 在 Editor.js 的初始化配置中，添加 embed 工具：

   var editor = new EditorJS({
       tools: {
           embed: {
               class: Embed,
               config: {
                   // 这里可以配置服务支持
               }
           }
       }
   });
   

2. 如果需要启用或禁用某些服务，可以在配置中指定：

   config: {
       services: {
           youtube: true,
           coub: true
           // 更多服务...
       }
   }
   

问题三：如何添加自定义服务支持？

解决步骤：

1. 创建一个服务配置对象，包含以下字段：

   • regex: 正则表达式，用于匹配粘贴的 URL。
   • embedUrl: 资源的嵌入页面 URL，使用 <%= remote_id %> 来代替资源标识符。
   • html: iframe 的 HTML 代码，其中 embedUrl 会被设置为 iframe 的 src。

2. 将该服务配置对象添加到 Editor.js 的 embed 工具配置中：

   config: {
       services: {
           customService: {
               regex: /your-custom-regex/,
               embedUrl: 'https://your-service.com/embed/<%= remote_id %>',
               html: '<iframe src="<%= embedUrl %>" height="300"></iframe>'
           },
           // 其他服务...
       }
   }
   

以上是新手在使用 Editor.js Embed 工具时可能遇到的三个常见问题及其解决步骤。希望这些建议能帮助您更好地理解和使用这个工具。

embed Embed Tool for Editor.js 项目地址: https://gitcode.com/gh_mirrors/embed/embed