deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2024-05-22 08:16:50 +02:00
Code Issues Projects Releases Wiki Activity

chore(example): the new example page for testing multiple instances

Browse source
This commit is contained in:
Peter Savchenko 2021-02-17 16:52:21 +03:00
parent 83d8fe7df5
commit c0ff646e8e
3 changed files with 82 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
example/assets/demo.css
View file

@ -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
View 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>

6
example/example.html
View file

@ -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 -->