Page Text Editor

Allows editing text on any webpage by clicking a button with improved styling and draggable functionality

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Page Text Editor
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Allows editing text on any webpage by clicking a button with improved styling and draggable functionality
// @author       Rylogix
// @match        https://*/*
// @match        http://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let isDragging = false;
    let offsetX, offsetY;

    function enableEditMode() {
        document.querySelectorAll('*').forEach(function(node) {
            node.setAttribute('contenteditable', 'true');
        });
    }

    function disableEditMode() {
        document.querySelectorAll('*').forEach(function(node) {
            node.removeAttribute('contenteditable');
        });
    }

    var editButton = document.createElement('button');
    editButton.innerHTML = 'Edit Text';
    editButton.style.position = 'fixed';
    editButton.style.top = '10px';
    editButton.style.right = '10px';
    editButton.style.padding = '8px 12px';
    editButton.style.border = 'none';
    editButton.style.borderRadius = '5px';
    editButton.style.background = '#3498db';
    editButton.style.color = '#fff';
    editButton.style.fontFamily = 'Arial, sans-serif';
    editButton.style.fontSize = '14px';
    editButton.style.cursor = 'pointer';
    editButton.style.userSelect = 'none'; // Prevent text selection
    editButton.style.zIndex = '9999'; // Ensure button overlays everything

    // Function to handle mouse down event on the button
    function handleMouseDown(event) {
        isDragging = true;
        offsetX = event.clientX - editButton.getBoundingClientRect().left;
        offsetY = event.clientY - editButton.getBoundingClientRect().top;
    }

    // Function to handle mouse move event on the document
    function handleMouseMove(event) {
        if (isDragging) {
            editButton.style.top = (event.clientY - offsetY) + 'px';
            editButton.style.left = (event.clientX - offsetX) + 'px';
        }
    }

    // Function to handle mouse up event on the document
    function handleMouseUp() {
        isDragging = false;
    }

    // Add event listeners for mouse events
    editButton.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    // Function to toggle edit mode and button text
    editButton.onclick = function() {
        if (editButton.innerHTML === 'Edit Text') {
            enableEditMode();
            editButton.innerHTML = 'Stop Editing';
        } else {
            disableEditMode();
            editButton.innerHTML = 'Edit Text';
        }
    };

    document.body.appendChild(editButton);
})();