patch_file/updatefiles/accessibility/CKEDITOR Readme.txt

320 lines
13 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

在 目前專案/app/assets/stylesheets/lib中插入jquery-ui-12.1資料夾
在 目前專案/app/views/layouts/back_end.html.erb和
目前專案/app/views/page_parts/_form.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">
<script>
$('.btn-primary').attr('onclick',"return checkArea()");
var textID = new Array($('.ckeditor').length);
$(document).ready(function(){
for(var i=0 ; i< $('.ckeditor').length ; i++){
if($('.ckeditor').eq(i).attr("id") == "" || $('.ckeditor').eq(i).attr("id") == undefined){
$('.ckeditor').eq(i).attr("id","ckeditorArea"+i);
textID[i] = "ckeditorArea"+i
}else{
textID[i] = $('.ckeditor').eq(i).attr("id");
}
try{
CKEDITOR.replace(textID[i])
}catch(e){};
}
});
function checkArea(){
var flag = 1;//1=>true
if( $(".fakeArea").length !=0 )
$(".fakeArea").remove();
var k = 0; //k=0 => 所有iframe的title都有加
var k1 = 0;//k1=0 => 所有img的title和alt都有加
var k2 = 0;//k2=0 => 所有a的title都有加
for(var i=0 ; i< $('.ckeditor').length ; i++){
$("#"+textID[i]).before("<div class='fakeArea' style='display:none;'></div>");
var Data = CKEDITOR.instances[textID[i]].getData();
$(".fakeArea").eq(i).html(Data);
/* change the font-size unit from px to em start*/
function changepxToem(that){
for(var i=0;i<that.querySelectorAll('*').length;i++){
if(that.querySelectorAll('*')[i].style.fontSize.search('px') != -1)
that.querySelectorAll('*')[i].style.fontSize = Number(that.querySelectorAll('*')[i].style.fontSize.split('px')[0]) / 16 + 'em';
}
}
changepxToem(document.querySelectorAll('.fakeArea')[i]);
/* change the font-size unit from px to em end*/
if($('.fakeArea:eq('+i+') iframe').length != 0){
for(var j=0;j<$('.fakeArea:eq('+i+') iframe').length;j++){
if($('.fakeArea:eq('+i+') iframe').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') iframe').eq(j).attr('title') ==''){
k += 1;
};
};
for(var j=0;j<$('.fakeArea:eq('+i+') img').length;j++){
if($('.fakeArea:eq('+i+') img').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('title') =='' || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') ==''){
k1 += 1;
};
}
for(var j=0;j<$('.fakeArea:eq('+i+') a').length;j++){
if($('.fakeArea:eq('+i+') a').eq(j).attr('href') != undefined || $('.fakeArea:eq('+i+') a').eq(j).attr('href') !=''){
if($('.fakeArea:eq('+i+') a').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') a').eq(j).attr('title') ==''){
k2 += 1;
};
};
}
};
};
function setIframe(){
for(var i=0 ; i< $('.ckeditor').length ; i++){
for(var j=0;j<$('.fakeArea:eq('+i+') iframe').length;j++){
if($('.fakeArea:eq('+i+') iframe').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') iframe').eq(j).attr('title') ==''){
if($('.fakeArea:eq('+i+') iframe').eq(j).attr('src').search("facebook") != -1)
$('.fakeArea:eq('+i+') iframe').eq(j).attr('title',"facebook");
else if($('.fakeArea:eq('+i+') iframe').eq(j).attr('src').search("twitframe") != -1)
$('.fakeArea:eq('+i+') iframe').eq(j).attr('title',"twitter");
else if($('.fakeArea:eq('+i+') iframe').eq(j).attr('src').search("google") != -1)
$('.fakeArea:eq('+i+') iframe').eq(j).attr('title',"google");
else if($('.fakeArea:eq('+i+') iframe').eq(j).attr('src').search("youtube") != -1)
$('.fakeArea:eq('+i+') iframe').eq(j).attr('title',"youtube");
}
};
CKEDITOR.instances[textID[i]].setData($('.fakeArea').eq(i).html());
};
};
function setImg(){
for(var i=0 ; i< $('.ckeditor').length ; i++){
for(var j=0;j<$('.fakeArea:eq('+i+') img').length;j++){
if($('.fakeArea:eq('+i+') img').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('title') =='' || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') ==''){
if($('.fakeArea:eq('+i+') img').eq(j).attr('title') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('title') =='' ){
if($('.ckeditor').eq(i).attr('name').search('zh_tw') != -1)
$('.fakeArea:eq('+i+') img').eq(j).attr('title','這是一張圖片')
else if($('.ckeditor').eq(i).attr('name').search('en') != -1)
$('.fakeArea:eq('+i+') img').eq(j).attr('title','This is a image')
};
if($('.fakeArea:eq('+i+') img').eq(j).attr('alt') == undefined || $('.fakeArea:eq('+i+') img').eq(j).attr('alt') =='' ){
if($('.ckeditor').eq(i).attr('name').search('zh_tw') != -1)
$('.fakeArea:eq('+i+') img').eq(j).attr('alt','這是一張圖片')
else if($('.ckeditor').eq(i).attr('name').search('en') != -1)
$('.fakeArea:eq('+i+') img').eq(j).attr('alt','This is a image')
};
}
}
CKEDITOR.instances[textID[i]].setData($('.fakeArea').eq(i).html());
};
};
function setAtitle(){
for(var i=0 ; i< $('.ckeditor').length ; i++){
for(var j=0;j<$('.fakeArea:eq('+i+') a').length;j++){
if($('.fakeArea:eq('+i+') a').eq(j).attr("href") != "" || $('.fakeArea:eq('+i+') a').eq(j).attr("href") != undefined ){
var titlestr="";
if($('.fakeArea:eq('+i+') a').eq(j).attr('target')=='_self')
titlestr += '在本視窗開啟 ';
else if($('.fakeArea:eq('+i+') a').eq(j).attr('target') == '_blank')
titlestr += '在新視窗開啟 ';
if($('.fakeArea:eq('+i+') a').eq(j).attr('title')=="" || $('.fakeArea:eq('+i+') a').eq(j).attr('title')==undefined && $('.fakeArea:eq('+i+') a').eq(j).html().search('</') == -1)
titlestr += $('.fakeArea:eq('+i+') a').eq(j).html().trim();
else if($('.fakeArea:eq('+i+') a').eq(j).attr('title')=="" || $('.fakeArea:eq('+i+') a').eq(j).attr('title') == undefined && $('.fakeArea:eq('+i+') a').eq(j).find('>span').length==1)
titlestr += $('.fakeArea:eq('+i+') a').eq(j).find('>span').html().trim();
else if($('.fakeArea:eq('+i+') a').eq(j).attr('title') =="" || $('.fakeArea:eq('+i+') a').eq(j).attr('title') == undefined){
try{
if($('.fakeArea:eq('+i+') a').eq(j).html().trim().split('>').length==2)
titlestr += $('.fakeArea:eq('+i+') a').eq(j).html().trim().split('>')[1].trim();
else if($('.fakeArea:eq('+i+') a').eq(j).html().trim().split('>').length==3)
titlestr += $('.fakeArea:eq('+i+') a').eq(j).html().trim().split('>')[2].trim();
}catch(e){};
}
else
titlestr += $('.fakeArea:eq('+i+') a').eq(j).attr('title');
if(titlestr.search('<img') != -1)
titlestr = "這是一張照片";
if(titlestr != "")
$('.fakeArea:eq('+i+') a').eq(j).attr('title',titlestr);
};
};
CKEDITOR.instances[textID[i]].setData($('.fakeArea').eq(i).html());
};
};
if( k != 0){
if($(".active > [data-toggle='tab']").attr("href") == ".zh_tw"){
alert('請加上iframe的title');
i = 0;
$("#"+textID[i]).before("<div id='dialog-confirm' title='要使用默認的iframe title嗎'>"+
"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
"按下確認後,將自動新增iframe的title,若按下否,則可自行設定title。</p>"
+"</div>");
$( "#dialog-confirm" ).dialog({
resizable: false,
height:200,
modal: true,
buttons: {
"確認": function(){setIframe();$( this ).dialog( "close" );},
"取消": function() {
$( this ).dialog( "close" );
}
}
});
}else if($(".active > [data-toggle='tab']").attr("href") == ".en"){
alert('please write down iframe title');
i = 1;
$("#"+textID[i]).before("<div id='dialog-confirm' title='Do you want to use default title of the iframes'>"+
"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
"After click confirm button,title of the iframes will be auto generated.And after click confirm button,you can set up title of the iframes by yourself.</p>"
+"</div>");
$( "#dialog-confirm" ).dialog({
resizable: false,
height:200,
modal: true,
buttons: {
"confirm": function(){setIframe();$( this ).dialog( "close" );},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
};
flag = 0;
}else{
if( k1!= 0){
if($(".active > [data-toggle='tab']").attr("href") == ".zh_tw"){
alert('請加上img的title');
i = 0;
$("#"+textID[i]).before("<div id='dialog-confirm' title='要使用默認的圖片標題和替代文字嗎?'>"+
"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
"按下確認後,將自動新增img的title和alt,若按下否,則可自行設定title和alt。</p>"
+"</div>");
$( "#dialog-confirm" ).dialog({
resizable: false,
height:200,
modal: true,
buttons: {
"確認": function(){setImg();$( this ).dialog( "close" );},
"取消": function() {
$( this ).dialog( "close" );
}
}
});
}else if($(".active > [data-toggle='tab']").attr("href") == ".en"){
alert('please write down img title');
i = 1;
$("#"+textID[i]).before("<div id='dialog-confirm' title='Do you want to use default title and alt of the images'>"+
"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
"After click confirm button,title and alt of the images will be auto generated."
+"And after click confirm button,you can set up title and alt of the images by yourself.</p>"
+"</div>");
$( "#dialog-confirm" ).dialog({
resizable: false,
height:200,
modal: true,
buttons: {
"confirm": function(){setImg();$( this ).dialog( "close" );},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
};
flag = 0;
}else{
if( k2!= 0){
if($(".active > [data-toggle='tab']").attr("href") == ".zh_tw"){
alert('請加上a標籤的title');
i = 0;
$("#"+textID[i]).before("<div id='dialog-confirm' title='要使用默認的a標籤標題嗎'>"+
"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
"按下確認後,將自動新增img的title和alt,若按下否,則可自行設定title和alt。</p>"
+"</div>");
$( "#dialog-confirm" ).dialog({
resizable: false,
height:200,
modal: true,
buttons: {
"確認": function(){setAtitle();$( this ).dialog( "close" );},
"取消": function() {
$( this ).dialog( "close" );
}
}
});
}else if($(".active > [data-toggle='tab']").attr("href") == ".en"){
alert('please write down title of the a labels');
i = 1;
$("#"+textID[i]).before("<div id='dialog-confirm' title='Do you want to use default title of the a label'>"+
"<p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
"After click confirm button,title of the a label will be auto generated."
+"And after click confirm button,you can set up title of the a label by yourself.</p>"
+"</div>");
$( "#dialog-confirm" ).dialog({
resizable: false,
height:200,
modal: true,
buttons: {
"confirm": function(){setAtitle();$( this ).dialog( "close" );},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
};
flag = 0;
}else{
for(var i=0 ; i< $('.ckeditor').length ; i++){
CKEDITOR.instances[textID[i]].setData($('.fakeArea').eq(i).html()); //將修改完的data(font-size from px to em)放回textarea
}
}
}
if(flag != 0)
flag = 1;
};
if(flag == 1)
return true;
else
return false;
};
</script>