人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

「Elements Palette for Excite Origin」にメニュー表示を追加しました

2020年 01月 04日

 「Palette」機能のメニュー表示


「Elements Palette for Excite Origin」は、従来の編集画面で動作する様に「Elements Palette for Excite」のコードを書換えたものです。 動作の仕様・内容は全く同じですから、詳細については前ページや、このブログ内を「Elements Palette for Excite」で検索して調べてください。

ver. 2.2 の更新内容は、以下です。

◎「Shift + F12」のショートカットでメニュー表示
◎ 見出しの自動書込みを「F3」「F4」から「F2」「F3」に変更



  「Elements Palette for Excite Origin」ver. 2.2 の導入手順


❶ このスクリプトツールは、Chrome版と Firefox版の「Tampermonkey」上で動作を確認していますが、他のブラウザでも動作する可能性があります。 もし「Tampermonkey」をインストールしていない場合は、前もって導入が必要です。 導入の手順や簡単な扱い方については以下のページを参照ください。

拡張機能「Tampermonkey」の基本設定と使用方法 

❷ ブラウザ拡張機能「Tampermonkey」の新規作成の編集画面に、以下のスクリプトコードをコピー&ペーストして登録する事で「Both-WH For Excite」を使用する事が出来ます。


〔 Elements Palette for Excite Origin 〕ver. 2.2

// ==UserScript==
// @name Elements Palette for Excite Origin
// @namespace http://tampermonkey.net/
// @version 2.2
// @description 編集枠に各種要素を自動記入するツール(旧エディター用)
// @author Excite Blog User
// @match https://userconf.exblog.jp/entry/*
// @grant none
// ==/UserScript==


window.addEventListener('load', function(){
let editor_in; //「通常編集枠」「More編集枠」のフラグ
let editor=document .querySelectorAll('div[contenteditable="true"]');
let selection=document .getSelection();
let range;
let insert_node;
let ac_node;

document .addEventListener('selectionchange', function(){
catch_key(); },false);

function catch_key(){
ac_node=selection.anchorNode;
if(editor[0].contains(ac_node)){
editor_in=0; }
else if(editor[1].contains(ac_node)){
editor_in=1; }

if(editor_in==0 || editor_in==1){ //「通常編集」でショートカット動作
editor[editor_in].addEventListener('keydown', check_key);

let gate;
function check_key(event){
let send=-1;
if(event.shiftKey==true){ gate=1; }

if(event.keyCode==112){
if(gate==1){ event.preventDefault(); send=112; }}
if(event.keyCode==113){
if(gate==1){ event.preventDefault(); send=113; }}
if(event.keyCode==114){
if(gate==1){ event.preventDefault(); send=114; }}
if(event.keyCode==115){
if(gate==1){ event.preventDefault(); send=115; }}
if(event.keyCode==116){
if(gate==1){ event.preventDefault(); send=116; }}
if(event.keyCode==117){
if(gate==1){ event.preventDefault(); send=117; }}
if(event.keyCode==118){
if(gate==1){ event.preventDefault(); send=118; }}
if(event.keyCode==119) {
if(gate==1){ event.preventDefault(); send=119; }}
if(event.keyCode==120){
if(gate==1){ event.preventDefault(); send=120; }}
if(event.keyCode==121){
if(gate==1){ event.preventDefault(); send=121; }}
if(event.keyCode==122){
if(gate==1){ event.preventDefault(); send=122; }}
if(event.keyCode==123){
if(gate==1){ event.preventDefault(); send=123; }}

if(event.shiftKey!=true){ gate=-1; }
if(send !=-1){
event.stopImmediatePropagation();
set_mark(send, editor_in); }
} // check_key
}} // catch_key


function set_mark(sender, editor_in){
range=selection.getRangeAt(0);
ac_node=selection.anchorNode;


if(sender==112){ //「Shift + F1」 FontAwesomeアイコンの自動記入
let insert_node_z;

insert_node=document .createElement('i');
insert_node.appendChild(document .createTextNode('\u00A0'));
insert_node.setAttribute('class', 'fa fa-external-link');
insert_node.setAttribute('style', 'margin-left: .5em');
range.insertNode(insert_node);

insert_node_z=document .createTextNode('\u200A');
insert_node.parentNode.insertBefore(insert_node_z, insert_node.nextSibling);
range.setEnd(insert_node_z.nextSibling, 0);
range.collapse(); // フォーカスを失わないでrangeを閉じる
}


if(sender==113){ // F2 h2 見出しの自動記入
let style_text='background: #b0e0e6; padding: .32em 1em .2em'; // h2のデザイン
let font_size='font-size: 1em'; // h2のフォントサイズ
let insert_node_h;

insert_node_h=document .createElement('h2');
insert_node_h.setAttribute('style', font_size);
insert_node_h.appendChild(document .createElement('span'));
insert_node_h.lastChild.setAttribute('style', style_text);
insert_node_h.lastChild.appendChild(document .createTextNode('\u200A'));

if(ac_node==editor[editor_in]){
range.insertNode(insert_node_h); }
else if(ac_node.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_h, ac_node); }
else if(ac_node.parentNode.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_h, ac_node.parentNode); }

if(insert_node_h.previousSibling !=null){ // h2要素が文頭でなければ
insert_node_h.insertAdjacentHTML('beforebegin', '<br>');} // h2要素の直前に brを追加
if(insert_node_h.nextSibling.tagName !='BR'){ // h2要素の直後に brがなければ
insert_node_h.insertAdjacentHTML('afterend', '<br>');} // h2要素の直後に brを追加
range.setEnd(insert_node_h.lastChild, 0); // 生成した h2要素にカーソル移動

if(insert_node_h.previousSibling !=null){ // h2要素が文頭でなければ
editor[editor_in].scrollBy(0, 24); } // 文末処理
}


if(sender==114){ // F3 h3 見出しの自動記入
let style_text='background: #ddd; padding: .32em 1em .2em'; // h3のデザイン
let font_size='font-size: 1em'; // h3のフォントサイズ
let insert_node_h;

insert_node_h=document .createElement('h3');
insert_node_h.setAttribute('style', font_size);
insert_node_h.appendChild(document .createElement('span'));
insert_node_h.lastChild.setAttribute('style', style_text);
insert_node_h.lastChild.appendChild(document .createTextNode('\u200A'));

if(ac_node==editor[editor_in]){
range.insertNode(insert_node_h); }
else if(ac_node.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_h, ac_node); }
else if(ac_node.parentNode.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_h, ac_node.parentNode); }

if(insert_node_h.previousSibling !=null){ // h3要素が文頭でなければ
insert_node_h.insertAdjacentHTML('beforebegin', '<br>');} // h3要素の直前に brを追加
if(insert_node_h.nextSibling.tagName !='BR'){ // h3要素の直後に brがなければ
insert_node_h.insertAdjacentHTML('afterend', '<br>');} // h3要素の直後に brを追加
range.setEnd(insert_node_h.lastChild, 0); // 生成した h3要素にカーソル移動

if(insert_node_h.previousSibling !=null){ // h3要素が文頭でなければ
editor[editor_in].scrollBy(0, 24); } // 文末処理
}


if(sender==115){ //「Shift + F4」 修飾線の自動記入
// 文字アンダーライン・マーカー線のデザイン(ブルー下線)
let style_text=
'linear-gradient(transparent 1.22em, #27d 0, #27d calc(1.22em + 2px), transparent 0)';

insert_node=document .createElement('span');
insert_node.style.background=style_text;

try{
range.surroundContents(insert_node); }
catch(e){;}
}


if(sender==116){ //「Shift + F5」 修飾線の自動記入
// 文字アンダーライン・マーカー線のデザイン(グリーン蛍光マーカー)
let style_text='linear-gradient(transparent 0.7em, rgba(0, 255, 0, 0.3) 0, rgba(0, 255, 0, 0.3) '+
'calc(0.7em + 10px), transparent 0)';

insert_node=document .createElement('span');
insert_node.style.background=style_text;

try{
range.surroundContents(insert_node); }
catch(e){;}
}


if(sender==117){ //「Shift + F6」 囲み枠の自動生成(青枠)
// 囲み枠のデザイン
let style_text='background: #f1fbfb; border: 1px solid #27d; border-radius: 6px; '+
'padding: .62em 2em .5em; max-width: 660px; margin: 0 auto;';

let insert_node_d;
insert_node_d=document .createElement('div');
insert_node_d.setAttribute('style', style_text);
insert_node_d.appendChild(document .createElement('br'));

if(ac_node==editor[editor_in]){
range.insertNode(insert_node_d); }
else if(ac_node.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_d, ac_node); }
else if(ac_node.parentNode.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_d, ac_node.parentNode); }

if(insert_node_d.nextSibling.tagName !='BR'){ // 次が brの場合
if(insert_node_d.nextSibling.firstChild.tagName !='BR'){ // 次が brのみの divの場合
insert_node_d.insertAdjacentHTML('afterend', '<br>'); }} // div要素の後に brを追加
if(insert_node_d.previousSibling.tagName !='BR'){ // 手前が brの場合
if(insert_node_d.previousSibling.firstChild.tagName !='BR'){ // 手前が brのみの divの場合
insert_node_d.insertAdjacentHTML('beforebegin', '<br>'); }} // div要素の手前に brを追加
range.setEnd(insert_node_d.lastChild, 0); // 生成した div要素にカーソル移動

editor[editor_in].scrollBy(0, 44) ; // 文末処理
}


if(sender==118){ //「Shift + F7」 囲み枠の自動生成(赤2重枠)
// 囲み枠のデザイン
let style_text='background: #fafafa; border: 3px double #f00; border-radius: 6px; '+
'padding: .62em 2em .5em; max-width: 660px; margin: 0 auto;';
let insert_node_d;

insert_node_d=document .createElement('div');
insert_node_d.setAttribute('style', style_text);
insert_node_d.appendChild(document .createElement('br'));

if(ac_node==editor[editor_in]){
range.insertNode(insert_node_d); }
else if(ac_node.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_d, ac_node); }
else if(ac_node.parentNode.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_d, ac_node.parentNode); }

if(insert_node_d.nextSibling.tagName !='BR'){ // 次が brの場合
if(insert_node_d.nextSibling.firstChild.tagName !='BR'){ // 次が brのみの divの場合
insert_node_d.insertAdjacentHTML('afterend', '<br>'); }} // div要素の後に brを追加
if(insert_node_d.previousSibling.tagName !='BR'){ // 手前が brの場合
if(insert_node_d.previousSibling.firstChild.tagName !='BR'){ // 手前が brのみの divの場合
insert_node_d.insertAdjacentHTML('beforebegin', '<br>'); }} // div要素の手前に brを追加
range.setEnd(insert_node_d.lastChild, 0); // 生成した div要素にカーソル移動

editor[editor_in].scrollBy(0, 44) ; // 文末処理
}


if(sender==119){ //「Shift + F8」 コード表示枠の自動生成
// PRE枠のデザイン(縦スクロールしないタイプ)
let style_text_div='max-width: 720px; overflow-y: hidden; margin: 0 auto; '+
'background: #fafafa; border: 1px solid #aaa;';
let style_text_pre='white-space: pre; display: inline-block; padding: 1em 2em;';
let insert_node_d;

insert_node_d=document .createElement('div');
insert_node_d.setAttribute('style', style_text_div);
insert_node_d.appendChild(document .createElement('pre'));
insert_node_d.lastChild.setAttribute('style', style_text_pre);
insert_node_d.lastChild.appendChild(document .createElement('br'));

if(ac_node==editor[editor_in]){
range.insertNode(insert_node_d); }
else if(ac_node.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_d, ac_node); }
else if(ac_node.parentNode.parentNode==editor[editor_in]){
editor[editor_in].insertBefore(insert_node_d, ac_node.parentNode); }

if(insert_node_d.nextSibling.tagName !='BR'){ // 次が brの場合
if(insert_node_d.nextSibling.firstChild.tagName !='BR'){ // 次が brのみの divの場合
insert_node_d.insertAdjacentHTML('afterend', '<br>'); }} // div要素の後に brを追加
if(insert_node_d.previousSibling.tagName !='BR'){ // 手前が brの場合
if(insert_node_d.previousSibling.firstChild.tagName !='BR'){ // 手前が brのみの divの場合
insert_node_d.insertAdjacentHTML('beforebegin', '<br>'); }} // div要素の手前に brを追加
range.setEnd(insert_node_d.lastChild, 0); // 生成した div要素にカーソル移動

editor[editor_in].scrollBy(0, 60) ; // 文末処理
}


if(sender==120){ //「Shift + F9」 文書末尾に空白行を追加
let insert_node_d;

insert_node_d=document .createElement('div');
insert_node_d.appendChild(document .createElement('br'));
editor[editor_in].appendChild(insert_node_d);

range.setEnd(insert_node_d.lastChild, 0); // 追加した空白行にrange終点を移動
range.collapse(); // rangeを始点で閉じる
editor[editor_in].scrollTop=editor[editor_in].scrollHeight; // スクロールして文書末尾を表示
}


if(sender==121){ //「Shift + F10」 中央寄せツール
let css='.cm_block { position: relative; outline: solid 1px #03a9f4; } '+
'.cm_block:after { content: "🔻"; cursor: ew-resize; position: absolute; z-index: 0; '+
'top: 0; left: calc(50% - .5em);';
let style=document .createElement('style');
style.insertAdjacentHTML('afterbegin', css);
style.setAttribute('class', 'cm');
let editor_base=document .querySelector('#entryEditContents');
if(!editor_base.querySelector('.cm')){
editor_base.appendChild(style); }

let block=editor[editor_in].querySelectorAll('div');
let c_m=[];
c_m[editor_in]=editor[editor_in].querySelectorAll('.cm_block');

if(c_m[editor_in].length==0){
for(let k=0; k<block.length; k++){
if(block[k].parentNode==editor[editor_in] &&
!(block[k].firstChild.tagName=='BR' && block[k].childNodes.length==1)){
block[k].setAttribute('class', 'cm_block');
block[k].addEventListener('mousedown', function(event){
select_block(k, event);
}, false); }}}
else{
for(let k=0; k<block.length; k++){
if(block[k].className=='cm_block'){
block[k].classList.remove('cm_block'); }}}

function select_block(k, event){
c_m[editor_in]=editor[editor_in].querySelectorAll('.cm_block');
if(c_m[editor_in].length !=0){
event.preventDefault();
event.stopImmediatePropagation();
if(block[k].getAttribute('align')=='center'){
let ok=confirm(" ❎  変換前に戻しますか?");
if(ok){
block[k].removeAttribute("align"); }}
else{
block[k].setAttribute('align', 'center'); }}}

document .addEventListener('selectionchange', function(){
change_mode(); },false);

function change_mode(){
ac_node=selection.anchorNode;
if(editor[0].contains(ac_node)){
editor_in=0; }
else if(editor[1].contains(ac_node)){
editor_in=1; }

block=editor[editor_in].querySelectorAll('div');
c_m[editor_in]==editor[editor_in].querySelectorAll('.cm_block');
if(c_m[editor_in].length!=0){
for(let k=0; k<block.length; k++){
if(block[k].className=='cm_block'){
block[k].addEventListener('mousedown', function(event){
select_block(k, event);
}, false); }}}

function select_block(k, event){
c_m[editor_in]=editor[editor_in].querySelectorAll('.cm_block');
if(c_m[editor_in].length !=0){
event.preventDefault();
event.stopImmediatePropagation();
if(block[k].getAttribute('align')=='center'){
let ok=confirm(" ❎  変換前に戻しますか?");
if(ok){
block[k].removeAttribute("align"); }}
else{
block[k].setAttribute('align', 'center'); }}}}

document .addEventListener('selectionchange', function(){
clear_off(); },false);

function clear_off(){
let out_button0=document .querySelector('#edit');
let out_button1=document .querySelector('#draft');
let cm_0;
let cm_1;

if(out_button0){
out_button0.addEventListener('click', function(event){
cm_0=editor[0].querySelectorAll('.cm_block');
cm_1=editor[1].querySelectorAll('.cm_block');
if(cm_0.length + cm_1.length !=0){
event.preventDefault();
event.stopImmediatePropagation();
if(editor[0].style.display !='none'){
clear(); }
else if(editor[0].style.display=='none'){
let ok=confirm(" ⛔ 通常編集で終了してください"); }}}, false); }
if(out_button1){
out_button1.addEventListener('click', function(event){
cm_0=editor[0].querySelectorAll('.cm_block');
cm_1=editor[1].querySelectorAll('.cm_block');
if(cm_0.length + cm_1.length !=0){
event.preventDefault();
event.stopImmediatePropagation();
if(editor[0].style.display !='none'){
clear(); }
else if(editor[0].style.display=='none'){
let ok=confirm(" ⛔ 通常編集で終了してください"); }}}, false); }

function clear(){
cm_0=editor[0].querySelectorAll('.cm_block');
if(cm_0.length !=0){
for(let k=0; k<cm_0.length; k++){
cm_0[k].classList.remove('cm_block'); }}
cm_1=editor[1].querySelectorAll('.cm_block');
if(cm_1.length !=0){
for(let k=0; k<cm_1.length; k++){
cm_1[k].classList.remove('cm_block'); }}}}
}


if(sender==122){ //「Shift + F11」 「カギ括弧」⇄「半角カギ括弧」の変換
// '「' (\uFF62) '」' (\uFF63) の文字へ置換え
let r_text=range.toString();

if(r_text.match( /「|」/ ) !=null){
r_text=r_text.replace(/「/g, '\u2006「').replace(/」/g, '」\u2006');
let insert_node=document .createTextNode(r_text);
try{
range.surroundContents(insert_node); }
catch(e){;}}
else{
if(r_text.match( /\u2006「|」\u2006|「|」/ ) !=null){
r_text=r_text.replace(/\u2006「/g, '「').replace(/」\u2006/g, '」').replace(/」/g, '」').replace(/「/g, '「');
let insert_node=document .createTextNode(r_text);
try{
range.surroundContents(insert_node); }
catch(e){;}}}
}


if(sender==123){ // F12 「Elements Palette」のメニュー表示
// 表示パネルのデザイン
let style_text='position: absolute; top: 90px; right: 20px; z-index: 15; '+
'font-size: 16px; padding: 1em; border: 1px solid #009688; border-radius: 4px; '+
'background: #f9fafa; box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.3);';

let menu=document .createElement('div');
menu.setAttribute('style', style_text);
menu.setAttribute('class', "ep_menu");
// パネルの表示内容
menu.innerHTML=
'  〔 Elements Palette Menu 〕<br>'+
'Shift + F1  FontAwesome アイコン<br>'+
'Shift + F2  h2 見出し<br>'+
'Shift + F3  h3 見出し<br>'+
'Shift + F4  アンダーライン(ブルー下線)<br>'+
'Shift + F5  マーカー(グリーン蛍光マーカー)<br>'+
'Shift + F6  囲み枠(青枠)<br>'+
'Shift + F7  囲み枠(赤2重線枠)<br>'+
'Shift + F8  PRE枠(スクロールしないタイプ)<br>'+
'Shift + F9  文書末尾に空白行を追加<br>'+
'Shift + F10  中央寄せツール<br>'+
'Shift + F11 「カギ括弧」全角 ⇄ 半角 変換<br>'+
'Shift + F12 「Elements Palette」メニュー';

if(!document .querySelector('.ep_menu')){
document .querySelector('body.win').appendChild(menu); }
else{
document .querySelector('.ep_menu').remove(); }
}

} // set_mark
})





# by Ataron2 | 2020-01-04 20:17 | JavaScript