mirror of
https://github.com/codex-team/editor.js
synced 2026-03-15 15:15:47 +01:00
247 lines
8 KiB
HTML
247 lines
8 KiB
HTML
<!--
|
|
Use this page is for debugging purposes.
|
|
|
|
Editor Tools are loaded as git-submodules.
|
|
You can pull modules by running `yarn pull_tools` and start experimenting.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Editor.js 🤩🧦🤨 example</title>
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
|
|
<link href="assets/demo.css" rel="stylesheet">
|
|
<script src="assets/json-preview.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
</head>
|
|
<body>
|
|
<script>
|
|
if (localStorage.getItem('theme') === 'dark') {
|
|
document.body.classList.add("dark-mode");
|
|
}
|
|
</script>
|
|
<div class="ce-example">
|
|
<div class="ce-example__header">
|
|
<a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>
|
|
|
|
<div class="ce-example__header-menu">
|
|
<a href="https://github.com/editor-js" target="_blank">Plugins</a>
|
|
<a href="https://editorjs.io/usage" target="_blank">Usage</a>
|
|
<a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
|
|
<a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
|
|
</div>
|
|
</div>
|
|
<div class="ce-example__content">
|
|
<div id="editorjs"></div>
|
|
<div id="hint-core" style="text-align: center;">
|
|
No core bundle file found. Run <code class="inline-code">yarn build</code>
|
|
</div>
|
|
<div id="hint-tools" style="text-align: center;">
|
|
No submodules found. Run <code class="inline-code">yarn pull_tools && yarn tools:update</code>
|
|
</div>
|
|
<div class="ce-example__button" id="saveButton">
|
|
editor.save()
|
|
</div>
|
|
<div class="ce-example__statusbar">
|
|
<div class="ce-example__statusbar-item">
|
|
Readonly:
|
|
<b id="readonly-state">
|
|
Off
|
|
</b>
|
|
|
|
<div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
|
|
toggle
|
|
</div>
|
|
</div>
|
|
<div class="ce-example__statusbar-item">
|
|
<div class="ce-example__statusbar-button" id="showBlocksBoundariesButton">
|
|
<span data-toggled-text="Hide">Show</span>
|
|
blocks boundaries
|
|
</div>
|
|
</div>
|
|
<div class="ce-example__statusbar-item">
|
|
<div class="ce-example__statusbar-button" id="enableThinModeButton">
|
|
<span data-toggled-text="Disable">Enable</span>
|
|
thin mode
|
|
</div>
|
|
</div>
|
|
<div class="ce-example__statusbar-item ce-example__statusbar-item--right">
|
|
<div class="ce-example__statusbar-toggler" id="darkThemeToggler">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ce-example__output">
|
|
<pre class="ce-example__output-content" id="output"></pre>
|
|
|
|
<div class="ce-example__output-footer">
|
|
<a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load Tools -->
|
|
<!--
|
|
You can upload Tools to your project's directory and use as in example below.
|
|
|
|
Also you can load each Tool from CDN or use NPM/Yarn packages.
|
|
|
|
Read more in Tool's README file. For example:
|
|
https://github.com/editor-js/header#installation
|
|
-->
|
|
<script src="./tools/header/dist/bundle.js" onload="document.getElementById('hint-tools').hidden = true"></script><!-- Header -->
|
|
<script src="./tools/simple-image/dist/bundle.js"></script><!-- Image -->
|
|
<script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter -->
|
|
<!-- <script src="./tools/list/dist/bundle.js"></script> List-->
|
|
<script src="./tools/nested-list/dist/nested-list.js"></script><!-- Nested List -->
|
|
<script src="./tools/checklist/dist/bundle.js"></script><!-- Checklist -->
|
|
<script src="./tools/quote/dist/bundle.js"></script><!-- Quote -->
|
|
<script src="./tools/code/dist/bundle.js"></script><!-- Code -->
|
|
<script src="./tools/embed/dist/bundle.js"></script><!-- Embed -->
|
|
<script src="./tools/table/dist/table.js"></script><!-- Table -->
|
|
<script src="./tools/link/dist/bundle.js"></script><!-- Link -->
|
|
<script src="./tools/raw/dist/bundle.js"></script><!-- Raw -->
|
|
<script src="./tools/warning/dist/bundle.js"></script><!-- Warning -->
|
|
|
|
<script src="./tools/marker/dist/bundle.js"></script><!-- Marker -->
|
|
<script src="./tools/inline-code/dist/bundle.js"></script><!-- Inline Code -->
|
|
|
|
<!-- Load Editor.js's Core -->
|
|
<script src="../dist/editor.js" onload="document.getElementById('hint-core').hidden = true;"></script>
|
|
|
|
<!-- Initialization -->
|
|
<script>
|
|
/**
|
|
* Editor init config
|
|
* @see https://editorjs.io/configuration
|
|
*/
|
|
const editorConfig = {
|
|
/**
|
|
* Enable/Disable the read only mode
|
|
*/
|
|
readOnly: false,
|
|
|
|
/**
|
|
* Wrapper of Editor
|
|
*/
|
|
holder: 'editorjs',
|
|
|
|
/**
|
|
* Common Inline Toolbar settings
|
|
* - if true (or not specified), the order from 'tool' property will be used
|
|
* - if an array of tool names, this order will be used
|
|
*/
|
|
// inlineToolbar: ['link', 'marker', 'bold', 'italic'],
|
|
// inlineToolbar: true,
|
|
|
|
/**
|
|
* Tools list
|
|
*/
|
|
tools: {
|
|
paragraph: {
|
|
inlineToolbar: ['italic', 'bold', 'link']
|
|
}
|
|
/**
|
|
* Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
|
|
*/
|
|
},
|
|
|
|
/**
|
|
* This Tool will be used as default
|
|
*/
|
|
// defaultBlock: 'paragraph',
|
|
|
|
/**
|
|
* Initial Editor data
|
|
*/
|
|
data: {
|
|
blocks: [
|
|
{
|
|
"type": "paragraph",
|
|
"data": {
|
|
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo, neque in pulvinar sodales, ante lacus blandit massa, vel tempor."
|
|
}
|
|
}
|
|
]
|
|
},
|
|
onReady: function(){
|
|
saveButton.click();
|
|
},
|
|
onChange: function(api, event) {
|
|
console.log('something changed', event);
|
|
},
|
|
}
|
|
/**
|
|
* To initialize the Editor, create a new instance with configuration object
|
|
* @see docs/installation.md for mode details
|
|
*/
|
|
var editor = new EditorJS(editorConfig);
|
|
|
|
/**
|
|
* Saving button
|
|
*/
|
|
const saveButton = document.getElementById('saveButton');
|
|
|
|
/**
|
|
* Toggle read-only button
|
|
*/
|
|
const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
|
|
const readOnlyIndicator = document.getElementById('readonly-state');
|
|
|
|
/**
|
|
* Saving example
|
|
*/
|
|
saveButton.addEventListener('click', function () {
|
|
editor.save()
|
|
.then((savedData) => {
|
|
cPreview.show(savedData, document.getElementById("output"));
|
|
})
|
|
.catch((error) => {
|
|
console.error('Saving error', error);
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Toggle read-only example
|
|
*/
|
|
toggleReadOnlyButton.addEventListener('click', async () => {
|
|
const readOnlyState = await editor.readOnly.toggle();
|
|
|
|
readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
|
|
});
|
|
|
|
/**
|
|
* Button for displaying blocks borders. Useful for UI development
|
|
*/
|
|
const showBlocksBoundariesButton = document.getElementById("showBlocksBoundariesButton");
|
|
|
|
showBlocksBoundariesButton.addEventListener('click', () => {
|
|
document.body.classList.toggle("show-block-boundaries")
|
|
})
|
|
|
|
/**
|
|
* Button for enabling the 'Thin' mode
|
|
*/
|
|
const enableThinModeButton = document.getElementById("enableThinModeButton");
|
|
|
|
enableThinModeButton.addEventListener('click', () => {
|
|
document.body.classList.toggle("thin-mode")
|
|
|
|
editor.destroy();
|
|
|
|
editor = new EditorJS(editorConfig);
|
|
})
|
|
|
|
/**
|
|
* Toggler for toggling the dark mode
|
|
*/
|
|
const darkThemeToggler = document.getElementById("darkThemeToggler");
|
|
|
|
darkThemeToggler.addEventListener('click', () => {
|
|
document.body.classList.toggle("dark-mode");
|
|
|
|
localStorage.setItem('theme', document.body.classList.contains("dark-mode") ? 'dark' : 'default');
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|