CKEditor 5 po pobraniu możemy zainstalować m.in. w pliku layout.phtml (Listing 1.), jak również w pliku widoku np. view/admin/article/index.phtml (Listing 3.).
Listing 1. Instalacja CKEditor 5 w Zend Framework 3 w pliku layout.phtml
<!-- CKEditor 5 Zend Framework 3 -->
<?= $this->doctype() ?>
<html lang="pl">
<head>
...
$this->headScript()->appendFile($this->basePath('shared/ckeditor5-build-classic/ckeditor.js'))
->appendFile($this->basePath('shared/js/configureckeditor5.js'));
</head>
<body>
...
<?= $this->content ?>
...
</body>
</head>
Instalowanie w pliku widoku index.phtml przeprowadzamy w dwóch etapach. Najpierw dodajemy $this->headScript() i $this->inlineScript() do pliku layout.phtml (Listing 2.). Następnie wprowadzamy odpowiedni skrypt do pliku np. view/admin/article/index.phtml (Listing 3.).
Listing 2. Fragment pliku layout.phtml
<!-- Zend Framework podstawy -->
<?= $this->doctype() ?>
<html lang="pl">
<head>
...
<?= $this->headScript() ?>
</head>
<body>
...
<?= $this->content ?>
...
<?= $this->inlineScript() ?>
</body>
</head>
Listing 3. Plik widoku view/admin/article/index.phtml
<?php
// Instalacja CKEditor 5
// Dodajemy w części head
$this->headScript()->appendFile($this->basePath('shared/ckeditor5-build-classic/ckeditor.js'));
// Dodajemy przed znacznikiem </body>.
// Kod pliku JavaScript na Listingu 4.
$this->inlineScript()->prependFile($this->basePath('shared/js/configureckeditor5.js'));
?>
<h1>Classic editor</h1>
<textarea name="content" id="editor">
W tym miejscu wprowadzamy własny tekst
</textarea>
Listing 4. Konfiguracja CKEditor 5 w pliku shared/js/configureckeditor5.js
// Instalacja CKEditor 5
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor=>{
console.log(editor);
})
.catch(error => {
console.error(error);
});
Pierwszy sposób instaluje CKEditor 5 na wszystkich stronach. Drugi tylko tam, gdzie jest używany element formularza textarea z identyfikatorem editor.
Wybrane książki:
- Adam Omelak: Zend Framework 3. Poradnik programisty, Wydawnictwo Helion, 2017
Wybrane strony: