Skip to content
This repository was archived by the owner on Jan 13, 2024. It is now read-only.

Commit b16a291

Browse files
calumkcalumk
committed
Updates to example
1 parent d2dd11d commit b16a291

File tree

2 files changed

+69
-118
lines changed

2 files changed

+69
-118
lines changed

‎example/assets/demo.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,13 @@ body {
88
margin: 0;
99
}
1010

11+
.svgicon{
12+
width:30px;
13+
height:30px;
14+
padding:8px;
15+
display: inline-block;
16+
vertical-align : top
17+
}
1118
.ce-example {
1219
font-size: 16.2px;
1320
}

‎example/example.html

Lines changed: 62 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,13 @@
1111
<body>
1212
<div class="ce-example">
1313
<div class="ce-example__header">
14-
<a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js</a>
15-
14+
<a class="ce-example__header-logo" href="https://www.npmjs.com/package/@calumk/editorjs-codeflask">
15+
<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>
16+
</a>
17+
<a class="ce-example__header-logo" href="https://github.com/calumk/editorjs-codeflask">
18+
<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>
19+
@calumk/editorjs-codeflask
20+
</a>
1621
</div>
1722
<div class="ce-example__content _ce-example__content--small">
1823
<div id="editorjs"></div>
@@ -33,137 +38,88 @@
3338
</div>
3439
<div class="ce-example__output">
3540
<pre class="ce-example__output-content" id="output"></pre>
36-
3741
</div>
3842
</div>
39-
40-
4143
</body>
4244

43-
<!-- Load Tools -->
44-
<!--
45-
You can upload Tools to your project's directory and connect them by relative links.
4645

47-
Also you can load each Tool from CDN or use NPM/Yarn packages.
4846

49-
Read more at Tools Connection doc:
50-
https://editorjs.io/getting-started#tools-connection
51-
-->
5247

53-
<script src="../dist/editorjs-codeflask.bundle.js"></script><!-- Codeflask -->
48+
<!-- Load Official Tools -->
49+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
5450

55-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
51+
<!--
52+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script>
53+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script>
54+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
55+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
56+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
57+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script>
58+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
59+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script>
60+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script>
61+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script>
62+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script>
63+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script>
64+
-->
65+
66+
67+
<!-- Load Local Tools -->
68+
<script src="../dist/editorjs-codeflask.bundle.js"></script>
69+
<!--
70+
-->
5671

72+
73+
<!-- Load 3rd Party Tools -->
5774
<!--
58-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!~~ Image ~~>
59-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!~~ Delimiter ~~>
60-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!~~ Checklist ~~>
61-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!~~ Quote ~~>
62-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!~~ Code ~~>
63-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!~~ Embed ~~>
64-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!~~ Table ~~>
65-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!~~ Link ~~>
66-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!~~ Warning ~~>
67-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!~~ Marker ~~>
68-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!~~ Inline Code ~~>
69-
-->
75+
-->
7076

7177
<!-- Load Editor.js's Core -->
72-
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
78+
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
7379

7480
<!-- Initialization -->
7581
<script>
7682

77-
/**
78-
* To initialize the Editor, create a new instance with configuration object
79-
* @see docs/installation.md for mode details
80-
*/
8183
editor = new EditorJS({
82-
/**
83-
* Enable/Disable the read only mode
84-
*/
8584
readOnly: false,
86-
87-
/**
88-
* Wrapper of Editor
89-
*/
9085
holder: 'editorjs',
91-
92-
/**
93-
* Common Inline Toolbar settings
94-
* - if true (or not specified), the order from 'tool' property will be used
95-
* - if an array of tool names, this order will be used
96-
*/
97-
// inlineToolbar: ['link', 'marker', 'bold', 'italic'],
98-
// inlineToolbar: true,
99-
100-
/**
101-
* Tools list
102-
*/
10386
tools: {
104-
/**
105-
* Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
106-
*/
107-
header: Header,
108-
109-
// image: SimpleImage,
110-
111-
// list: List,
112-
113-
// checklist: Checklist,
114-
115-
// quote: Quote,
116-
117-
// warning: Warning,
118-
119-
// marker: Marker,
120-
12187

122-
123-
// delimiter: Delimiter,
124-
125-
// inlineCode: {
126-
// class: InlineCode,
127-
// shortcut: 'CMD+SHIFT+C'
128-
// },
129-
130-
// linkTool: LinkTool,
131-
132-
// embed: Embed,
133-
134-
// table: {
135-
// class: Table,
136-
// inlineToolbar: true,
137-
// shortcut: 'CMD+ALT+T'
138-
// },
139-
140-
code: {
141-
class: editorjsCodeflask
142-
},
88+
// Load Official Tools
89+
header: Header,
90+
// image: SimpleImage,
91+
// delimiter: Delimiter,
92+
// checklist: Checklist,
93+
// list: List,
94+
// quote: Quote,
95+
// code : Code,
96+
// embed: Embed,
97+
// table: Table,
98+
// linkTool: LinkTool,
99+
// warning: Warning,
100+
// marker: Marker,
101+
// inlineCode:,
102+
103+
// Load Local Tools
104+
code: editorjsCodeflask,
105+
106+
// Load 3rd Party Tools
107+
// n/a
143108

144109
},
145-
146-
/**
147-
* This Tool will be used as default
148-
*/
149-
// defaultBlock: 'paragraph',
150-
151-
/**
152-
* Initial Editor data
153-
*/
154110
data: {
155111
"blocks":[
156112
{
157113
"type":"header",
158114
"data":{
159-
"text":"Example",
160-
"level":2
115+
"text":"Example : @calumk/editorjs-codeflask ",
116+
"level":3
161117
}
162118
},
163119
{
164120
"type":"paragraph",
165121
"data":{
166-
"text":"This is an example of EditorJs"
122+
"text":"This is an example of using EditorJs, with the @calumk/editorjs-codeflask package"
167123
}
168124
},
169125
{
@@ -195,24 +151,18 @@
195151
saveButton.click();
196152
},
197153
onChange: function() {
198-
console.log('something changed');
154+
// console.log('something changed');
199155
}
200156
});
201157

202-
/**
203-
* Saving button
204-
*/
205-
const saveButton = document.getElementById('saveButton');
206158

207-
/**
208-
* Toggle read-only button
209-
*/
159+
// Buttons
160+
const saveButton = document.getElementById('saveButton');
210161
const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
211162
const readOnlyIndicator = document.getElementById('readonly-state');
212163

213-
/**
214-
* Saving example
215-
*/
164+
165+
// Save Example
216166
saveButton.addEventListener('click', function () {
217167
editor.save()
218168
.then((savedData) => {
@@ -223,20 +173,14 @@
223173
});
224174
});
225175

226-
/**
227-
* Toggle read-only example
228-
*/
176+
// Toggle Readonly mode
229177
toggleReadOnlyButton.addEventListener('click', async () => {
230178
const readOnlyState = await editor.readOnly.toggle();
231179

232180
readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
233181
});
234182

235-
236183
</script>
237184

238185

239-
240-
241-
242186
</html>

0 commit comments

Comments
 (0)