ckeditor5-image-upload-base64
Version:
The development environment of CKEditor 5 – the best browser-based rich text editor.
176 lines (163 loc) • 5.92 kB
HTML
<head>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://ckeditor.com 'unsafe-inline' 'unsafe-eval'">
</head>
<div style="margin-bottom: 10px;">
<button type="button" id="clear-content">Clear editor</button>
<button type="button" id="print-data-action">Open print preview</button>
<button id="read-only">Turn on read-only mode</button>
<iframe id="print-data-container" aria-hidden="true" tabindex="-1"></iframe>
</div>
<div id="editor">
<h2>Lists in the table</h2>
<figure class="table">
<table style="width: 600px;border-bottom:2px dashed hsl(0, 0%, 60%);border-left:2px dashed hsl(0, 0%, 60%);border-right:2px dashed hsl(0, 0%, 60%);border-top:2px dashed hsl(0, 0%, 60%);">
<tbody>
<tr>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">Bulleted list</span></td>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">Numbered list</span></td>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">To do list</span></td>
</tr>
<tr>
<td style="vertical-align:top; width: 33%">
<ul>
<li>UL List item 1</li>
<li>UL List item 2</li>
</ul>
</td>
<td style="vertical-align:top; width: 33%">
<ol>
<li>OL List item 1</li>
<li>OL List item 2</li>
</ol>
</td>
<td style="vertical-align:top; width: 33%">
<ul class="todo-list">
<li>
<label class="todo-list__label">
<input type="checkbox" />
<span class="todo-list__label__description">Foo</span>
</label>
</li>
<li>
<label class="todo-list__label">
<input type="checkbox" checked="checked" />
<span class="todo-list__label__description">Foo</span>
</label>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</figure>
<h2>Basic features overview</h2>
<p>Lorem <b>ipsum dolor sit </b>amet, consectetur <i>adipisicing elit</i>.<sub>1</sub></p>
<h3>Basic styles</h3>
<p>Ad alias, <s>architecto</s> culpa <b><i>cumque</i></b> dignissimos <code>dolor eos incidunt ipsa itaque</code> <u>laboriosam</u> magnam molestias nihil <i><u>numquam</u></i> odit quam, suscipit <i><s>veritatis</s></i> voluptate voluptatum.<sup>2</sup></p>
<h3>Image</h3>
<figure class="image">
<img alt="bar" src="sample.jpg">
<figcaption>Caption</figcaption>
</figure>
<h3>Blockquote</h3>
<blockquote>
<p>Quote</p>
<ul>
<li><a href="#">Quoted</a> UL List item 1</li>
<li>Quoted UL List item 2</li>
</ul>
<p>Quote</p>
</blockquote>
<div class="page-break" style="page-break-after:always;"><span style="display:none;"> </span></div>
<h2>Media with previews in the table</h2>
<figure class="table">
<table style="background-color:hsl(0,0%,90%);border-bottom:2px solid hsl(0, 0%, 0%);border-left:2px solid hsl(0, 0%, 0%);border-right:2px solid hsl(0, 0%, 0%);border-top:2px solid hsl(0, 0%, 0%);">
<tbody>
<tr>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">Service</span></td>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">Preview</span></td>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">URL</span></td>
</tr>
<tr>
<td style="text-align: center"><u>YouTube</u></td>
<td>
<figure class="media">
<oembed url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></oembed>
</figure>
</td>
<td>
<span class="text-small"><a href="https://www.youtube.com/watch?v=ZVv7UMQPEWk">https://www.youtube.com/watch?v=ZVv7UMQPEWk</a></span>
</td>
</tr>
<tr>
<td style="text-align: center"><u>Vimeo</u></td>
<td>
<figure class="media">
<oembed url="https://vimeo.com/1084537"></oembed>
</figure>
</td>
<td>
<span class="text-small"><a href="https://vimeo.com/1084537">https://vimeo.com/1084537</a></span>
</td>
</tr>
</tbody>
</table>
</figure>
<h2>Code blocks in the table</h2>
<figure class="table">
<table style="border-bottom:2px dashed hsl(0, 0%, 60%);border-left:2px dashed hsl(0, 0%, 60%);border-right:2px dashed hsl(0, 0%, 60%);border-top:2px dashed hsl(0, 0%, 60%);">
<tbody>
<tr>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">Language</span></td>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">Code snippet</span></td>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">Language</span></td>
<td style="text-align: center"><span class="text-big" style="font-weight: bold">Code snippet</span></td>
</tr>
<tr>
<td style="text-align: center;vertical-align:top">CSS</td>
<td style="vertical-align:top">
<pre><code class="language-css">body {
color: red;
}
p {
font-size: 10px;
}</code></pre></td>
<td style="text-align: center;vertical-align:top">PHP</td>
<td style="vertical-align:top"><pre><code class="language-php"><?php
function dump( array ...$args ) {
foreach ( $args as $item ) {
var_dump( $item );
}
die;
}</code></pre></td>
</tr>
<tr>
<td style="text-align: center;vertical-align:top">JavaScript</td>
<td style="vertical-align:top">
<pre><code class="language-javascript">function foo() {
console.log( 'indented using 1 tab' );
}
function bar() {
console.log( 'indented using spaces' );
}</code></pre></td>
<td style="text-align: center;vertical-align:top">Plaintext</td>
<td style="vertical-align:top"><pre><code class="language-plaintext">Plain text</code></pre></td>
</tr>
</tbody>
</table>
</figure>
</div>
<style>
#print-data-container {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
</style>