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

codex-team · Feb 17, 2021 · c0ff646 · c0ff646
1 parent 83d8fe7
commit c0ff646
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 3 deletions.
diff --git a/example/assets/demo.css b/example/assets/demo.css
@@ -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;
+}
diff --git a/example/example-multiple.html b/example/example-multiple.html
@@ -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>
diff --git a/example/example.html b/example/example.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 -->