个性化工具
个人特性工具 编辑.js。 。 。 .
特征
此工具允许您在文章中创建个性块 .
说明 工具需要服务器侧执行来进行图像上传. 见 后端响应格式 更多细节.
拿到包裹
你可以用这些方法得到包裹.
通过国家预防机制安装
拿到包裹
npm i --save-dev @editorjs/personality
在您的应用程序中包含模块
const Personality = require('@editorjs/personality');
下载到您的工程源目录
- 上传文件夹
dist从仓库 - 添加
dist/bundle.js文档到您的页面.
从 CDN 装入
您可以装入特定版本的软件包 jsDelivr CDN 请检查url=值 (帮助)。 。 。 .
https://cdn.jsdelivr.net/npm/@editorjs/[email protected]
然后在页面上要求使用 Editor.js 通过 <script src=""></script> 标签.
使用量
添加新工具到 tools 的属性.
var editor = EditorJS({
...
tools: {
...
personality: {
class: Personality,
config: {
endpoint: 'http://localhost:8008/uploadFile' // Your backend file uploader endpoint
}
}
}
...
});
配置参数
个性工具支持这些配置参数 :
| 外地 | 类型 | 说明 |
|---|---|---|
| 结束点 | string | 需求 图片上传的终点 . |
| 字段 | string | (默认 : image) POST 请求中上传的图像字段名称 |
| 类型 | string | (默认 : image/*) MIME 类型的文件,可以是 通过文件选择接受。 。 。 . |
| 标记符 | string | (默认 : Name名称字段的占位符 |
| 说明 占位符 | string | (默认 : Description描述字段的占位符 |
| 链接标记符 | string | (默认 : Link链接字段占位符 |
产出数据
此工具返回 data 采用以下格式
| 外地 | 类型 | 说明 |
|---|---|---|
| 名称 | string | 个人姓名 |
| 说明 | string | 人物描述 |
| 链接 | string | 个人网站链接 |
| 图片 | string | 从后端上传了图像 URL . |
{
"type" : "personality",
"data" : {
"name" : "Elon Musk",
"description" : "Elon Reeve Musk FRS is a technology entrepreneur, investor, and engineer. He holds South African, Canadian, and U.S. citizenship and is the founder",
"link" : "https://twitter.com/elonmusk",
"photo" : "https://capella.pics/3c0e1b97-bc56-4961-b54e-2a6c2c3260f2.jpg"
}
}
后端响应格式
此工具用于从设备上传文件
设想:
- 用户从设备中选择文件
- 工具发送到 后端( 打开)
config.endpoint.byFile路线) - 您的后端应该以指定格式保存文件并返回 JSON 文件数据 .
- 个性化工具显示已保存的图像并存储服务器答案
因此,您可以通过自己的方式执行文件保存的后端. 这是一个具体和无关紧要的任务 取决于你 环境与堆栈.
您的上传器的反应 应 包含以下格式:
{
"success" : 1,
"file": {
"url" : "https://capella.pics/3c0e1b97-bc56-4961-b54e-2a6c2c3260f2.jpg"
}
}
成功 - 上传状态 1个成功, 0个失败
文件 - 上传的文件数据. 必须 包含一个 url 字段,有完整上传图像的公开路径.