表更新で行数/列数を減らせる仕様に
表の行数や列数を減らすと、そこに記入された文字データも削除されます。 ユーザーがデータを失う事を避けるため、今までこの操作を採り入れませんでした。 しかしこれは不便に思う事が多く、今回「表更新」で減らす方向の設定を可能にしました。
「表更新」を押した時に、行数/列数の「変更がない」か「追加」する指定になっている場合は、従来の通りに表の拡張が行われます。 しかし、行数/列数のいずれかが「減らす」指定になっている場合は、アラートを表示する様にしました。
▪「OK」を押せば、最下行または最右列からの行または列の削除を行います。
▪「キャンセル」を押すと「減数指定」は無視し、「追加指定」だけを処理します。
これで、行数/列数の柔軟な変更が通常表示から可能になりました。
「Blog Table ⭐」の概要
このツールは「通常表示」編集画面で、簡単に表を記事上に作成する事ができます。
表の仕様や機能は以下です。
桁数・列数 | |
左寄せ・中央配置、全幅値指定(文書幅を越えた指定は横スクロール表示) | |
特定の全幅値のMEMO記録と全幅値セット機能 | |
セル内の左右余白(固定幅余白の有無のみ指定可能) | |
枠線幅(枠線幅 1px~ ) 二重枠線(枠線幅 -1px~-9px ) 枠線無し(0px) | |
枠線色・上部見出し・左部見出し・全体背景色(全てカラーパネルで設定可能) | |
上部見出し・左部見出し の背景色の優先の選択 | |
表の基本文字サイズ | |
表コピー機能(表のデザイン設定のみコピーして 次の表作成に反映) |
ツールの起動とモード変更
●「Blog Table ⭐」は「Ctrl + F1」で「表作成」モードが起動します。
➔ 記事タイトル入力枠上に「表作成」のパネルが表示されます。
● 次の「Ctrl + F1」で「表更新」モードになります。
● もう一度「Ctrl + F1」を押すと、ツールが終了します。
表の作成手順
● 空白行の左端にキャレットを入れ、「表作成」で最初の基本の表を生成します。 後の「表更新」で全ての設定が変更可能ですから、およその行数・列数を指定します。
● 基本の表が生成できたら、「Ctrl + F1」で「表更新」に変更します。 表内をクリックして編集枠左端に青線を表示します。(更新する表の選択) この青線はツールを「Ctrl + F1」でOFFにするか、投稿操作で自動的に消えます。
● 各種の設定を変更して「表更新」を押し、表デザインを仕上げます。 表内部に文字データを書き込んだ後でも、表デザインは変更できます。 また、表を作成した文書を再編集する場合も、「表更新」による変更が可能です。
● パネル上の各種の設定の変更は、右端の「表更新」を押した時に反映します。
●「表」は「table要素」の特性を持っています。 記入したデータの幅(文字数)によって各列の幅が自動的に配分され、最初は戸惑います。 幅の調節は「半角・全角の空白」を利用すると便利です。 またセル内で改行すれば、行の高さ変更が可能です。
各設定の設定方法
構成
表の「列数」「行数」を指定しますが、「列数」は左端列の「見出し列」を1列目として数えます。「行数」は最上行の「見出し行」を1行目として数えて指定します。
配置 ・表幅
●「表幅」がブログ本文幅より小さい場合は、本文上で表の「左寄せ」「中央寄せ」の配置が選択できます。 これは、配置表示枠を「左クリック」して切換えます。
●「表幅」をブログ本文幅より大きく指定すると、「左寄せ」「中央寄せ」は無効になり、「左寄せ」で「横スクロール」する表示になります。 表内データが大きく、本文幅に収まらない場合も、大きな「表幅」で余裕のある表が作れます。
●「表幅」の指定が1pxでも「本文幅」を越えるとスクロール表示となります。 そこで、「本文幅」に合せた「表幅」を簡単に設定できる「MEMO機能」を作りました。
▪「Ctrl + Ⓜボタン」で「表幅枠」に設定された値が記録されます。
▪「Ⓜボタン」を押すと2sec青色となり、記録幅値が「表幅枠」に入力されます。
▪ ユーザー自身のブログ本文幅を「MEMO機能」で記録して利用します。
( 詳細は 「Blog Table ⭐」(10) を参照ください )
セル内の「padding」
「p」マークの枠を「左クリック」すると、セル内の「左右padding」の有無を変更できます。 左の「p+」は、セル内に左右「0.6em」の余白が設定されます。 列数が多くてセル幅が狭い表に、文字を多く記入したい場合などに「p0」を指定します。
( 詳細は「Blog Table ⭐」(8) を参照ください )
枠線
● 枠線幅は「-9px」以上の値が設定できます。
▪「-9px ~ -1px」は、二重枠線の表示で、二重線の間隔指定になります。
▪「0px」は、枠線が非表示になります。
▪「1px ~ 」は、単線の枠線表示になり、その枠線の幅指定になります。
( 詳細は「Blog Table ⭐」(10) を参照ください )
●「枠線色」は「左クリック」で拡がり、カラーコードの直接入力枠になります。
●「枠線色」を「Ctrl + 左クリック」すると、カラーパレットで色指定が出来ます。
( 詳細は「Blog Table ⭐」(6) を参照ください )
最上行背景色・左端列背景色・全体背景色
●「表」の主要部分(下図)の背景色を設定します。
● 指定方法は、上記の「枠線色」と全く同じです。
( 詳細は「Blog Table ⭐」(6) を参照ください )
● 最上行・左端列の背景色が重なる部分で、背景色の優先する方を選択できます。
▪左端列背景色の右側の「▲」ボタンを「左クリック」して選択します。
( 詳細は「Blog Table ⭐」(8) を参照ください )
「淡色」の設定
4個の「色設定枠」を「Shift+左クリック」することで、設定が難しい「淡色」が簡単に指定できます。
(詳細は、「Blog Table ⭐」(16) を参照ください )
文字
● 表全体の基本的な文字サイズを指定します。
▪この指定によらず、表内の一部の文字サイズを変更する事が可能です。
▪編集画面の「文字サイズ指定」や「HTML編集」で文字サイズを指定します。
▪その際、縮小変更は表崩れになり難く、拡大は表全体に影響し易くなります。
● 各セル・複数セル・表全体 に対して、「編集アイコン」によって「左寄せ」「中央寄せ」「右寄せ」、太字、アンダーライン、文字色などの文字デザインの設定が、通常の本文編集と同様に有効です。
表コピー機能
●「表作成」で設定を変更せずに作成した場合、前回の「表作成」時の設定のデザインで「表」の生成を行います。 この設定はローカルストレージに保存され、次にこのツールを使用する時にも再現されます。
( 詳細は「Blog Table ⭐」(9) を参照ください )
これに対し「表コピー機能」を使うと、既に作成した表デザインをコピーして、次の「表作成」のデザインに利用できます。 これにより、多彩な雛形の運用が可能です。
●「表更新」の「C」マークをクリックすると、選択中の「表」の全設定を記録します。 この際、表構成やデザインのみが記録され、表に記入されたデータは記録されません。 この記録は「表作成」のデフォルト値になり、簡単に表の複製が出来ます。
● 表内のデータを一緒にコピーするには、表の範囲を全て反転させてコピーする事で可能です。 また、HTML編集でコピーすると、一番間違いがありません。
▪他の文書間では、データを含めた表の全コピーは、問題がありません。
▪同文書内では、表IDの重複が生じるので勧められません。 この場合は手間でも
「表コピー機能」を使い、データは手作業でコピーするのがベストです。
( 詳細は「Blog Table ⭐」(11) を参照ください )
「Blog Table ⭐」ver. 1.5 を導入するには
「Blog Table ⭐」は Chrome / 新Edge / Firefox の拡張機能「Tampermonkey」上で動作するスクリプトツールです。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
〔 Blog Table ⭐ 〕 ver. 1.5
// ==UserScript== // @name Blog Table ⭐ // @namespace http://tampermonkey.net/ // @version 1.5 // @description 編集画面上にtable表を作成する // @author Ameba Blog User // @match https://blog.ameba.jp/ucs/entry/srventry* // @exclude https://blog.ameba.jp/ucs/entry/srventrylist.do* // @grant none // ==/UserScript== let retry=0; let interval=setInterval(wait_target, 100); function wait_target(){ retry++; if(retry>10){ // リトライ制限 10回 1sec clearInterval(interval); } let target=document.getElementById('cke_1_contents'); // 監視 target if(target){ clearInterval(interval); main(); }} function main(){ let ua=0; // Chromeの場合のフラグ let agent=window.navigator.userAgent.toLowerCase(); if(agent.indexOf('firefox') > -1){ ua=1; } // Firefoxの場合のフラグ let task=0; // 作成・更新・終了 let posit_set; // 中央寄せ・左寄せ let table_position; let border_collapse; let add_padd; // td のpadding値 let table_border_width; let cell_border_width; let border_space; let left_full; // 左端背景色の優先 let read_json=localStorage.getItem('BlogTable'); // ローカルストレージ 保存名 let setting=JSON.parse(read_json); if(setting==null){ setting=['BlogTable','1','1','0','620','620','0.6','1',' tr:not(:first-child)', '#999','#F4F4F4','#F4F4F4','#FFF','16','0']; } let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); // ローカルストレージ 保存 let target=document.getElementById('cke_1_contents'); // 監視 target let monitor=new MutationObserver( catch_key ); monitor.observe(target, {childList: true, attributes: true}); // ショートカット待受け開始 catch_key(); function catch_key(){ let header_link=document.querySelector('.l-gHeaderLeft__link a'); if(header_link){ // 起動を「トップページ」アイコンに表示 📛 header_link.style.boxShadow='inset -14px 0 0 0 #79fbf6'; } if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; iframe_doc.addEventListener('keydown', check_key); document.addEventListener('keydown', check_key); function check_key(event){ let gate=-1; if(event.ctrlKey==true){ if(event.keyCode==112){ event.preventDefault(); gate=1; } if(gate==1){ event.stopImmediatePropagation(); do_task(); }}} function do_task(){ if(task==0){ task=1; table_panel(); make_table(); } else if(task==1){ task=2; renew_table(); } else if(task==2){ task=0; remove_t_panel(); remove_t_mark(); }}} before_end(); } // catch_key() function remove_t_panel(){ document.querySelector('#t_panel').remove(); } function table_panel(){ let panel=document.createElement('div'); panel.setAttribute('id', 't_panel'); panel.innerHTML= '<span class="t_label">構成</span>'+ '<div class="wnc"><input id="col" type="number" min="1"></div>'+ '<div class="wnr"><input id="row" type="number" min="1"></div>'+ '<span class="t_label">配置</span>'+ '<input id="wide" type="submit">'+ '<span class="t_label">表幅</span>'+ '<div class="wpx"><input id="t_width" type="number" min="10" max="1000"></div>'+ '<input id="t_width_m" type="submit" value="м">'+ '<input id="td_padd" type="submit">'+ '<span class="t_label">枠線</span>'+ '<div class="wpx"><input id="border_width" type="number" min="-9"></div>'+ '<input id="border_color" type="text" autocomplete="off">'+ '<span class="t_label">最上行背景色</span>'+ '<input id="header_back" type="text" autocomplete="off">'+ '<span class="t_label">左端列背景色</span>'+ '<input id="left_back" type="text" autocomplete="off">'+ '<input id="left_back_f" type="submit" value="▲">'+ '<span class="t_label">全体背景色</span>'+ '<input id="cell_back" type="text" autocomplete="off">'+ '<span class="t_label">文字</span>'+ '<div class="wpx"><input id="t_font" type="number" min="12" max="32"></div>'+ '<input id="copy" type="submit" value="C">'+ '<input id="set" type="submit" value="表作成">'+ '<span id="test"></span>'; let css= '#t_panel { position: fixed; top: 15px; left: calc(50% - 490px); width: 954px; '+ 'font-size: 14px; padding: 6px 12px; '+ 'border: 1px solid #ccc; border-radius: 4px; background: #eff5f6; z-index: 10; }'+ '#t_panel input { position: relative; margin-right: 10px; padding-top: 2px; '+ 'height: 27px; box-sizing: border-box; border: thin solid #aaa; } '+ '#t_panel input[type="number"] { padding-right: 2px; margin-right: 0; } '+ '#t_panel input[type="number"]:focus, #t_panel input[type="submit"]:focus '+ '{ box-shadow: none; }'+ '.t_label { margin: 0 3px 0 0; }'+ '#col, #row { width: 40px; text-align: center; }'+ '#wide { width: 30px; letter-spacing: -0.5em; text-indent: -6px; }'+ '#t_width { width: 54px; text-align: center; }'+ '#t_width_m { margin-left: -9px; width: 14px; }'+ '#td_padd { width: 30px; margin-left: 2px; }'+ '#border_width { width: 40px; text-align: center; }'+ '#left_back_f { margin-left: -9px; width: 14px; text-indent: -1px; }'+ '#t_font { width: 40px; text-align: center; }'+ '#wide, #t_width_m, #td_padd, #left_back_f { background: #fff; }'+ '.wpx, .wnr { position: relative; display: inline-block; margin-right: 10px; }'+ '.wnc { position: relative; display: inline-block; margin-right: 2px; }'+ '.wpx::after { content: "px"; position: absolute; right: 2px; top: 2px; padding: 3px 0 0; '+ 'width: 17px; background: #fff; }'+ '.wpx:hover::after { content: ""; }'+ '.wnc::after { content: "列"; position: absolute; right: 2px; top: 2px; padding: 3px 0 0; '+ 'width: 17px; background: #fff; }'+ '.wnr::after { content: "行"; position: absolute; right: 2px; top: 2px; padding: 3px 0 0; '+ 'width: 17px; background: #fff; }'+ '.wnc:hover::after, .wnr:hover::after { content: ""; }'+ '#border_color { margin-left: -9px; }'+ '#border_color, #header_back, #left_back, #cell_back { '+ 'width: 0; padding: 2px 16px 0 0; cursor: pointer; }'+ '#border_color:focus, #header_back:focus, #left_back:focus, #cell_back:focus { '+ 'width: 108px; margin-right: -80px; padding: 2px 16px 0 2px; z-index: 1; cursor: text; }'+ '#copy { margin: 0 0 0 6px !important; padding: 2px 4px 0; font-weight: bold; '+ 'color: #fff; background: #1976d2; display: none; }'+ '#set, #renew { margin: 0 !important; padding: 2px 4px 0; float: right; }'+ '#set:hover, #renew:hover, #copy:hover { outline: 1px solid #2196f3; }'+ '#set { background: #fd4; } #renew { background: #1976d2; color: #fff; }'+ '#test { display: none; }'+ '#cke_42 { top: 60px !important; left: calc( 50% - 45px) !important; }'; let style=document.createElement('style'); style.innerHTML=css; panel.appendChild(style); document.querySelector('.l-body').appendChild(panel); } // table_panel() function pick_color(){ let set_color; let color_input_selector; let color_label; let icon_button; if(ua==0){ color_label=document.querySelector('#cke_16_label'); icon_button=document.querySelector('#cke_17'); } else if(ua==1){ color_label=document.querySelector('#cke_15_label'); icon_button=document.querySelector('#cke_16'); } let target_p=color_label; // 監視 アイコンのカラーラベル let monitor_p=new MutationObserver(get_copy); let color_input=document.querySelectorAll('#t_panel input[type="text"]'); for(let k=0; k<color_input.length; k++){ input_color(k); } function input_color(k){ color_input[k].onclick=function(event){ if(event.ctrlKey==true){ event.preventDefault(); color_input_selector=k; color_input[k].style.outline='2px solid #2196f3'; // 対象カラーinputを表示 icon_button.click(); monitor_p.observe(target_p, {attributes: true}); }} // アイコンカラー取得開始 color_input[k].addEventListener('input', function(event){ event.preventDefault(); if(test_colorE(color_input[k].value)){ color_input[k].style.boxShadow='inset -17px 0 ' + color_input[k].value; if(task==1){ setting[k+9]=color_input[k].value; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }} // ローカルストレージ 保存 else{ if(color_input[k].value==''){ color_input[k].style.boxShadow='inset 0 0 0 1px black'; } else{ color_input[k].style.boxShadow='inset 0 0 0 1px black'; // 担保コード color_input[k].style.boxShadow= 'inset 0 0 0 1px black, inset -17px 0 ' + color_input[k].value; }}}); function test_colorE(color){ let test=document.querySelector('#test'); test.style.color='#000001'; if(color!=''){ test.style.color=color; } // 入力枠が空の場合はNG判定 let colorR=window.getComputedStyle(test).color; if(colorR){ if(colorR!='rgb(0, 0, 1)'){ return true; } else{ if(color=='rgb(0, 0, 1)' || color=='#000001' || color=='#000001ff'){ return true; } else{ return false; }}} else{ return false; }}} document.addEventListener('mousedown', function(){ if(color_input[color_input_selector]){ color_input[color_input_selector].style.outline='none'; } monitor_p.disconnect(); }); // アイコンカラー取得終了 if(document.querySelector('.cke_wysiwyg_frame') !=null){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; iframe_doc.addEventListener('mousedown', function(){ if(color_input[color_input_selector]){ color_input[color_input_selector].style.outline='none'; } monitor_p.disconnect(); }); } // アイコンカラー取得終了 function get_copy(){ set_color=color_label.getAttribute('data-color'); color_input[color_input_selector].value='#'+ set_color; color_input[color_input_selector].style.boxShadow= 'inset -17px 0 ' + color_input[color_input_selector].value; color_input[color_input_selector].style.outline="none"; if(task==1){ setting[color_input_selector+9]=color_input[color_input_selector].value; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); } // ローカルストレージ 保存 monitor_p.disconnect(); } // アイコンカラー取得終了 let target_body=document.querySelector('.l-body'); // 監視 target let monitor_generator=new MutationObserver(stealth); monitor_generator.observe(target_body, {childList: true, subtree: true}); function stealth(){ let color_generator=document.querySelector('.ck-l-colorGenerator'); if(color_generator){ color_generator.addEventListener('mousedown', function(event){ event.stopImmediatePropagation(); }); }} } // pick_color() function show_color(){ let color_input=document.querySelectorAll('#t_panel input[type="text"]'); for(let k=0; k<color_input.length; k++){ color_input[k].value=setting[k+9]; color_input[k].style.boxShadow='inset -17px 0 ' + color_input[k].value; }} function table_id(){ // 複数tableを生成時に異なるidを付ける if(document.querySelector('.cke_wysiwyg_frame') !=null){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; for(let k=0; k<100; k++){ let table_id='ambt'+k; if(iframe_doc.getElementById(table_id)==null){ return table_id; }}}} function table_position_set(){ let wide=document.querySelector('#wide'); // 中央配置・左寄せの設定 if(posit_set==0){ wide.value=' ▢ '; table_position='0 auto'; } else if(posit_set==1){ wide.value='▢ '; table_position='0 auto 0 0'; } wide.onclick=function(event){ event.preventDefault(); if(posit_set==0){ posit_set=1; wide.value='▢ '; table_position='0 auto 0 0'; } else if(posit_set==1){ posit_set=0; wide.value=' ▢ '; table_position='0 auto'; } if(task==1){ setting[3]=posit_set; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}} // ローカルストレージ 保存 function table_width_memo(){ let t_width=document.querySelector('#t_width'); // 表全幅の設定 let t_width_m=document.querySelector('#t_width_m'); // 表のデフォルト幅の登録 t_width_m.onclick=function(event){ if(event.ctrlKey==false){ event.preventDefault(); t_width.value=setting[5]; t_width_m.style.background='#00afff'; if(task==1){ setting[4]=setting[5]; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); } // ローカルストレージ 保存 setTimeout(()=>{ t_width_m.style.background='#fff'; t_width_m.style.transition='1s'; }, 2000); setTimeout(()=>{ t_width_m.style.transition='0s'; }, 3000); } else if(event.ctrlKey==true){ let yes=window.confirm(" 🔵 現在の「表幅」を「MEMO値」に登録します"); if(yes){ setting[5]=t_width.value; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}}} // ローカルストレージ 保存 function td_padding_set(){ let td_padd=document.querySelector('#td_padd'); // tdの横padding 有無の設定 if(add_padd==0){ td_padd.value='p0'; td_padd.style.boxShadow='none'; } else{ td_padd.value='p+'; td_padd.style.boxShadow='inset 6px 0 0 #cefed0, inset -6px 0 0 #cefed0'; } td_padd.onclick=function(event){ event.preventDefault(); if(add_padd==0){ add_padd=0.6; td_padd.value='p+'; td_padd.style.boxShadow='inset 6px 0 0 #cefed0, inset -6px 0 0 #cefed0'; } else{ add_padd=0; td_padd.value='p0'; td_padd.style.boxShadow='none'; } if(task==1){ setting[6]=add_padd; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}} // ローカルストレージ 保存 function table_border_set(){ let border_width=document.querySelector('#border_width'); // 枠線幅の設定 two_way(); border_width.addEventListener('input', function(event){ event.preventDefault(); two_way(); if(task==1){ setting[7]=border_width.value; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}); // ローカルストレージ 保存 function two_way(){ if(border_width.value>-1){ border_collapse='collapse'; table_border_width='0'; cell_border_width=border_width.value; border_space=0; } else if(border_width.value<0){ border_collapse='separate'; table_border_width='1'; cell_border_width=1; border_space=border_width.value*(-1); }}} function left_full_set(){ let left_back_full=document.querySelector('#left_back_f'); // 左端色を最上行まで設定 if(left_full==' tr:not(:first-child)'){ left_back_full.style.color='#aaa'; left_back_full.style.boxShadow='none'; } else{ left_back_full.style.color='red'; left_back_full.style.boxShadow='inset 0 5px red'; } left_back_full.onclick=function(event){ event.preventDefault(); if(left_full==' tr:not(:first-child)'){ left_full=' tr'; left_back_full.style.color='red'; left_back_full.style.boxShadow='inset 0 5px red'; } else{ left_full=' tr:not(:first-child)'; left_back_full.style.color='#aaa'; left_back_full.style.boxShadow='none'; } if(task==1){ setting[8]=left_full; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}} // ローカルストレージ 保存 function remove_t_mark(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; let amb_teble=iframe_doc.querySelectorAll('table[id^="ambt"]'); for(let k=0; k<amb_teble.length; k++){ amb_teble[k].parentNode.style.boxShadow='none'; }}} function make_table(){ let col=document.querySelector('#col'); // 列数の設定 let row=document.querySelector('#row'); // 行数の設定 let t_width=document.querySelector('#t_width'); // 表全幅の設定 let border_width=document.querySelector('#border_width'); // 枠線幅の設定 let border_color=document.querySelector('#border_color'); // 枠線色の設定 let header_back=document.querySelector('#header_back'); // 最上行背景色の設定 let left_back=document.querySelector('#left_back'); // 左端列背景色の設定 let cell_back=document.querySelector('#cell_back'); // 全体背景色の設定 let t_font=document.querySelector('#t_font'); // 文字サイズの設定 col.value=setting[1]; col.addEventListener('input', function(event){ event.preventDefault(); if(task==1){ setting[1]=col.value; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}); // ローカルストレージ 保存 row.value=setting[2]; row.addEventListener('input', function(event){ event.preventDefault(); if(task==1){ setting[2]=row.value; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}); // ローカルストレージ 保存 posit_set=setting[3]; table_position_set(); t_width.value=setting[4]; t_width.addEventListener('input', function(event){ event.preventDefault(); if(task==1){ setting[4]=t_width.value; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}); // ローカルストレージ 保存 table_width_memo(); add_padd=setting[6]; td_padding_set(); border_width.value=setting[7]; table_border_set(); left_full=setting[8]; left_full_set(); show_color(); // inputにストレージ値をセット pick_color(); t_font.value=setting[13]; t_font.addEventListener('input', function(event){ event.preventDefault(); if(task==1){ setting[13]=t_font.value; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}); // ローカルストレージ 保存 let set=document.querySelector('#set'); // 作成ボタン set.addEventListener('click', function(event){ set_table(); }); function set_table(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; let table=iframe_doc.createElement("table"); let rows=[]; for(let i=0; i<row.value; i++){ rows.push(table.insertRow(-1)); // 行の追加 for(let j=0; j<col.value; j++){ let cell=rows[i].insertCell(-1); cell.appendChild(document.createTextNode("")); }} // 列の追加 let this_id=table_id() table.setAttribute('id', this_id); let css= '#'+ this_id + ' { '+ 'width: '+ t_width.value +'px; '+ 'margin: '+ table_position +'; '+ 'border-collapse: '+ border_collapse +'; '+ 'border-spacing: '+ border_space +'px; '+ 'border: '+ table_border_width +'px solid '+ border_color.value +'; '+ 'font: normal '+ t_font.value +'px Meiryo; '+ 'background-color: '+ cell_back.value +'; } '+ '#'+ this_id +' tr:first-child { background-color: '+ header_back.value +'; } '+ '#'+ this_id + left_full +' td:first-child { background-color: '+ left_back.value +'; } '+ '#'+ this_id +' td { border: '+ cell_border_width +'px solid '+ border_color.value +'; padding: 0.2em '+ add_padd +'em 0; height: 1.5em; }'; let style=iframe_doc.createElement("style"); style.setAttribute('class', this_id); style.insertAdjacentHTML('afterbegin', css); let scroll_container=iframe_doc.createElement("div"); scroll_container.setAttribute('style', 'overflow-x: auto'); let selection=iframe_doc.getSelection(); let range=selection.getRangeAt(0); let ac_node=selection.anchorNode; ac_node.parentNode.insertBefore(scroll_container, ac_node); scroll_container.appendChild(style); scroll_container.appendChild(table); }} // set_table() } //make_table() function renew_table(){ let this_table; let this_col; // 更新前の列数 let this_row; // 更新前の行数 let col=document.querySelector('#col'); // 列数の設定 let row=document.querySelector('#row'); // 行数の設定 let t_width=document.querySelector('#t_width'); // 表全幅の設定 let border_width=document.querySelector('#border_width'); // 枠線幅の設定 let border_color=document.querySelector('#border_color'); // 枠線色の設定 let header_back=document.querySelector('#header_back'); // 最上行背景色の設定 let left_back=document.querySelector('#left_back'); // 左端行背景色の設定 let cell_back=document.querySelector('#cell_back'); // 全体背景色の設定 let t_font=document.querySelector('#t_font'); // 文字サイズの設定 let set=document.querySelector('#set'); // 作成ボタン set.remove(); let panel=document.querySelector('#t_panel'); let add_html='<input id="renew" type="submit" value="表更新">'; panel.insertAdjacentHTML('beforeend', add_html); let renew=document.querySelector('#renew'); let copy=document.querySelector('#copy'); // コピーボタン copy.style.display='inline-block'; let target_r=document.getElementById('cke_1_contents'); // 監視 target let monitor_r=new MutationObserver(inner); monitor_r.observe(target_r, {childList: true}); // ショートカット待受け開始 inner(); function inner(){ if(document.querySelector('.cke_wysiwyg_frame') !=null){ //「通常表示」から実行開始 let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); let iframe_doc=editor_iframe.contentWindow.document; let amb_teble=iframe_doc.querySelectorAll('table[id^="ambt"]'); for(let k=0; k<amb_teble.length; k++){ select_renew(k); copy_table(k); } function select_renew(k){ amb_teble[k].onclick=function(){ if(task==2){ this_table=k; let this_id=amb_teble[this_table].id let t_style=iframe_doc.getElementsByClassName(this_id)[0].textContent; remove_t_mark(); // 編集マークをリセットし表示する amb_teble[this_table].parentNode.style.boxShadow='-4px 0 #fff, -8px 0 #2196f3'; let t_tr=amb_teble[this_table].querySelectorAll('tr'); row.value=t_tr.length; let t_td=amb_teble[this_table].querySelectorAll('td'); col.value=t_td.length / t_tr.length; if(t_style.indexOf('margin: 0 auto 0 0')!=-1){ posit_set=1; } else { posit_set=0; } table_position_set(); t_width.value= t_style.match(/{ width: .*?px; margin/).toString().replace(/[^0-9]/g, ''); add_padd= t_style.match(/padding: 0.2em .*?em/).toString().slice(15).slice(0, -2); td_padding_set(); let t_border_width= t_style.match(/td { border.*?px/).toString().replace(/[^0-9]/g, ''); border_space= t_style.match(/border-spacing: .*?px/).toString().replace(/[^0-9]/g, ''); if(border_space!=0){ border_width.value=border_space*(-1); } if(border_space==0){ border_width.value=t_border_width; } table_border_set(); if(t_style.indexOf('tr:not(:first-child)')!=-1){ left_full=' tr:not(:first-child)'; } else{ left_full=' tr'; } left_full_set(); let t_border_color_g=t_style.match(/td { border.*?;/); let t_border_color; if(!t_border_color_g){ t_border_color='#999'; } else{ t_border_color=t_border_color_g.toString().match(/solid.*;/) .toString().replace(/solid /, '').toString().replace(/;/, ''); } border_color.value=t_border_color; border_color.style.boxShadow='inset -17px 0 ' + border_color.value; let t_header_back_g=t_style.match(/tr:first-child { background-color.*?;/); let t_header_back; if(!t_header_back_g){ t_header_back='#F4F4F4'; } else{ t_header_back=t_header_back_g.toString().match(/: .*;/) .toString().replace(/: /, '').toString().replace(/;/, ''); } header_back.value=t_header_back; header_back.style.boxShadow='inset -17px 0 ' + header_back.value; let t_left_back_g=t_style.match(/td:first-child { background-color.*?;/); let t_left_back; if(!t_left_back_g){ t_left_back='#F4F4F4'; } else{ t_left_back=t_left_back_g.toString().match(/: .*;/) .toString().replace(/: /, '').toString().replace(/;/, ''); } left_back.value=t_left_back; left_back.style.boxShadow='inset -17px 0 ' + left_back.value; let t_cell_back_g=t_style.match(/Meiryo; background-color.*?;/); let t_cell_back; if(!t_cell_back_g){ t_cell_back='#FFF'; } else{ t_cell_back=t_cell_back_g.toString().match(/: .*;/) .toString().replace(/: /, '').toString().replace(/;/, ''); } cell_back.value=t_cell_back; cell_back.style.boxShadow='inset -17px 0 ' + cell_back.value; let t_font_size_g=t_style.match(/normal .*?px Meiryo/); let t_font_size; if(!t_font_size_g){ t_font_size='16'; } else{ t_font_size=t_font_size_g.toString().replace(/[^0-9]/g, ''); } t_font.value=t_font_size; }} renew.onclick=function(){ let t_tr=amb_teble[this_table].querySelectorAll('tr'); this_row=t_tr.length; let t_td=amb_teble[this_table].querySelectorAll('td'); this_col=t_td.length / t_tr.length; let insert=[]; let com_ok=0; // 行列の削除許可 if(row.value<this_row||col.value<this_col){ com_ok=1; let ok=confirm( " 🔴 行数または列数を減らす表更新が指定されています。\n"+ " 行や列の削除で、中に記入したデータも削除されます。\n\n"+ " この削除を行ってもよいですか?"); if(ok){ com_ok=0; } else{ ; }} if(row.value>this_row){ for(let i=this_row; i<row.value; i++){ insert[i]=amb_teble[this_table].insertRow(-1); // 行の追加 for(let j=0; j<this_col; j++){ let cell=insert[i].insertCell(-1); cell.appendChild(document.createTextNode("")); }}} else if(row.value<this_row){ if(com_ok==0){ for(let i=this_row; i>row.value; i--){ insert[i]=amb_teble[this_table].deleteRow(-1); }}} // 行の削除 insert=amb_teble[this_table].querySelectorAll('tr'); for(let i=0; i<insert.length; i++){ if(col.value>this_col){ for(let j=this_col; j<col.value; j++){ let cell=insert[i].insertCell(-1); cell.appendChild(document.createTextNode("")); }} // 列の追加 else if(col.value<this_col){ if(com_ok==0){ for(let j=this_col; j>col.value; j--){ let cell=insert[i].deleteCell(-1); }}}} // 列の削除 let this_id=amb_teble[this_table].id let css= '#'+ this_id + ' { '+ 'width: '+ t_width.value +'px; '+ 'margin: '+ table_position +'; '+ 'border-collapse: '+ border_collapse +'; '+ 'border-spacing: '+ border_space +'px; '+ 'border: '+ table_border_width +'px solid '+ border_color.value +'; '+ 'font: normal '+ t_font.value +'px Meiryo; '+ 'background-color: '+ cell_back.value +'; } '+ '#'+ this_id +' tr:first-child { background-color: '+ header_back.value +'; } '+ '#'+ this_id + left_full +' td:first-child { background-color: '+ left_back.value +'; } '+ '#'+ this_id +' td { border: '+ cell_border_width +'px solid '+ border_color.value +'; padding: 0.2em '+ add_padd +'em 0; height: 1.5em; }'; let t_style_tag=iframe_doc.getElementsByClassName(this_id)[0]; if(t_style_tag){ t_style_tag.innerHTML=css; }} } // select_renew() function copy_table(k){ copy.onclick=function(){ if(task==2){ let yes=window.confirm(" 🔵 選択した表の「設定」を全てコピーします"); if(yes){ setting[1]=col.value; setting[2]=row.value; setting[3]=posit_set; setting[4]=t_width.value; setting[6]=add_padd; setting[7]=border_width.value; setting[8]=left_full; setting[9]=border_color.value; setting[10]=header_back.value; setting[11]=left_back.value; setting[12]=cell_back.value; setting[13]=t_font.value; let write_json=JSON.stringify(setting); localStorage.setItem('BlogTable', write_json); }}} // ローカルストレージ 保存 } // copy_table() }}} // renew_table() function before_end(){ let submitButton=document.querySelectorAll('.js-submitButton'); submitButton[0].addEventListener("click", all_clear, false); submitButton[1].addEventListener("click", all_clear, false); function all_clear(){ let editor_iframe=document.querySelector('.cke_wysiwyg_frame'); if(!editor_iframe){ //「HTML表示」編集画面の場合 alert("⛔ Blog Table が処理を終了していません\n\n"+ " 通常表示画面に戻り 編集を終了してください"); event.stopImmediatePropagation(); event.preventDefault(); } if(editor_iframe){ //「通常表示」編集画面の場合 remove_t_mark(); } // table表の編集マークを削除 }} // before_end( } // main()
「Blog Table ⭐」最新版について
●「Blog Table ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。