リンクカードの編集ツール「LinkCard Editor ⭐」（49） / JavaScript

カードのテキスト編集機能を強化 

「LinkCard Editor」は、アメーバ編集画面の機能で生成される「リンクカード」を編集するツールです。

デフォルトのカードはHTML編集でアレンジは可能ですが、とても大変です。 このツールは「通常表示」でカードのテキスト部を編集が可能で、更にカードのカバー画像を編集画面の画像添付を利用して、自由に設定できます。 そして、カードのリンク自体も変更出来るので、通常はリンクカードが作れないリンク先をカードに出来ます。

強力なリンクカード編集機能ですが、操作はそう複雑ではありません。 リンクカードを何倍もレベルアップできるので、ページの質にこだわるユーザーにお勧めです。

テキスト編集機能の弱点 

下は、カードのタイトル部のテキストを編集しているところですが、「New」という文字をタイトルにペーストしたいとします。

しかし、キャレットを入れて通常の「Ctrl+V」を使うと、下の様になります。

結果は、貼り付けた「New」の文字列が、カードを2個に分裂させます。

これは、編集画面のHTML生成機能が関係します。 文字列の間に（span要素の中）に、他の要素（span要素やp要素 etc）を介在させる際に、結果をHTMLで安全に纏めるために、元の span要素を分解して、間に他の要素をサンドします。 こちらは、文字列を間に文字列を入れるだけのつもりが、HTMLはそう簡単ではないのです。

この場合、「Ctrl+Shift+V」（Shiftキーを押しながらコピー）を使うと、分裂させずに、思い通りの結果になります。（Chrome Edge は可能ですが Firefoxはそれでも分裂します）

この問題は「LinkCard Editor」の最も弱い部分で、当初から工夫して問題を軽減して来ましたが、ペースト操作だけは不完全なまま、ユーザーの操作に頼っていました。

プロテクトコード 

色々試したのですが、編集時にキー入力を判定して、「Ctrl+V」の場合は入力を編集画面に届けずに、「Ctrl+Shift+V」を使う様にアラート表示をすることにしました。 これで、使い慣れないユーザーがカードを分裂させる事はなくせます。

この対策コードは以下です。

「LinkCard Editor」ver.4.6   238行

function edit_span(elem, n){
    elem.setAttribute('contenteditable', 'true');
    elem.style.zIndex='1';
    elem.style.outline='2px solid #2196f3';
    elem.style.outlineOffset='3px';

    elem.addEventListener('keydown', (e)=>{
        if(e.ctrlKey && e.keyCode=='86'){
            if(ua==1){
                e.preventDefault();
                e.stopImmediatePropagation();
                alert("カードテキストに貼付け操作はできません"); }
            else {
                if(!e.shiftKey){
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    alert("「Ctrl+Shift+V」で貼付けてください"); }}}
    }); }

後半部が、この判定コードです。「ua==1」は Firefox の場合の分岐で、どの様なペーストでも分裂が生じるので、その故を表示します。 更に、他のブラウザで「Shift」押下が無い場合は、「Ctrl+Shft+V」を押す様に勧めます。

どちらの場合も「e.preventDefault()」「e.stopImmediatePropagation()」で、操作は編集画面に届かずペーストは実行されません。

ひどく原始的な方法ですが、好結果でした。 それまで「paste」操作をトリガーにするコードを試しましたが、その操作時に「Shift」押下を判定できません。「paste」内容をプレーンテキストに改めて渡す方法は上手く行かず断念し、このコードに行き着いたのです。

● ペーストは、機能的には以前と同じです。「Ctrl+Shift+V」でプレーンテキストの貼付けが可能です。 コンテキストメニューの「貼付け」はやはり分裂になります。

他に、テキスト編集のコードを見なおして、編集状態から抜けやすくしました。 テキスト部の編集が、従来より扱い易くなったと思います。

「LinkCard Editor ⭐」を利用するには 

アメーバの文字数制限でコードを投稿できないので、「LinkCard Editor ⭐」のコードは「GitHub」で配布しています。 以下は最新版です。

LinkCard_Editor/LinkCard_Editor_4.6 at main · personwritep/LinkCard_Editor

このリンク先は下の様な画面で、ここでコードのコピーが可能です。

❶ 赤枠のところに、コピー用のボタンがあります。 これをクリックします。

　これで、ページ上のコードがクリップボードにコピーされます。

❷「Tampermonkey」の管理画面で「＋」マークの「新規スクリプト」を開きます。

❸「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠にしてください。

❹ 編集枠内をクリックして「Ctrl+V」を押すか、右クリックして「貼り付け」を選択します。

➎ コードの先頭までスクロールして、最初の行から正しく貼り付けられたかを確認してください。

❻ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

「LinkCard Editor ⭐」のマニュアル 

「LinkCard Editor ⭐」の基本操作の詳細は、以下のマニュアルを参照ください。

「LinkCard Editor ⭐」 操作マニュアル

「LinkCard Editor ⭐」最新版について 

旧いバージョンの「LinkCard Editor ⭐」は、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）