fohow_admin/app/assets/javascripts/rails_admin/custom/ui.js

//= require rails_admin/custom/ckeditor_ajax

(function($) {
  function replaceCkeditor(textarea) {
    if (!window.CKEDITOR || !textarea || !textarea.id) {
      return;
    }

    try {
      if (window.CKEDITOR.instances[textarea.id]) {
        window.CKEDITOR.instances[textarea.id].updateElement();
        window.CKEDITOR.instances[textarea.id].destroy(true);
      }
    } catch (error) {}

    var $textarea = $(textarea);
    $textarea.removeClass('ckeditored');
    window.CKEDITOR.replace(textarea, $textarea.data('options') || {});
    $textarea.addClass('ckeditored');
  }

  function refreshPaneEditors($scope) {
    $scope.find('[data-richtext=ckeditor]').each(function() {
      replaceCkeditor(this);
    });
  }

  function ensurePaneEditors($scope) {
    var $editors = $scope.find('[data-richtext=ckeditor]');
    if ($editors.length === 0) {
      return;
    }

    if (window.CKEDITOR) {
      setTimeout(function() {
        refreshPaneEditors($scope);
      }, 0);
      return;
    }

    var options = $editors.first().data('options') || {};
    if (options.base_location) {
      window.CKEDITOR_BASEPATH = options.base_location;
    }

    if (options.jspath) {
      $.getScript(options.jspath, function() {
        setTimeout(function() {
          refreshPaneEditors($scope);
        }, 0);
      });
    }
  }

  function nearestField($input) {
    return $input.closest('.form-group, .control-group');
  }

  function buildProductLocaleTabs() {
    var $form = $('form').filter(function() {
      return $(this).find('[name="product[name]"]').length > 0;
    }).first();
    if ($form.length === 0) {
      return;
    }

    var fieldMap = [
      {
        key: 'zh-CN',
        label: '简体中文',
        nameField: nearestField($form.find('[name="product[name]"]')),
        detailField: nearestField($form.find('[name="product[detail]"]'))
      },
      {
        key: 'en',
        label: 'English',
        nameField: nearestField($form.find('[name="product[name_en]"]')),
        detailField: nearestField($form.find('[name="product[detail_en]"]'))
      },
      {
        key: 'ru',
        label: 'Русский',
        nameField: nearestField($form.find('[name="product[name_ru]"]')),
        detailField: nearestField($form.find('[name="product[detail_ru]"]'))
      },
      {
        key: 'zh-TW',
        label: '繁體中文',
        nameField: nearestField($form.find('[name="product[name_tw]"]')),
        detailField: nearestField($form.find('[name="product[detail_tw]"]'))
      }
    ];

    if ($form.find('.product-locale-tabs').length > 0) {
      return;
    }

    var hasAllFields = true;
    $.each(fieldMap, function(_, group) {
      if (group.nameField.length === 0 || group.detailField.length === 0) {
        hasAllFields = false;
        return false;
      }
    });
    if (!hasAllFields) {
      return;
    }

    var $anchor = fieldMap[0].nameField;
    var $mount = $('<div class="product-locale-tabs-mount"></div>');
    $anchor.before($mount);
    var $tabs = $('<div class="product-locale-tabs"></div>');
    var $header = $('<div class="product-locale-tabs-header"><div><h4>商品多语言内容</h4><p>名称与详情按语言分别维护，未填写时接口默认回退到简体中文。</p></div></div>');
    var $nav = $('<ul class="nav nav-tabs product-locale-tabs-nav" role="tablist"></ul>');
    var $content = $('<div class="tab-content product-locale-tabs-content"></div>');

    $.each(fieldMap, function(index, group) {
      var tabId = 'product-locale-tab-' + group.key.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase();
      var activeClass = index === 0 ? 'active' : '';
      var $navItem = $('<li role="presentation" class="' + activeClass + '"></li>');
      var $link = $('<a data-toggle="tab" role="tab"></a>');
      $link.attr('href', '#' + tabId);
      $link.append($('<span class="product-locale-tab-title"></span>').text(group.label));
      $link.append($('<span class="product-locale-tab-code"></span>').text(group.key));
      $navItem.append($link);
      $nav.append($navItem);

      var $pane = $('<div role="tabpanel" class="tab-pane product-locale-pane ' + activeClass + '" id="' + tabId + '"></div>');
      $pane.append(group.nameField);
      $pane.append(group.detailField);
      $content.append($pane);
    });

    $tabs.append($header).append($nav).append($content);
    $mount.replaceWith($tabs);

    ensurePaneEditors($content.find('.product-locale-pane.active'));
    $nav.on('shown.bs.tab', 'a[data-toggle="tab"]', function() {
      var selector = $(this).attr('href');
      if (!selector) {
        return;
      }
      ensurePaneEditors($content.find(selector));
    });
  }

  $(document).on('ready page:load turbolinks:load', buildProductLocaleTabs);
})(jQuery);