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

旧編集画面に対応した「Both-WH For Excite Origin」

2020年 01月 05日

 旧編集画面に対応した移植版


「Both-WH For Excite Origin」は「Both-WH For Excite」を旧編集画面で使用できる様に移植したものです。

「通常編集」で編集時、本文のある箇所の「HTML編集」をする必要が生じた場合に、「HTML編集」を開いて、問題の箇所のHTMLコードを探さねばなりません。 このツールは、「通常編集」のカーソル位置で「Ctrl + F8」を押すと、「HTML編集」を開いてそのHTMLコードの位置にカーソルを入れます。 そしてHTML編集が終了して「Ctrl + F8」を押すと、「通常編集」に戻って元のスクロール位置を表示します。

Chrome の場合は、「HTML編集」移動直後にカーソルが見えない位置になる事があります。 この場合は「⇦」「⇨」等の方向キーを1回押すと、カーソル位置へスクロールが行われて表示されます。 Firefoxはこの操作は不要で、常にカーソルが見える範囲が表示されます。



スクリプト起動に関する問題 


「Both-WH For Excite Origin」は、起動に関わる部分で少し特殊なコードを用いています。

let target=document .querySelector('#_entryContent'); // 監視 target
let monitor=new MutationObserver(catch_key);
monitor.observe(target, {childList: true, attributes: true, subtree: true}); // ショートカット待受け開始

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

function catch_key(){ // ~~~ 主要コード ~~~

最初の3行は、MutationObserver を使って「catch_key()」を起動させています。 また、その後の2行では addEventListener を使って「catch_key()」を起動させています。 この様にしないとショートカットに反応しなくなり、いわば力業で無理やり起動のきっかけを作っています。 なお、「Both-WH For Excite」の方はこの様なことから免れています。



 「Both-WH For Excite Origin」ver. 0.1 の導入手順


このツールは、Exciteの従来の編集画面用の専用ツールです。 使用する時の要領は、編集枠内にカーソルがある時に「Ctrl + F8」が有効な事、「HTML編集」に移動時にカーソルが見えなければ、方向キーを押す事、という位です。

Chromeでは、スクロールの仕様で「HTML編集」移動直後にカーソル位置が表示されない場合があります。 移動直後にカーソルが見えない時、方向キーを1回押してください。 Firefoxでは、移動直後に常に編集枠内にカーソルが表示されます。

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

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

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


〔 Both-WH For Excite Origin 〕ver. 0.1

// ==UserScript==
// @name Both-WH For Excite Origin
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 「通常編集」「HTML編集」のカーソル位置を「Ctrl+F8」で往復する(旧エディター用)
// @author Excite Blog User
// @match https://userconf.exblog.jp/entry/*
// @grant none
// ==/UserScript==


window.addEventListener('load', function(){

let editor_in; //「通常編集枠」「HTML編集」「More通常編集枠」「MoreHTML編集」のフラグ
let editor=[];
editor[0]=document .querySelector('#_entryContent');
editor[1]=document .querySelector('#entryContent');
editor[2]=document .querySelector('#_moreEntryContent');
editor[3]=document .querySelector('#moreEntryContent');

let selection=document .getSelection();
let range;
let insert_node;

let native_line; // 通常表示のスクロール位置

let target=document .querySelector('#_entryContent'); // 監視 target
let monitor=new MutationObserver(catch_key);
monitor.observe(target, {childList: true, attributes: true, subtree: true}); // ショートカット待受け開始

catch_key();

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


function catch_key(){
if(editor[0]==document .activeElement){
editor_in=0; }
else if(editor[1]==document .activeElement){
editor_in=1; }
else if(editor[2]==document .activeElement){
editor_in=2; }
else if(editor[3]==document .activeElement){
editor_in=3; }

if(editor_in==0 || editor_in==2){ //「通常編集」から実行開始
editor[editor_in].addEventListener('keydown', check_key);

function check_key(event){
if(event.which==17 || event.ctrlKey==true){
if(event.which==119 || event.keyCode==119){
event.stopImmediatePropagation();
event.preventDefault();
set_mark(); }}} //「Ctrl+F8」

function set_mark(){
selection=document .getSelection();
range=selection.getRangeAt(0);
insert_node=document .createElement("i"); // iタグ 空タグ
insert_node.appendChild(document .createTextNode("\u200B"));
insert_node.setAttribute("id", "i");
range.insertNode(insert_node); // カーソル位置にマークタグを書き込む

native_line=editor[editor_in].scrollTop; // 通常表示のスクロール位置を記録

setTimeout(()=>{
let html_button=document .querySelector('#tab_html');
html_button.click(in_html(editor_in +1)); // HTML表示に移動 🟦
}, 200); // 安定動作に必要 ⭕

function in_html(ed){
let source;
let index;
let promise=new Promise(function(){ ; });

function f1(){
setTimeout(()=>{
source=editor[ed].value;
}, 20); } // 必要 ⭕
function f2(){
setTimeout(()=>{
index=source.indexOf('<i id="i">​</i>');
}, 40); } // 必要 ⭕
function f3(){
if(index !=-1){
setTimeout(()=>{
editor[ed].value=source.replace('<i id="i">​</i>', '');
}, 200); }} // 100以上は必要 ※f3 ⭕
function f4(){
setTimeout(()=>{
editor[ed].focus();
editor[ed].setSelectionRange(index, index);
}, 220); } // ※f3よりは大きく ⭕

Promise.all([ f1(), f2(), f3(), f4() ]);

} // in_html()
}} //「通常編集」から実行開始


else{ //「HTML編集」から実行開始
if(editor[editor_in]){
editor[editor_in].addEventListener('keydown', check_key_h);

function check_key_h(event){
if(event.which==17 || event.ctrlKey==true){
if(event.which==119 || event.keyCode==119){
event.stopImmediatePropagation();
event.preventDefault();
to_native_line(); }}} //「Ctrl+F8」

function to_native_line(){
let wysiwyg_button=document .querySelector('#tab_wysiwyg');
wysiwyg_button.click(in_wysiwyg(editor_in -1)); // 通常表示に移動 🟦

function in_wysiwyg(ed){
setTimeout(()=>{
editor[ed].scrollTop=native_line; // 通常表示の元のスクロール位置に移動
editor[ed].blur();
}, 200); }} // 安定動作に必要 ⭕
}} //「HTML編集」から実行開始

} //catch_key()

})



# by Ataron2 | 2020-01-05 15:19 | JavaScript