links/app/views/admin/web_resources/_form.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/fileupload" %>
  <%= stylesheet_link_tag "lib/main-list" %>
<% end %>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/bootstrap-fileupload" %> 
  <%= javascript_include_tag "lib/module-area" %>
<% end %>

<!-- Input Area -->
<div class="input-area">

  <!-- Module Tabs -->
  <div class="nav-name"><strong><%= t(:module) %></strong></div>
  <ul class="nav nav-pills module-nav">
    <li class="active"><a href="#basic" data-toggle="tab"><%= t(:basic) %></a></li>
    <li><a href="#status" data-toggle="tab"><%= t(:status) %></a></li>
    <li><a href="#tag" data-toggle="tab"><%= t(:tags) %></a></li>
    <li><a href="#imageupload" data-toggle="tab"><%= t('web_link.image') %></a></li> 
  </ul>

  <!-- Module -->
  <div class="tab-content module-area">

    <!-- Basic Module -->
    <div class="tab-pane fade in active" id="basic">

      <!-- Category -->
      <div class="control-group">
        <label class="control-label muted"><%= t(:category) %></label>
        <div class="controls">
          <%= select_category(f, @module_app) %>
        </div>
      </div>

    </div>

    <!-- Status Module -->
      <div class="tab-pane fade" id="status">

        <!-- Status -->
        <div class="control-group">
          <label class="control-label muted"><%= t(:status) %></label>
          <div class="controls" data-toggle="buttons-checkbox">
            <label class="checkbox inline btn <%= 'active' if @link.is_top? %>">
              <%= f.check_box :is_top %> <%= t(:top) %>
            </label>
            <label class="checkbox inline btn <%= 'active' if @link.is_hot? %>">
              <%= f.check_box :is_hot %> <%= t(:hot) %>
            </label>
            <label class="checkbox inline btn <%= 'active' if @link.is_hidden? %>">
              <%= f.check_box :is_hidden %> <%= t(:hide) %>
            </label>
          </div>
        </div>

      </div>
    <%# end %>

    <!-- Tag Module -->
    <div class="tab-pane fade" id="tag">

      <!-- Tag -->
      <div class="control-group">
        <label class="control-label muted"><%= t(:tags) %></label>
        <%= select_tags(f, @module_app) %>
      </div>

    </div>
    
    <!-- Images Module -->
    <div class="tab-pane fade" id="imageupload">

      <!-- Images Upload -->
      <div class="control-group">
        <label class="control-label muted"><%= t(:image) %></label>
        <div class="controls">
          <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @link.image.file %>" data-provides="fileupload">
            <div class="fileupload-new thumbnail pull-left">
              <% if @link.image.file %>
                <%= image_tag @link.image %>
              <% else %>
                <img src="https://via.placeholder.com/100x100" />
              <% end %>
            </div>
            <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
            <span class="btn btn-file">
              <span class="fileupload-new"><%= t(:select_image) %></span>
              <span class="fileupload-exists"><%= t(:change) %></span>
              <%= f.file_field :image %>
            </span>
            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
            <div class="controls" data-toggle="buttons-checkbox">
              <label class="checkbox inline btn btn-danger fileupload-remove">
                <%= f.check_box :remove_image %><%= t(:remove) %>
              </label>
            </div>
          </div>
        </div>
      </div>
        <% @site_in_use_locales.each do |locale| %>
          <%= f.fields_for :image_description_translations do |f| %>
            <div class="control-group">
            <label class="control-label muted" for="image_description_<%= locale.to_s %>"><%= t(:description) + " (#{t(locale.to_s)})" %></label>
              <div class="controls">
                <%= f.text_field locale, value: (@link.image_description_translations[locale.to_s] rescue nil) %> 
              </div>
            </div>
          <% end %>
        <% end %>

    </div>
    
  </div>


  </div>

   <!-- Language Tabs -->
    <div class="nav-name"><strong><%= t(:language) %></strong></div>
    <ul class="nav nav-pills language-nav">
      <% @site_in_use_locales.each_with_index do |locale, i| %>
        <li class="<%= 'active' if i == 0 %>">
          <a data-toggle="tab" href=".<%= locale %>"><%= t(locale) %></a>
        </li>
      <% end %>
    </ul>

    <!-- Language -->
    <div class="tab-content language-area">

      <% @site_in_use_locales.each_with_index do |locale, i| %>
      
        <div class="<%= locale %> tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">

          <!-- Title-->
          <div class="control-group input-title">
            <label class="control-label muted"><%= t(:title) %></label>
            <div class="controls">
              <%= f.fields_for :title_translations do |f| %>
                <%= f.text_area locale, class: "input-block-level ckeditor_reduce", placeholder: t(:title), value: (@link.title_translations[locale] rescue nil) %>
              <% end %>
            </div>
          </div>

          <!-- Context-->
          <div class="control-group input-title">
            <label class="control-label muted"><%= t(:description) %></label>
            <div class="controls">
              <%= f.fields_for :context_translations do |f| %>
                <%= f.text_area locale, rows: 5, class: "input-block-level ckeditor", value: (nl2br(@link.context_translations[locale]) rescue nil) %>
              <% end %>
            </div>
          </div>

          <!-- Url-->
          <div class="control-group input-title">
            <label class="control-label muted"><%= t(:url) %></label>
            <div class="controls">
              <%= f.fields_for :url_translations do |f| %>
                <%= f.text_field locale, class: "input-block-level url_input", placeholder: t(:url), value: (@link.url_translations[locale] rescue nil) %>
              <% end %>
            </div>
          </div>

        </div>

      <% end %>

      <!-- Out Link -->
      <div class="control-group input-title">
        <label class="control-label muted"><%= t('web_link.type') %></label>
        <div class="controls">
          <%= f.select :link_open, WebLink::LINK_OPEN_TYPES.map{|wl| [t("web_link.#{wl}"), wl]} %>
        </div>
      </div>

    </div>

  </div>

  <!-- Form Actions -->
  <div class="form-actions">
    <%= f.submit t('submit'), class: 'btn btn-primary' %>
    <%= link_to t('cancel'), admin_web_resources_path, :class=>"btn" %>  
  </div>
  <script type="text/javascript">
    $(document).ready(function(){
      var config = {}
      config.autoGrow_minHeight = 50;
      config.allowedContent = {
        $1: {
          match: function( element ) {
            const v = element;
            return true;
          },
          // Use the ability to specify elements as an object.
          elements: CKEDITOR.dtd,
          attributes: true,
          styles: true,
          classes: true
        }
      };
      config.toolbar = [
        { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
        { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
        
        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
        '/',
        { name: 'insert', items: [ 'SpecialChar'] },
        { name: 'styles', items: [ 'Font' ] },
        { name: 'colors', items: [ 'TextColor', 'BGColor' ] }
      ];

      var ckeditor_reduce = $('.ckeditor_reduce')
      ckeditor_reduce.each(function(i,v){
        var editor = CKEDITOR.replace(v,config);
        editor.on( 'paste', function( evt ) {
          // Create a standalone filter passing 'p' and 'b' elements.
          var filter = new CKEDITOR.filter(evt.editor);
          // Now disllow color attribute & colour background-color, text-decoration styles.
          // Format "elements [attributes, attr2]{styles}(classes)"."
          // Default is '*[color]; *{color, background-color, text-decoration}'.
          filter.allow({
            '$1': {
                // Use the ability to specify elements as an object.
                elements: CKEDITOR.dtd,
                attributes: true,
                styles: true,
                classes: true
            }
          });
          filter.disallow('img; *[font-size]; *{font-size, background-color, text-decoration}');
          // Filter it now.
          var fragment = CKEDITOR.htmlParser.fragment.fromHtml(evt.data.dataValue);
          var writer = new CKEDITOR.htmlParser.basicWriter();
          filter.applyTo(fragment);
          fragment.writeHtml(writer);
          var processed_html = writer.getHtml();
          // Set the value of what will be pasted.
          evt.data.dataValue = processed_html;
          // Clean up - free up memory.
          filter.destroy();
        } );
      });
      $('.url_input').on('paste', function(e){
        var pastedData = e.originalEvent.clipboardData.getData('text');
        var _this = $(this);
        pastedData = pastedData.replace(new RegExp('^http(s|)://' + window.location.host), '');
        window.setTimeout(function(){
          _this.val(pastedData);
        }, 0);
      });
    });
  </script>
</div>