Category: Javascript

Fckeditor + Autogrow vs Google Chrome

Dzisiaj zupełnie przypadkiem zauważyłem, że (kolejny raz) autogrow szwankuje. Tym razem wysypał się przy odpalaniu Fckeditora na Chromie. Autogrow automatycznie ustawiał wysokość pola na max, zamiast ustawić na wybraną wartość i dopiero w razie potrzeby je powiększać.

Rozwiązanie tego problemu okazało się całkiem proste.

W pliku fckeditor/editor/plugins/autogrow/fckplugin.js wystarczy zakomentować linijki od 45 do 48 (fragment poniżej):

if ( typeof window.onresize == 'function' )
{
    window.onresize();
}

Fckeditor, Rails oraz toolbarStartExpanded czyli autorozwijanie paska narzędzi

Korzystając z FCKEditora, mamy możliwość zdecydowania w pliku fckconfig.js czy pasek narzędziowy ma być domyślnie rozwinięty czy też nie.

Jednak w wielu przypadkach, jest to za mało. Często nie chcemy w całej aplikacji definiować jednego "stylu", a zależnie od tego gdzie jesteśmy, mieć rozwinięty bądź nie, ten pasek narzędziowy.

Przykładem tego może być prosty CMS, gdzie mamy miejsce edycji tekstów - w takim miejscu ten pasek powinien być rozwinięty. Jednak mamy też np miejsce wpisywania opisów do galerii (pomijając fakt że tam wystarczyłoby zwykłe textarea) - w takim miejscu użytkownicy zazwyczaj wpisują tekst, nie "zdobiąc" go zbytnio.

Do Railsów jest plugin umożliwiający wykorzystywanie FCKEditora, dodając wygodny helper fckeditor_textarea. Rozwiązanie to ma jednak jedną zasadniczą wadę: nie można sterować z jego poziomu parametrem: toolbarStartExpanded.

Pokusiłem się i napisałem łatkę, a raczej wersję poprawioną metody fckeditor_textarea. W pliku fckeditor.rb pluginu, znajdujemy wyżej wymienioną metodę i dopisujemy od linijki 30:

      if options[:toolbarStartExpanded].nil?
        toolbar_expand = ''
      else
        toolbar_expand = "oFCKeditor.Config['ToolbarStartExpanded'] = #{options[:toolbarStartExpanded].to_s}"
      end

A następnie w javascript_tag zwracanym, jako trzeci wiersz:

"#{toolbar_expand}\n"<<

i tyle :)

Od teraz możemy korzystać z tego w następujący sposób:

  <%= fckeditor_textarea(:text, :content,
    :toolbarSet => 'Text',
    :toolbarStartExpanded => false,
    :width => '75%',
    :height => '250px',
    :cols => '50',
    :rows=> '8',
    :id => 'fckedit') %>

Poniżej cała metoda fckeditor_textarea:

    def fckeditor_textarea(object, field, options = {})
      var = instance_variable_get("@#{object}")
      if var
        value = var.send(field.to_sym)
        value = value.nil? ? "" : value
      else
        value = ""
        klass = "#{object}".camelcase.constantize
        instance_variable_set("@#{object}", eval("#{klass}.new()"))
      end
      id = fckeditor_element_id(object, field)

      cols = options[:cols].nil? ? '' : "cols='"+options[:cols]+"'"
      rows = options[:rows].nil? ? '' : "rows='"+options[:rows]+"'"

      width = options[:width].nil? ? '100%' : options[:width]
      height = options[:height].nil? ? '100%' : options[:height]

      if options[:toolbarStartExpanded].nil?
        toolbar_expand = ''
      else
        toolbar_expand = "oFCKeditor.Config['ToolbarStartExpanded'] = #{options[:toolbarStartExpanded].to_s}"
      end

      toolbarSet = options[:toolbarSet].nil? ? 'Default' : options[:toolbarSet]

      id = options[:id].nil? ? id : options[:id]
      value = options[:value].nil? ? value : options[:value]

      if options[:ajax]
        inputs = "<input type='hidden' id='#{id}_hidden' name='#{object}[#{field}]'>\n" <<
                 "<textarea id='#{id}' #{cols} #{rows} name='#{id}'>#{value}</textarea>\n"
      else
        inputs = "<textarea id='#{id}' #{cols} #{rows} name='#{object}[#{field}]'>#{value}</textarea>\n"
      end

      js_path = "/javascripts"
      base_path = "#{js_path}/fckeditor/"
      return inputs <<
        javascript_tag("try{var oFCKeditor = new FCKeditor('#{id}', '#{width}', '#{height}', '#{toolbarSet}');\n" <<
                       "oFCKeditor.BasePath = \"#{base_path}\"\n" <<
                       "#{toolbar_expand}\n"<<
                       "oFCKeditor.Config['CustomConfigurationsPath'] = '#{js_path}/fckcustom.js';\n" <<
                       "oFCKeditor.ReplaceTextarea();\n}catch(e){}")
    end

Copyright © 2024 Closer to Code

Theme by Anders NorenUp ↑