Created
July 11, 2022 12:26
-
-
Save foarsitter/ece006ffc97d41f5d2228a16f194b1ef to your computer and use it in GitHub Desktop.
Example of @calumk/editorjs-columns with the inlineToolbar set to True
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| <script src="example_data.js"></script> | |
| <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://www.npmjs.com/package/@calumk/editorjs-nested-checklist"> | |
| <svg class="svgicon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>npm</title><path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg> | |
| </a> --> | |
| <a class="ce-example__header-logo" href="https://github.com/calumk/editorjs-columns"> | |
| <svg class="svgicon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> | |
| @calumk/editorjs-columns | |
| </a> | |
| </div> | |
| <div class="ce-example__content _ce-example__content--small"> | |
| <div class="editorjs-wrapper"> | |
| <div id="editorjs"></div> | |
| </div> | |
| <div class="ce-example__button" id="saveButton"> | |
| editor.save() | |
| </div> | |
| <div class="ce-example__statusbar"> | |
| Readonly: | |
| <b id="readonly-state"> | |
| Off | |
| </b> | |
| <div class="ce-example__statusbar-button" id="toggleReadOnlyButton"> | |
| toggle | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ce-example__output"> | |
| <pre class="ce-example__output-content" id="output"></pre> | |
| </div> | |
| </div> | |
| </body> | |
| <!-- Load Official Tools --> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script> | |
| <!-- <script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script> --> | |
| <!-- <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script> --> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script> | |
| <!-- <script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script> --> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script> | |
| <!-- <script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script> --> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script> | |
| <!-- Load Local Tools --> | |
| <script src="../dist/editorjs-columns.bundle.js"></script> | |
| <!-- Load 3rd Party Tools --> | |
| <script src="https://cdn.jsdelivr.net/npm/editorjs-alert@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@calumk/editorjs-codeflask@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@calumk/editorjs-nested-checklist@latest"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@calumk/editorjs-paragraph-linebreakable"></script> | |
| <!-- Load Editor.js's Core --> | |
| <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script> | |
| <!-- Initialization --> | |
| <script> | |
| // first define the tools to be made avaliable in the columns | |
| let column_tools = { | |
| header: Header, | |
| alert : Alert, | |
| paragraph : {class: editorjsParagraphLinebreakable, inlineToolbar: true}, | |
| delimiter : Delimiter | |
| } | |
| // next define the tools in the main block | |
| // Warning - Dont just use main_tools - you will probably generate a circular reference | |
| let main_tools = { | |
| // Load Official Tools | |
| header: Header, | |
| alert : Alert, | |
| paragraph : {class: editorjsParagraphLinebreakable, inlineToolbar: true}, | |
| delimiter : Delimiter, | |
| columns : { | |
| class : editorjsColumns, | |
| config : { | |
| tools : column_tools, // ref the column_tools | |
| EditorJsLibrary : EditorJS | |
| } | |
| }, | |
| } | |
| editor = new EditorJS({ | |
| readOnly: false, | |
| holder: 'editorjs', | |
| tools : main_tools, | |
| data: example_data, // Imported from example_data.js | |
| onReady: function(){ | |
| console.log("Delaying Save to launch Column Editors") | |
| setTimeout(() => { | |
| saveButton.click(); | |
| },2000) | |
| }, | |
| onChange: function(e) { | |
| console.log(e) | |
| // console.log('something changed'); | |
| } | |
| }); | |
| // Buttons | |
| const saveButton = document.getElementById('saveButton'); | |
| const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton'); | |
| const readOnlyIndicator = document.getElementById('readonly-state'); | |
| // Save Example | |
| saveButton.addEventListener('click', function () { | |
| editor.save() | |
| .then((savedData) => { | |
| cPreview.show(savedData, document.getElementById("output")); | |
| }) | |
| .catch((error) => { | |
| console.error('Saving error', error); | |
| }); | |
| }); | |
| // Toggle Readonly mode | |
| toggleReadOnlyButton.addEventListener('click', async () => { | |
| const readOnlyState = await editor.readOnly.toggle(); | |
| readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off'; | |
| }); | |
| </script> | |
| <style> | |
| /* OPTIONAL STYLES */ | |
| /* | |
| These styles are not reqired, they do not enforce the column layout, but do add some opinionated styling | |
| */ | |
| .editorjs-wrapper{ | |
| border: 1px solid #eee; | |
| border-radius: 5px; | |
| padding:0px; | |
| margin-bottom: 10px; | |
| box-shadow: 0 6px 18px #e8edfa80; | |
| } | |
| .ce-editorjsColumns_col{ | |
| border: 1px solid #eee; | |
| border-radius: 5px; | |
| gap: 10px; | |
| padding-top:10px; | |
| } | |
| .ce-editorjsColumns_col:focus-within{ | |
| box-shadow: 0 6px 18px #e8edfa80; | |
| } | |
| </style> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment