110 lines
2.7 KiB
JavaScript
110 lines
2.7 KiB
JavaScript
import EditorJS from '@editorjs/editorjs';
|
|
|
|
import Header from '@editorjs/header';
|
|
import List from '@editorjs/list';
|
|
import Table from '@editorjs/table';
|
|
import Checklist from '@editorjs/checklist';
|
|
import Code from '@editorjs/code';
|
|
import Marker from '@editorjs/marker';
|
|
import Link from '@editorjs/link';
|
|
import Attaches from '@editorjs/attaches';
|
|
import Image from '@editorjs/image';
|
|
|
|
import axios from 'axios';
|
|
import qs from 'querystring'
|
|
|
|
import './styles.css';
|
|
|
|
function addSaver(editor, saveUrl, page, beforeSave) {
|
|
return {
|
|
save() {
|
|
return editor.save().then(outputData => {
|
|
beforeSave()
|
|
let data = {
|
|
'json': 1,
|
|
'p': page,
|
|
'summary': "JSON test",
|
|
'content': JSON.stringify(outputData),
|
|
};
|
|
return axios.post(saveUrl, qs.encode(data))
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
function Indicator(element, timeout) {
|
|
let timeoutId;
|
|
|
|
return {
|
|
done() {
|
|
timeoutId = setTimeout(() => {
|
|
element.classList.add('hidden')
|
|
}, timeout*1000);
|
|
},
|
|
|
|
setText(text) {
|
|
if (timeoutId) {
|
|
clearTimeout(timeoutId);
|
|
timeoutId = null;
|
|
}
|
|
element.innerText = text;
|
|
element.classList.remove('hidden')
|
|
},
|
|
}
|
|
}
|
|
|
|
function addIndicator(editor, indicator) {
|
|
return {
|
|
save() {
|
|
editor.save().then(() => {
|
|
indicator.setText('saved!');
|
|
indicator.done();
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
const editor = new EditorJS({
|
|
holder: 'editor',
|
|
tools: {
|
|
header: {
|
|
class: Header
|
|
},
|
|
list: List,
|
|
table: Table,
|
|
checklist: Checklist,
|
|
code: Code,
|
|
marker: Marker,
|
|
link: {
|
|
class: Link,
|
|
config: {
|
|
endpoint: '/fetchLink'
|
|
}
|
|
},
|
|
attaches: {
|
|
class: Attaches
|
|
},
|
|
image: {
|
|
class: Image
|
|
}
|
|
},
|
|
onChange() {
|
|
let element = document.getElementById('editor');
|
|
let indicator = Indicator(document.getElementById('save-indicator'), 2);
|
|
let saveUrl = element.dataset.saveurl;
|
|
let page = element.dataset.page;
|
|
|
|
indicator.setText('has changes...');
|
|
addIndicator(
|
|
addSaver(editor, saveUrl, page, () => indicator.setText('saving...')),
|
|
indicator
|
|
).save()
|
|
},
|
|
onReady() {
|
|
let data = document.getElementById('editor').dataset.input;
|
|
if (data) {
|
|
editor.blocks.render(JSON.parse(data));
|
|
}
|
|
}
|
|
});
|