mirror of
https://github.com/codex-team/editor.js
synced 2024-06-15 20:25:15 +02:00
chore(example): the new example page for testing multiple instances
This commit is contained in:
parent
83d8fe7df5
commit
c0ff646e8e
|
@ -69,6 +69,12 @@ body {
|
|||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.ce-example__content--with-bg {
|
||||
background: #f4f4f4;
|
||||
max-width: none;
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.ce-example__output {
|
||||
background: #1B202B;
|
||||
overflow-x: auto;
|
||||
|
@ -187,3 +193,16 @@ body {
|
|||
.ce-example h4.ce-header {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ce-example-multiple {
|
||||
display: grid;
|
||||
grid-template-columns: calc(50% - 15px) calc(50% - 15px);
|
||||
gap: 30px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.ce-example-multiple > div {
|
||||
background: #fff;
|
||||
border-radius: 7px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
|
60
example/example-multiple.html
Normal file
60
example/example-multiple.html
Normal file
|
@ -0,0 +1,60 @@
|
|||
|
||||
<!--
|
||||
Use this page for debugging purposes.
|
||||
|
||||
This page can be used for testing multiple editor instances on the same page.
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Editor.js 🤩🧦🤨 example: Multiple instances</title>
|
||||
<link href="assets/demo.css" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
</head>
|
||||
<body>
|
||||
<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 ce-example__content--with-bg _ce-example__content--small">
|
||||
<div class="ce-example-multiple">
|
||||
<div id="editorjs1"></div>
|
||||
<div id="editorjs2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ce-example__output">
|
||||
<div class="ce-example__output-footer">
|
||||
<a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Load Editor.js's Core -->
|
||||
<script src="../dist/editor.js"></script>
|
||||
|
||||
<!-- Initialization -->
|
||||
<script>
|
||||
/**
|
||||
* Instance #1
|
||||
*/
|
||||
var editor1 = new EditorJS({
|
||||
holder: 'editorjs1',
|
||||
});
|
||||
|
||||
/**
|
||||
* Instance #2
|
||||
*/
|
||||
var editor2 = new EditorJS({
|
||||
holder: 'editorjs2',
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -48,12 +48,12 @@
|
|||
|
||||
<!-- Load Tools -->
|
||||
<!--
|
||||
You can upload Tools to your project's directory and use as in example below.
|
||||
You can upload Tools to your project's directory and connect them by relative links.
|
||||
|
||||
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
|
||||
Read more at Tools Connection doc:
|
||||
https://editorjs.io/getting-started#tools-connection
|
||||
-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
|
||||
|
|
Loading…
Reference in a new issue