Skip to content

C
CKEditor 5 Custom Build
Unverified Commit 77c95272 authored by Aleksander Nowodzinski's avatar Aleksander Nowodzinski
Browse files
Options

Updated build sample.

parent ee81272a
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 0 deletions
sample/index.html 0 → 100644
View file @ 77c95272
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – decoupled document build – development sample</title>
<style>
body {
max-width: 800px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>CKEditor 5 – decoupled document build – development sample</h1>
<h2>The toolbar</h2>
<div class="toolbar-container ck-reset_all"></div>
<h2>The editable</h2>
<div class="editable-container ck-reset "></div>
<style>
.editable-container,
.toolbar-container {
position: relative;
border: 1px solid #ddd;
background: #eee;
}
.toolbar-container {
padding: 1em;
}
.editable-container {
padding: 3em;
overflow-y: scroll;
max-height: 500px;
}
.editable-container .ck-editor__editable {
min-height: 21cm;
padding: 2em;
border: 1px #D3D3D3 solid;
border-radius: var(--ck-border-radius);
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
<script src="../build/ckeditor.js"></script>
<script>
const editorData = `<h2>Sample</h2>
<p>This is an instance of the <a href="TODO">decoupled document build</a>.</p>
<figure class="image">
<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
</figure>
<p>You can use this sample to validate whether your <a href="https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>`;
DecoupledDocumentEditor.create( editorData, {
toolbarContainer: '.toolbar-container',
editableContainer: '.editable-container'
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment