patch_file/app/views/admin/patchfiles/editckeditor.html.erb

<script src="/assets/lib/jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript">
  /*     修正bootstap.js和jquery-ui.js間的衝突,使tab按鈕能正常運作                        */
  var Button = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.button.defaults, options)
  }
  Button.prototype.setState = function (state) {
    var d = 'disabled'
      , $el = this.$element
      , data = $el.data()
      , val = $el.is('input') ? 'val' : 'html'
    state = state + 'Text'
    data.resetText || $el.data('resetText', $el[val]())
    $el[val](data[state] || this.options[state])
    // push to event loop to allow forms to submit
    setTimeout(function () {
      state == 'loadingText' ?
        $el.addClass(d).attr(d, d) :
        $el.removeClass(d).removeAttr(d)
    }, 0)
  }
  Button.prototype.toggle = function () {
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')
    $parent && $parent
      .find('.active')
      .removeClass('active')
    this.$element.toggleClass('active')
  }
 /* BUTTON PLUGIN DEFINITION
  * ======================== */
  var old = $.fn.button
  $.fn.button = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('button')
        , options = typeof option == 'object' && option
      if (!data) $this.data('button', (data = new Button(this, options)))
      if (option == 'toggle') data.toggle()
      else if (option) data.setState(option)
    })
  }
  /*     修正bootstap.js和jquery-ui.js間的衝突,使tab按鈕能正常運作                        */
</script>
<link rel="stylesheet" href="/assets/lib/jquery-ui-1.12.1/jquery-ui.min.css">
<h3 title="CKEDITOR現有字形">CKEDITOR現有字形</h3>
<button id="clickall"><%= (I18n.locale.to_s == "zh_tw") ? "全選" : "select all" %></button>
<button id="unclickall"><%= (I18n.locale.to_s == "zh_tw") ? "取消全選" : "unselect all" %></button>
<div style="clear:both;"></div>
<%=form_for @field,:url=>{:controller=>"patchfiles" ,:action=>"newfont"}  do |f|%>
	<div style="padding-left:1em" class="allcheckbox">
		<%= f.fields_for :font_array do |fontfield|%>
			<% @arr = @field.font_array.keys %>
			<% for @i in @arr %>
				<div style="float:left;">
				<% if @field.font_array[@i.to_s] == true%>
					<%=fontfield.check_box @i.to_s,{:checked=>true,:id=>"checkbox"+@i.to_s,:style=>"float:left;",:class=>"checkbox"} %>
				<% else %>
					<%=fontfield.check_box @i.to_s,{:id=>"checkbox"+@i.to_s,:style=>"float:left;",:class=>"checkbox"} %>
				<% end %>
					<%=fontfield.label @i.to_s ,{:for=>"checkbox"+@i.to_s,:style=>"float:right;",:class=>"checklabel"}%>
				</div>
			<%end%>
		<%end%>
	</div>
	<div style="clear:both;"></div>
	<div style="padding-left:1em"><label for="newfont" style="float:left;"><%=t(:newfont)%>:</label><%=f.text_field :new_add_font,{:id=>"newfont",:placeholder=>t(:newfont)}%></div>
	<%=f.submit "#{t(:updatefont)}",{:id=>"submitbtn"}%>
	<button id="initialbtn" onclick="return initialfcn()"><%= (I18n.locale.to_s == "zh_tw") ? "點擊來恢復初始狀態" : "click to recovery initial state" %></button>
	<%=f.text_field :initial_btn, {:id=>"hidden-initial",:type => "hidden",:value=>"false"} %>
	<button id="deletebtn" onclick="return deletefcn()"><%= (I18n.locale.to_s == "zh_tw") ? "點擊來刪除所選字形" : "click to delete selected font" %></button>
	<%=f.text_field :delete_btn, {:id=>"hidden-delete",:type => "hidden",:value=>"false"} %>
<%end%>
<li id ="ckeditorFont" class="show_li">
	<a title="CKEDITOR現有字形">CKEDITOR現有字形</a>
	<% @ckicktosee_str = (I18n.locale.to_s == "en") ? "click me to see all font which CKEDITOR have now" : "點擊我來查看編輯器所有目前擁有的字形" %>
	<a id="clicktosee" title="<%= @ckicktosee_str %>" class="Toggleclass"><%= @ckicktosee_str %></a>
	<ul>
	<% @field.font_array.each do |font,istrue|%>
		<% @inform = (I18n.locale.to_s == "en") ? "click me to edit" : "點擊我來編輯" %>
		<li><a title="<%= @inform+' '+font %>" href="<%= admin_patchfiles_path %>/editfontfile?font=<%= font %>"><%= font %></a></li>
	<%end%>
	</ul>
</li>
<style type="text/css">
	.show_li,.show_li *{
		list-style:none;
		color:black;
	}
	.show_li  ul{
		display:none;
	}
	#clicktosee{
		color:blue;
		cursor:pointer;
	}
</style>
<script>
	function deletefcn(){
		var str="";
		var num =1;
		for(var i =0;i<$(".checkbox").length ; i++){
			if($(".checkbox").eq(i).is(":checked") == true){
				str += ("<i style='color:red;'>"+num+". "+$(".checklabel").eq(i).html()+"\n"+"</i>");
				num += 1;
			}
		}
		if($( "#dialog-confirm" ).length != 0)
			$( "#dialog-confirm" ).remove();
		if(I18n.locale == "zh_tw"){
			$('body').after("<div id='dialog-confirm' title='你確定要刪除嗎？'>"+
										"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
										"按下確認鍵後，你將刪除你所選的字形。\n"+str+"</p>"
										+"</div>");
		}else{
			$('body').after("<div id='dialog-confirm' title='Are you sure to delete？'>"+
										"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
										"After click confirm button,you will delete the selected font.\n"+str+"</p>"
										+"</div>");
		}
		var flag = 0;
		$( "#dialog-confirm" ).dialog({
		  resizable: false,
		  height:200,
		  modal: true,
		  buttons: {
			<%=(I18n.locale == "zh_tw") ? "確認" : "confirm"%>: function(){
				$("#hidden-delete").val("true");
				$("#submitbtn").click();
				$( this ).dialog( "close" );
			},
			<%=(I18n.locale == "zh_tw") ? "取消" : "Cancel"%>: function() {
			  $("#hidden-delete").val("false");
			  $( this ).dialog( "close" );
			}
		  }
		});
		return false;
	};
	function initialfcn(){
		if($( "#dialog-confirm" ).length != 0)
			$( "#dialog-confirm" ).remove();
		if(I18n.locale == "zh_tw"){
			$('body').after("<div id='dialog-confirm' title='你確定要初始化嗎？'>"+
										"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
										"按下確認鍵後，你將初始化字形的列表和所擁有的字形。\n</p>"
										+"</div>");
		}else{
			$('body').after("<div id='dialog-confirm' title='Are you sure to initialize？'>"+
										"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
										"After click confirm button,you will initialize the font list and the fonts you have.\n</p>"
										+"</div>");
		}
		$( "#dialog-confirm" ).dialog({
		  resizable: false,
		  height:200,
		  modal: true,
		  buttons: {
			<%=(I18n.locale == "zh_tw") ? "確認" : "confirm"%>: function(){
				$("#hidden-initial").val("true");
				$('#submitbtn').click();
				$( this ).dialog( "close" );
			},
			<%=(I18n.locale == "zh_tw") ? "取消" : "Cancel"%>: function() {
			  $("#hidden-initial").val("false");
			  $( this ).dialog( "close" );
			}
		  }
		});
		return false;
	};
	$("#clickall").off("click").on("click",function(){
		for(var i =0;i<$(".checkbox").length ; i++){
			if($(".checkbox").eq(i).is(":checked") == false)
				$(".checklabel").eq(i).click();
		}
	});
	$("#unclickall").off("click").on("click",function(){
		for(var i =0;i<$(".checkbox").length ; i++){
			if($(".checkbox").eq(i).is(":checked") == true)
				$(".checklabel").eq(i).click();
		}
	});
	$('.Toggleclass').off("click").on("click",function(){
		$(this).parent().find(">ul").slideToggle();
	});
</script>