Monday, September 16, 2013

Tinymce - Rozbudowany Edytor HTML dla RoR

poniedziałek, wrzesień 16, 2013 Dodany przez Miłosz Osiński #RUBY ON RAILS ##
W tym poście opisze bardzo fajny edytor WYSIWYG HTML5 dla Rialsów

Edytor TinyMCE, do poprawnego działania, wykorzystuje JavaScript lub/i biblioteki jQuery.
Sama instalacja jest dziecinnie prosta, o czym zaraz się przekonamy.

Zaczynamy jak zwykle do gemfile dodajemy:
gem "tinymce-rails"
Aktualizujemy:
bundle install
Dodajemy assety do pliku app/assets/javascripts/application.js bez których edytor nie zadziała:
//= require tinymce

Jeśli nie chcesz korzystać z TinyMCE w całej witrynie i nie obciążać jej niepotrzebnym wczytywaniem javascript-u edytora. Wtedy zamiast poprzedniego kroku możesz w widoku, którym będziesz używać TinyMCE na początku pliku dodać następujący kod:
<%= tinymce_assets %>

Na końcu pliku widoku trzeba dodać:
<%= tinymce language: "pl", entity_encoding: "raw" %>
language: "pl" - dzięki temu będziemy mogli użyć języka polskiego
entity_encoding: "raw" - ta opcja zaoszczędzi nam kłopotów z kodowanie utf8

Pamiętajmy też o dodaniu klasy w textarea np:
<%= f.text_area :tekst_pl, class: "tinymce", rows: 10, cols: 12 %>

na koniec tworzymy plik config/tinymce.yml:
theme_advanced_toolbar_location: top
theme_advanced_toolbar_language : pl
theme_advanced_toolbar_align: left
theme_advanced_statusbar_location: bottom
theme_advanced_buttons3_add:
  - tablecontrols
  - fullscreen
plugins:
  - table
  - fullscreen
  - textcolor
  - code
  - autolink
  - visualblocks
  - preview
  - link
  - hr
  - searchreplace
  - spellchecker
  - wordcount
  - insertdatetime
  - image
  - print
  - nonbreaking
  - media
  
toolbar: 
  - undo redo
  - indent outdent bullist numlist
  - forecolor backcolor
  - fontselect
  - fontsizeselect

Ważne żeby nie zapomnieć że po prekompilacji trzeba dodać plik pl.js do public/assets/tinymce/langs/pl.js aby mieć polski język w edytorze ;)