CakePHP i TinyMCE

tinymcelogoDomyślnie CakePHP wyświetla do edycji pola tabeli z bazy danych typu text w zwykłych polach textarea, jednak jeśli edycja dotyczy np. treści posta, najlepszym rozwiązaniem jest użycie edytora WYSIWYG, który umożliwia formatowanie. Niniejszy wpis opisuje prosty sposób na zaimplementowanie darmowego edytora TinyMCE do szablonu widoku. Dzięki temu, wybrane pola do edycji będą wyświetlane w rozbudowanym edytorze.

  1. Pobierz paczkę edytora TinyMCE ze strony https://www.tinymce.com/download/ (plik znajdziesz także w załączniku na dole strony).
  2. Po rozpakowaniu, przenieś folder tinymce do folderu webroot\js. Teraz dostęp do plików edytora powinien wyglądać tak: webroot\js\tinymce.
  3. Pobierz paczkę języka polskiego ze strony https://www.tinymce.com/download/language-packages/, rozpakuj i zapisz plik pl.js do  webroot\js\tinymce\langs.
  4. Dodaj odwołanie do skryptów js w pliku src\Template\Layout – default.ctp, wpisując: <?= $this->Html->script(‚tinymce/tinymce.min’); ?>
  5. W pliku widoku (np. add.ctp lub edit.ctp), w którym chcesz zaimplementować edytor, użyj odpowiedniego wiersza do bufowania formularza. Jeśli chcesz edytować pole tekstowe w tabeli bazy, użyj pola INPUT lub TEXTAREA, wpisując echo $this->Form->input(‚content’);
  6. Na początku szablonu do edycji lub dodawania dodaj odwołanie do skryptu:
<script type="text/javascript">
tinymce.init({
selector: 'textarea',
language: 'pl',
theme: 'modern'
});
</script>

7. Od tej chwili wszystkie pola textarea będą edytowane w edytorze TimyMCE.

Selektywny wybór pól do edycji przy pomocy edytora TinyMCE

Jeśli nie jest konieczne przechwytywanie wszystkich pól typu textarea, zaś zamiast tego wymagany jest selektywny wybór pól do edycji w trybie WYSIWYG, należy posłużyć się id elementu. W tym celu należy zmodyfikować element selector: ‚textarea’  w inicjalizacji tinymce.init na selector: ‚textarea#wysiwyg’, gdzie wysiwyg to dowolna nazwa id, zaś w formularzu, który ma używać edytora wizualnego, należy zdefizniować id: echo $this->Form->input(‚content’,[‚id’=>’wysiwyg’]);

Od tej chwili, jedynie pola z id = wysiwyg będą edytowane za pomocą TinyMCE.

Wyjaśnienia wymaga jeszcze konfiguracja edytora TinyMCE.

  • height: 500 – wysokość edytora na stronie,
  • language: ‚pl’ – język polski edytora,
  • browser_spellcheck: true – włączenie sprawdzania błędów przez przeglądarkę,
  • readonly : true – podgląd tylko do odczytu.

Można zastosować także rozbudowaną wersję edytora, która pozwala na wyświetlenie o wiele bogatszej wersji edytora:

<script type="text/javascript">
tinymce.init({
selector: 'textarea',
language: 'pl',
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools'],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons', image_advtab: true, images_upload_base_path: '/img/images', file_picker_types: 'file image media', automatic_uploads: true,
browser_spellcheck: true,
theme: 'modern'
});
</script>

 

Na stronie  można zapoznać się w pełną dokumentacją dotyczącą konfiguracji w sekcji tinymce.init({}).

Używanie edytora TinyMCE do podglądu dokumentu

W przypadku wielu dokumentów zdarza się, że istnieje potrzeba wyświetlenia podglądu zapisanego dokumentu z bazy danych. W tym celu można także posłużyć się edytorem TinyMCE w trybie readonly.

W widoku view.ctp wystarczy dodać na początku odwołanie do edytora:

<script type="text/javascript">
tinymce.init({
selector: 'textarea#wysiwyg',
menubar:false,
statusbar: false,
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
],
plugins: ['print preview'],
toolbar1: 'print preview',
language: 'pl',
readonly: true,
height: 500,
theme: 'modern'});
</script>

A następnie posłużyć się do wyświetlenia pola w edytorze w prosty sposób:

<textarea rows="25" id="wysiwyg" readonly="readonly">
<?php echo $document->content; ?>
</textarea>

10747total visits,3visits today

Tagi , , .Dodaj do zakładek Link.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

+ 70 = 75

This site uses Akismet to reduce spam. Learn how your comment data is processed.