/
index.html
151 lines (129 loc) · 5.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ck-content .side-card {
padding: 0.5em;
border-radius: 8px;
width: 300px;
margin: 1em auto 1em 1.5em;
font-size: 0.9em;
float: right;
}
.ck-content .side-card.ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
transform: translateY(calc(-100% - 7px));
left: calc(0px - var(--ck-widget-outline-thickness) - 1px)
}
.ck-content .side-card-title {
margin-bottom: 0.5em;
font-size: 1.2em;
color: inherit;
border-bottom-color: inherit;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.ck-content .side-card-alternate {
background: hsl(48, 100%, 93%);
border: 1px solid hsl(47, 100%, 75%);
}
.ck-content .side-card-alternate .side-card-title {
color: hsl(47, 100%, 32%)
}
.ck-content .side-card-default {
background: hsl(205, 100%, 95%);
border: 1px solid hsl(205, 91%, 82%);
}
.ck-content .side-card-default .side-card-title {
color: hsl(204, 79%, 41%)
}
.ck-content .side-card-section {
padding: 4px;
background: hsl(0, 0%, 100%);
border-radius: 6px;
margin-top: 0.5em;
}
.ck-content .side-card-section p:only-child,
.ck-content .side-card-section p:last-child {
margin-bottom: 0;
}
.ck-content .side-card-url {
margin: 0.5em 0;
font-style: italic;
font-size: 0.8em;
color: hsl(0, 0%, 20%);
}
.ck-content .side-card-actions {
margin: 0.5em 0;
}
.ck-content .side-card-actions button {
font-size: 0.8em;
border: 1px solid hsl(0, 0%, 80%);
padding: 2px 4px;
margin-right: 0.5em;
}
</style>
</head>
<body>
<div id="editor">
<h2>Sample</h2>
<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#balloon-editor">balloon block editor build</a>.</p>
<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
<p>With the break of dawn came the stranger. A gunslinger, little doubt did he leave about it, sporting a rather big iron on his hip. He came from the southside and rode the street slowly, speaking none. The people of Agua Caliente had little liking for such visitors but there was no-one to ask the rider what his business was, as he progressed, eyeing the buildings and those few townfolks he could spot.</p>
<p>- Aye, let me tell ya, that’s some right hangdog - commented the undertaker.</p>
<p>- Sure as my name he’s on the run - whispered Laughing Jessie, the saloon owner. - And I am damned if he ain’t got some business here!</p>
<aside class="side-card side-card-default">
<div class="side-card-title">Gunslinger</div>
<div class="side-card-section">
<p>Used to denote someone who is quick on the draw with a pistol.</p>
</div>
<div class="side-card-section">
<p>A word dated to 1920s.</p>
</div>
<div class="side-card-url">https://www.dictionary.com/browse/gunslinger</div>
</aside>
<p>The rider strode closer to the talking duo. He tipped his hat, but he didn’t dismount.</p>
<p>- Looking for Kansas Ted - he spoke slowly, in a firm, sound voice. - Any chance you know where he’s at?</p>
<p>- And who’s that asking? - Jessie wanted to know. - Kansas Ted is no fun character to meet.</p>
<p>- This I know - spoke the stranger. - I’m a mounted trooper from New Mexico and I am after him for killing twenty people. And I will take him back with me, be him alive or dead, that makes me no difference whatsoever.</p>
<p>And the handsome New Mexico trooper rested his hand firmly on the big iron on his hip, leaving no place for doubt about what his business with Ted might be.</p>
<p>A word of mouth rounded the town of Agua Caliente and soon Kansas himself knew there was a shooting planned for the day. He was neither worried nor afraid as he was used to people trying to gun him down. He was only 24, but there were already twenty notches on his pistol as all those men that tried to take him have failed. He went on with his usual life all morning, and it was twenty past eleven when he finally walked out to the street. The handsome trooper was there. And the townfolks were there, looking from the windows.</p>
<aside class="side-card side-card-alternate">
<div class="side-card-title">Gunman</div>
<div class="side-card-section">
<p>Was a hired gun who made a living with his weapons in the Old West.</p>
</div>
<div class="side-card-section">
<p>Used mostly pre-20th century.</p>
</div>
<div class="side-card-url">https://www.dictionary.com/browse/gunman</div>
</aside>
<p>Kansas Ted stood there smiling, relaxed. A vicious man convinced that the stranger from New Mexico was facing defeat. So thought the people of Agua Caliente, watching this show with ghoulish delight. And then a bullet ripped and there was a look of surprise on the face of the young killer as he didn’t even clear the leather. He met his death from the hands of the New Mexico trooper, who put the big iron back to his hip.</p>
<p>Folks gathered around the body, as it was lying lifelessly in the dust. Kansas Ted made his one final mistake when he tried to match a superior gunslinger. Nobody spoke as the trooper rode out of town, taking the fallen gunman with him.</p>
</div>
<script src="../dll-build/build/ckeditor.dll.js"></script>
<script src="./build/app.js"></script>
<script>
// Sudo import.
const {
ClassicEditor, HtmlEmbedEditing, HtmlEmbedUI
} = window.CKEditor5DLL( './src/index.js' );
const config = Object.assign( {}, ClassicEditor.defaultConfig, {
extraPlugins: [
HtmlEmbedEditing,
HtmlEmbedUI,
ComplexBox // exposed by the app.js
],
htmlEmbed: {
showPreviews: false
}
} );
config.toolbar.items.push( 'htmlEmbed' );
ClassicEditor.create( document.querySelector( '#editor' ), config )
.then( editor => {
window.editor = editor;
} );
</script>
</body>
</html>