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

「通常編集」のカーソル位置の「HTML編集」を表示するツール「Both-WH For Excite」(2)

2023年 07月 12日

HTML編集の支援ツール 


「通常編集」でブログ編集をしていて、ある箇所の「HTML編集」が必要になった時、「HTML編集」に切換えて問題の箇所を探す必要があります。「HTML編集」に慣れたユーザーでも、問題の箇所を見つけにくかったり、時には箇所を勘違いする事もあります。 この場所探しをしてくれるのが「Both-WH For Excite」です。

使い方は簡単です。「通常編集」枠内の問題箇所にキャレットを入れて「Ctrl + F8」を押すと、「HTML編集」が開き、問題箇所のHTMLコードの位置にキャレットが表示されます。

また、「HTML編集」の処理が終れば、もう一度「Ctrl + F8」を押すと「通常編集」に戻れます。 この際、以前に離れた「通常編集」のスクロール位置と同じ場所が表示されます。

この様に、「HTML編集」の編集箇所を案内してくれるので、HTML編集がとてもはかどります。

「通常編集」のカーソル位置の「HTML編集」を表示するツール「Both-WH For Excite」(2)_a0349576_18402522.png




更新点 


これまでのコードは、「HTML編集」へ移動直後にキャレット位置を編集枠内に表示出来ない問題がありました。 今回、以下のコードの追加で、この問題が改善できました。

 「Both-WH For Excite」 ver. 0.2 80行~ 
function f5(){
setTimeout(()=>{
editor[ed].blur();
editor[ed].focus();
}, 200); }

HTML編集枠の「editor[ed]」から、一度フォーカスを外して、もう一度フォーカスするという、まじないの様なコードですが、これでHTML編集枠にキャレットの場所を表示させる事が出来ました。



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


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

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

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

このツールは、エキサイト新編集画面の専用ツールです。 


〔 Both-WH For Excite 〕ver. 0.2

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


let editor_in; //「通常編集枠」「HTML編集」「More通常編集枠」「MoreHTML編集」のフラグ
let editor=document .querySelectorAll('.exblog-ui-editor');
let selection;
let range;
let insert_node;

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


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

catch_key();

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('li[data-mode="plain"]');
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(){
source=editor[ed].value; }
function f2(){
index=source.indexOf('<i id="i">​</i>'); }
function f3(){
if(index !=-1){
setTimeout(()=>{
editor[ed].value=source.replace('<i id="i">​</i>', '');
}, 100); }} // 100以上は必要 ※f3 ⭕
function f4(){
setTimeout(()=>{
editor[ed].setSelectionRange(index, index);
}, 120); } // ※f3より大きく ⭕
function f5(){
setTimeout(()=>{
editor[ed].blur();
editor[ed].focus();
}, 200); } // ※f4より大きく⭕

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

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


else{ //「HTML編集」から実行開始
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('li[data-mode="visual"]');
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 | 2023-07-12 20:43 | JavaScript