8
0
Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
d6ee1dec0e
1 измененных файлов с 73 добавлено и 0 удалено
  1. 73 0
      packages/ckeditor5-build-decoupled-document/sample/index.html

+ 73 - 0
packages/ckeditor5-build-decoupled-document/sample/index.html

@@ -0,0 +1,73 @@
+<!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>