CKEditor 5 - Instalace a čeština

Návody pro C4

K dispozici je stránka o aplikaci CKEditor 5, na které naleznete popis, návody, screenshoty, demo ukázku a diskuze.

Příprava na instalaci CKEditoru

Stažení aplikace

Na oficiálních stránkách https://ckeditor.com/ckeditor-5/download/ přejděte v části "DISTRIBUTIONS" na záložku "ZIP". A stáhněte si zazipovaný balíček CKEditor 5 kliknutím na tlačítko "Download ZIP".

Rozbalení souborů

Rozbalte (např. pomocí programu Total Commander) stažený balíček aplikace CKEditor na váš počítač. Měli byste získat složku ckeditor5 a v ní nalézt mino jiné soubor ckeditor5.js a podsložku translations.

Instalace CKEditoru

Aplikaci CKEditor není potřeba instalovat. Stačí jádro (resp. celou složku) nahrát na server a do zdrojového kódu stránky, na které chcete editor zobrazit, vložit skript pro jeho načtení.

Kopírování souborů

Zkopírujte pomocí FTP klienta složku ckeditor5 na server, na kterém budete editor používat. Na serveru nyní budete mít nahraný adresář ckeditor5, který obsahuje celé jádro aplikace. V našem ukázkovém případě adresář kopírujeme do kořenového adresáře webu ckeditor.demo1.cz.

Testovací stránka

Nyní vytvoříme jednoduchou testovací HTML stránku. Zdrojový kód stránky s implementací CKEditoru a nastavenou češtinou bude vypadat následovně:

<!DOCTYPE html>
<html lang="cs">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>CKEditor 5 na Webhostingu C4</title>
		<link rel="stylesheet" href="./ckeditor5/ckeditor5.css">
		<style>
			.main-container {
				width: 795px;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body>
		<div class="main-container">
			<div id="editor">
				<p>CKEditor 5 na Webhostingu C4</p>
			</div>
		</div>
		<script type="importmap">
			{
				"imports": {
					"ckeditor5": "./ckeditor5/ckeditor5.js",
					"ckeditor5/": "./ckeditor5/"
				}
			}
		</script>
		<script type="module">
			import {
				ClassicEditor,
				Essentials,
				Paragraph,
				Bold,
				Italic,
				Font
			} from 'ckeditor5';

			import translations from 'ckeditor5/translations/cs.js';
            
			ClassicEditor
				.create( document.querySelector( '#editor' ), {
					plugins: [ Essentials, Paragraph, Bold, Italic, Font ],
					toolbar: [
						'undo', 'redo', '|', 'bold', 'italic', '|',
						'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'
					],
					language: 'cs',
					translations: [translations]
				} )
				.then( editor => {
					window.editor = editor;
				} )
				.catch( error => {
					console.error( error );
				} );
		</script>
	</body>
</html>

Soubor uložte a nahrajte na server. Do internetového prohlížeče zadejte adresu webu a testovacího souboru. Pokud jste vše udělali správně, zobrazí se vám stránka s editorem CKEditor.

Větší obrázek

Ukázková stránka

Další možnosti instalace

Použití CDN

CKEditor umožňuje implementaci i pomocí externí URL adresy, takže nemusíte stahovat a nahrávat balíček na vlastní server. Opět na stránce https://ckeditor.com/ckeditor-5/download/ přejděte do části "DISTRIBUTIONS" a přepněte se na záložku "CDN". Zobrazí se vám ukázkový zdrojový kód, který stačí vložit do HTML stránky.

Vlastní balíček

Nebo pomocí generátoru na stránce https://ckeditor.com/ckeditor-5/builder/ si můžete vytvořit vlastní editor s požadovanými rozšířeními, jazyky a typem implementace.

Ukázka

Ukázku stránky s editorem CKEditor si můžete prohlédnout na https://ckeditor.demo1.cz/.

Související odkazy

https://ckeditor.com/ - oficiální stránky editoru CKEditor (v angličtině)
https://ckeditor.com/docs/ - dokumentace k editoru CKEditor (v angličtině)
https://stackoverflow.com/questions/tagged/ckeditor - diskuzní fórum editoru CKEditor (v angličtině)

Aktualizace

Z bezpečnostních důvodů doporučujeme pravidelně provádět aktualizaci aplikace.

Diskuzní fórum pro aplikaci CKEditor 5

Nové diskuzní téma můžete založit v sekci Tvorba web stránek.

Témata	Reakce	Poslední příspěvek
Problémy FCK editoru po upgradu php na verzi php5.4	1	09.09.2013 11:43
SQL příkaz INSERT přes CKeditor nebo TinyMCE	1	10.10.2012 16:44
Drupal - nefunguje CKeditor a WYSIWYG modul	4	25.08.2010 23:08