傳統專案所描述的，所見即所得，就是在畫面中的編輯器該有的標題就是分類為
<h1> ~ <h6>文字p連結<a>…
但是沒辦法給予css樣式 除非將css 樣式直接定義層級於 html tag 身上 但這樣是很差勁的做法
於是看見了這套文字編輯器覺得十分不賴！
安裝步驟
- 引入 EditorJS 核心
- 引入需要的工具列表
- 建立 EditorJS 實例
引入 Editor 核心
# cdn
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js"></script>
# npm
npm i @editorjs/editorjs
# 註冊模組使用
import EditorJS from '@editorjs/editorjs';
引入需要的工具列表
- CDN官方列表 - CDN官方工具
- Github官方列表 - 官方工具
- awesome-editorjs - 精選的 Editor.js 工具、庫和資源的精選列表。
建立 EditorJS 實例
<div id="editorjs"></div>
<button onclick="save"> 儲存 </button>
// 將需使用的工具 一個個引用進來
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script><!-- Load Editor.js's Core -->
<script>
// 建立實列
var editor = new EditorJS({
holder: 'editorjs',
// 註冊工具
tools: {
// 依照工具介紹安裝使用
header: {
class: Header,
inlineToolbar: ['marker', 'link'],
config: {
placeholder: '標題文字'
},
shortcut: 'CMD+SHIFT+H'
},
}
});
// 儲存
function save(){
editor.save().then((savedData) => {
console.log(savedData);
});
}
</script>
常用工具完整範例
這是整理官方 example 所常使用的範例工具： 標題/內文/列表/段落分行/表格/圖片置入(拖曳至視窗內即可)