Sfoglia il codice sorgente

Docs: Updated the demo of html embed.

Piotrek Koszuliński 5 anni fa
parent
commit
52d4f2b831

File diff suppressed because it is too large
+ 14 - 21
packages/ckeditor5-html-embed/docs/_snippets/features/html-embed.html


+ 94 - 45
packages/ckeditor5-html-embed/docs/_snippets/features/html-embed.js

@@ -3,58 +3,72 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals window, document */
+/* globals window, document, console */
 
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
+import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
 
 ClassicEditor.builtinPlugins.push( HtmlEmbed );
+ClassicEditor.builtinPlugins.push( CodeBlock );
 
-const previewsModeButton = document.getElementById( 'raw-html-previews-enabled' );
-const noPreviewsModeButton = document.getElementById( 'raw-html-previews-disabled' );
-
-previewsModeButton.addEventListener( 'change', handleModeChange );
-noPreviewsModeButton.addEventListener( 'change', handleModeChange );
-
-startMode( document.querySelector( 'input[name="mode"]:checked' ).value );
-
-async function handleModeChange( evt ) {
-	await startMode( evt.target.value );
-}
-
-async function startMode( selectedMode ) {
-	if ( selectedMode === 'enabled' ) {
-		await startEnabledPreviewsMode();
-	} else {
-		await startDisabledPreviewsMode();
-	}
-}
-
-async function startEnabledPreviewsMode() {
-	await reloadEditor( {
-		htmlEmbed: {
-			showPreviews: true,
-			sanitizeHtml( rawHtml ) {
-				return {
-					html: rawHtml,
-					hasChanged: false
-				};
-			}
-		}
-	} );
-}
+/* eslint-disable max-len */
+const initialData =
+`
+<h2>CKEditor 5 classic editor build</h2>
+<div class="raw-html-embed">
+	<p><a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic"><img alt="npm version" src="https://badge.fury.io/js/%40ckeditor%2Fckeditor5-build-classic.svg" /></a></p>
+
+	<p><a href="https://travis-ci.org/ckeditor/ckeditor5"><img alt="Build Status" src="https://travis-ci.org/ckeditor/ckeditor5.svg?branch=master" /></a>&nbsp;<a href="https://david-dm.org/ckeditor/ckeditor5"><img alt="Dependency Status" src="https://img.shields.io/david/ckeditor/ckeditor5.svg" /></a>&nbsp;<a href="https://david-dm.org/ckeditor/ckeditor5?type=dev"><img alt="devDependency Status" src="https://img.shields.io/david/dev/ckeditor/ckeditor5.svg" /></a></p>
+
+	<p><a href="http://eepurl.com/c3zRPr"><img alt="Join newsletter" src="https://img.shields.io/badge/join-newsletter-00cc99.svg" /></a>&nbsp;<a href="https://twitter.com/ckeditor"><img alt="Follow twitter" src="https://img.shields.io/badge/follow-twitter-00cc99.svg" /></a></p>
+</div>
+
+<p>The classic editor build for CKEditor 5. Read more about the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor"><strong>classic editor build</strong></a> and see the <a href="https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html"><strong>demo</strong></a>.</p>
+
+<figure class="image"><img src="https://c.cksource.com/a/1/img/npm/ckeditor5-build-classic.png" alt="CKEditor 5 classic editor build screenshot"></figure>
+
+<h2>Documentation</h2>
+<p>See:</p>
+<ul>
+	<li><a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installation.html">Installation</a> for how to install this package and what it contains.</li>
+	<li><a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html">Basic API</a> for how to create an editor and interact with it.</li>
+	<li><a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html">Configuration</a> for how to configure the editor.</li>
+</ul>
 
-async function startDisabledPreviewsMode() {
-	await reloadEditor();
-}
+<h2>Quick start</h2>
+<p>First, install the build from npm:</p>
+<pre><code class="language-plaintext">npm&nbsp;install&nbsp;--save&nbsp;@ckeditor/ckeditor5-build-classic</code></pre>
+<p>And use it in your website:</p>
+<pre><code class="language-html">&lt;div id="editor">
+	&lt;p>This is the editor content.&lt;/p>
+&lt;/div>
+&lt;script src="./node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js">&lt;/script>
+&lt;script>
+	ClassicEditor
+		.create( document.querySelector( '#editor' ) )
+		.then( editor => {
+			window.editor = editor;
+		} )
+		.catch( error => {
+			console.error( 'There was a problem initializing the editor.', error );
+		} );
+&lt;/script></code></pre>
 
-async function reloadEditor( config = {} ) {
-	if ( window.editor ) {
-		await window.editor.destroy();
-	}
+<h2>License</h2>
+<p>Licensed under the terms of <a href="http://www.gnu.org/licenses/gpl.html" rel="nofollow">GNU General Public License Version 2 or later</a>. For full details about the license, please check the <code>LICENSE.md</code> file or <a href="https://ckeditor.com/legal/ckeditor-oss-license" rel="nofollow">https://ckeditor.com/legal/ckeditor-oss-license</a>.</p>
 
-	config = Object.assign( config, {
+<div class="raw-html-embed"><script>
+(() => {
+	console.log( '💎 This is some analytics script...' );
+})();
+</script></div>
+`;
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-html-embed' ), {
+		initialData,
 		toolbar: {
 			items: [
 				'heading',
@@ -72,6 +86,7 @@ async function reloadEditor( config = {} ) {
 				'imageUpload',
 				'mediaEmbed',
 				'insertTable',
+				'codeBlock',
 				'htmlEmbed',
 				'|',
 				'undo',
@@ -97,7 +112,41 @@ async function reloadEditor( config = {} ) {
 			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
 		},
 		cloudServices: CS_CONFIG
-	} );
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		// The "Preview editor data" button logic.
+		document.querySelector( '#preview-data-action' ).addEventListener( 'click', () => {
+			const mainCSSElement = [ ...document.querySelectorAll( 'link' ) ]
+				.find( linkElement => linkElement.href.endsWith( 'css/styles.css' ) );
+			const snippetCSSElement = [ ...document.querySelectorAll( 'link' ) ]
+				.find( linkElement => linkElement.href.endsWith( 'snippet.css' ) );
 
-	window.editor = await ClassicEditor.create( document.querySelector( '#snippet-html-embed' ), config );
-}
+			const iframeElement = document.querySelector( '#preview-data-container' );
+
+			iframeElement.srcdoc = '<!DOCTYPE html><html>' +
+				'<head>' +
+					'<meta charset="utf-8">' +
+					`<title>${ document.title }</title>` +
+					`<link rel="stylesheet" href="${ mainCSSElement.href }" type="text/css">` +
+					`<link rel="stylesheet" href="${ snippetCSSElement.href }" type="text/css">` +
+					`<style>
+						body {
+							padding: 20px;
+						}
+						.formatted p img {
+							display: inline;
+							margin: 0;
+						}
+					</style>` +
+				'</head>' +
+				'<body class="formatted ck-content">' +
+					editor.getData() +
+				'</body>' +
+				'</html>';
+		} );
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 1 - 1
packages/ckeditor5-html-embed/docs/features/html-embed.md

@@ -28,7 +28,7 @@ It is recommended to use the {@link features/media-embed media embed} feature fo
 
 ## Demo
 
-Use the editor below to see the plugin in action.
+Use the editor below to see the plugin in action. Click the **"Preview editor data"** button below the editor to see a preview of the editor content, including embedded HTML.
 
 {@snippet features/html-embed}