Editorjs 使用入门
hefengbao 发布于 2022.12.02 ，最后更新于 2024.11.29
Editorjs ，一款 block 风格的开源编辑器 ，使用简单，无需像 Markdown 那样需要学习特定的语法，内容解析成 json 格式，可以方便的保存到数据库中。
标题、代码、列表等都是以插件的形式提供的，开发者可以根据需要添加，下面是示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="editor"></div>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image@latest"></script><!-- Image -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script><!-- List -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!-- Warning -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
<!-- Load Editor.js's Core -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
<script>
const editor = new EditorJS({
holder: 'editor',
placeholder: '开始写作...',
tools: {
header: {
class: Header,
config: {
placeholder: '请输入标题',
levels: [2, 3, 4, 5],
defaultLevel: 2
},
shortcut: 'CMD+SHIFT+H'
},
quote: {
class: Quote,
inlineToolbar: true,
config: {
quotePlaceholder: '输入引语',
captionPlaceholder: '输入引语作者等信息',
},
shortcut: 'CMD+SHIFT+O'
},
delimiter: {
class: Delimiter,
shortcut: 'CMD+SHIFT+D'
},
list: {
class: List,
inlineToolbar: true,
shortcut: 'CMD+SHIFT+L'
},
checklist: {
class: Checklist,
inlineToolbar: true
},
warning: {
class: Warning,
inlineToolbar: true,
config: {
titlePlaceholder: '标题',
messagePlaceholder: '内容',
},
},
marker: {
class: Marker,
shortcut: 'CMD+SHIFT+M'
},
code: {
class: CodeTool,
shortcut: 'CMD+SHIFT+C'
},
inlineCode: {
class: InlineCode,
shortcut: 'CMD+SHIFT+C'
},
linkTool: {
class: LinkTool,
config: {
endpoint: '', // 解析 url 的后端地址
},
},
embed: Embed,
table: {
class: Table,
inlineToolbar: true,
shortcut: 'CMD+ALT+T'
},
image: {
class: ImageTool,
config: {
endpoints: {
byFile: '', // Your backend file uploader endpoint
byUrl: '', // Your endpoint that provides uploading by Url
},
additionalRequestData: {
// 比如 Laravel 的 csrf_token： '_token': '',
}
},
shortcut: 'CMD+SHIFT+I'
},
},
i18n: {
messages: {
"ui": {
"blockTunes": {
"toggler": {
"Click to tune": "点击转换",
"or drag to move": "拖动调整"
},
},
"inlineToolbar": {
"converter": {
"Convert to": "转换成"
}
},
"toolbar": {
"toolbox": {
"Add": "添加",
"Filter": "过滤",
"Nothing found": "没有找到"
},
}
},
"toolNames": {
"Text": "段落",
"Heading": "标题",
"List": "列表",
"Warning": "警告",
"Checklist": "清单",
"Quote": "引用",
"Code": "代码",
"Delimiter": "分割线",
"Table": "表格",
"Link": "链接",
"Marker": "突出显示",
"Bold": "加粗",
"Italic": "倾斜",
"Image": "图片"
},
"tools": {
"link": {
"Add a link": "添加链接"
},
"stub": {
'The block can not be displayed correctly.': '该模块不能放置在这里'
},
"image": {
"Caption": "图片说明",
"Select an Image": "选择图片",
"With border": "添加边框",
"Stretch image": "拉伸图像",
"With background": "添加背景",
},
"code": {
"Enter a code": "输入代码",
},
"linkTool": {
"Link": "请输入链接地址",
"Couldn't fetch the link data": "获取链接数据失败",
"Couldn't get this link data, try the other one": "该链接不能访问，请修改",
"Wrong response format from the server": "错误响应",
},
"header": {
"Header": "标题",
"Heading 2": "二级标题",
"Heading 3": "三级标题",
"Heading 4": "四级标题",
"Heading 5": "五级标题",
},
"paragraph": {
"Enter something": "请输入",
},
"list": {
"Ordered": "有序列表",
"Unordered": "无序列表",
},
"table": {
"Heading": "标题",
"Add column to left": "在左侧插入列",
"Add column to right": "在右侧插入列",
"Delete column": "删除列",
"Add row above": "在上方插入行",
"Add row below": "在下方插入行",
"Delete row": "删除行",
"With headings": "有标题",
"Without headings": "无标题",
},
"quote": {
"Align Left": "左对齐",
"Align Center": "居中对齐",
}
},
"blockTunes": {
"delete": {
"Delete": "删除",
'Click to delete': "点击删除"
},
"moveUp": {
"Move up": "向上移"
},
"moveDown": {
"Move down": "向下移"
},
"filter": {
"Filter": "过滤"
}
}
}
},
data:{},
onReady: () => {
console.log('Editor.js is ready to work!')
},
onChange: (api, event) => {
editor.save().then((savedData) => {
document.getElementById("body").value = JSON.stringify(savedData)
if (savedData.blocks.length > 0) {
document.getElementById("submit").disabled = false
}
}).catch((error) => {
console.error('Saving error', error);
});
}
});
</script>
</body>
</html>
linkTool 后端解析 api 返回的数据格式：
{
"success":1,
"link":"https://blog.eyeswap.cn",
"meta": {
"title":"Hello World",
"description":"新手入门",
"image": {
"url":"https://blog.eyeswap.cn/favorite.ico"
}
}
}
image 后端解析 api 返回的数据格式：
{
"success" : 1,
"file": {
"url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
}
}
前边说过， Editorjs 生成的内容是 json 格式，显示时需要解析成 html, Laravel 解析可参考这个库：alaminfirdows/laravel-editorjs
仓库：https://github.com/codex-team/editor.js
插件：https://github.com/editor-js
有 0 条评论
发表评论
您的电子邮箱地址不会被公开。 必填项已用 * 标注