您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Replaces specified Shopify metafield editors with Summernote WYSIWYG editor etc.
// ==UserScript== // @name Econea Utils // @namespace https://econea.cz/ // @version 1.3.8 // @description Replaces specified Shopify metafield editors with Summernote WYSIWYG editor etc. // @author Stepan // @match https://*.myshopify.com/admin/products/* // @match https://admin.shopify.com/store/*/products/* // @grant GM_addStyle // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js // @resource SummernoteCSS https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css // @license MIT // ==/UserScript== (function() { 'use strict'; const CONFIG = { targetMetafields: { ids: ['256299762003'], }, // Enable debug logging debug: true, editorConfig: { minHeight: 300, maxHeight: 600, height: 300, placeholder: '', toolbar: [ ['style', ['style']], ['font', ['bold', 'italic', 'underline', 'strikethrough']], ['color', ['color', 'backcolor']], ['para', ['ul', 'ol', 'paragraph']], ['table', ['table']], ['insert', ['link', 'picture', 'video', 'hr']], ['view', ['fullscreen', 'codeview', 'help']], ['misc', ['undo', 'redo']], ], styleTags: [ 'p', { title: 'Heading 1', tag: 'h1', className: '', value: 'h1' }, { title: 'Heading 2', tag: 'h2', className: '', value: 'h2' }, { title: 'Heading 3', tag: 'h3', className: '', value: 'h3' }, ], fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '36', '48', '64', '82', '150'], callbacks: { onInit: function() { // Will be set per instance }, onChange: function(contents, $editable) { // Will be set per instance }, onBlur: function() { // Will be set per instance }, }, }, }; let processedElements = new Set(); let observer; let summernoteInstances = new Map(); let summernoteReady = false; let initAttempts = 0; const MAX_INIT_ATTEMPTS = 20; GM_addStyle(` @import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css'); /* Main wrapper styling */ .wysiwyg-editor-wrapper { margin: 0 !important; position: relative !important; width: 100% !important; border-radius: 8px !important; overflow: visible !important; } /* Summernote container styling */ .wysiwyg-editor-wrapper .note-editor { border: 1px solid #d1d5db !important; border-radius: 8px !important; background: white !important; } /* Summernote toolbar styling */ .wysiwyg-editor-wrapper .note-toolbar { border-bottom: 1px solid #d1d5db !important; background: #f9fafb !important; padding: 8px 12px !important; } /* Editor content area */ .wysiwyg-editor-wrapper .note-editing-area .note-editable { overflow-y: auto !important; border: none !important; } /* Hide components that might interfere with Shopify Admin UI */ .note-modal-backdrop { display: none !important; } .note-modal { top: 60px !important; } .note-editor.note-frame.fullscreen { top: 60px !important; bottom: 0 !important; } .note-editor.note-frame.fullscreen .note-editing-area { height: calc(100% - 60px) !important } .note-editor.note-frame.fullscreen .note-editing-area .note-editable { height: 100% !important; } .note-editor.note-frame.fullscreen .note-editing-area .note-codable { height: 100% !important; max-height: unset !important; } `); function log(...args) { if (CONFIG.debug) { console.log('[Shopify WYSIWYG]', ...args); } } function logError(...args) { if (CONFIG.debug) { console.error('[Shopify WYSIWYG]', ...args); } } function checkSummernoteAvailability() { return new Promise((resolve) => { const checkSummernote = () => { // Check if jQuery and Summernote are available if ( typeof window.jQuery !== 'undefined' && window.jQuery && typeof window.jQuery.fn.summernote !== 'undefined' ) { log('Summernote detected and ready'); resolve(true); return; } initAttempts++; if (initAttempts < MAX_INIT_ATTEMPTS) { log(`Summernote check attempt ${initAttempts}/${MAX_INIT_ATTEMPTS}...`); setTimeout(checkSummernote, 500); } else { log('Max attempts reached, Summernote not available'); resolve(false); } }; checkSummernote(); }); } function isProductPage() { const url = window.location.href; return url.includes('/products/') && (url.includes('myshopify.com/admin') || url.includes('admin.shopify.com')); } // Enhanced metafield detection using the exact DOM structure function findMetafieldElements() { const elements = []; // Look for the specific structure from your DOM const metafieldRows = document.querySelectorAll('div._RowWrapper_xxurb_22'); metafieldRows.forEach(row => { try { // Find the metafield link to get ID and name const link = row.querySelector('a[href*="/metafields/"]'); if (!link) return; const href = link.getAttribute('href'); const metafieldId = href.match(/metafields\/(\d+)/)?.[1]; const metafieldName = link.textContent.trim(); // Find the textarea in this row const textarea = row.querySelector('textarea.Polaris-TextField__Input[aria-multiline="true"]'); if (!textarea || processedElements.has(textarea)) return; // Check if this metafield should be targeted const shouldTarget = shouldTargetMetafield(metafieldId, metafieldName); if (shouldTarget) { elements.push({ textarea: textarea, metafieldId: metafieldId, metafieldName: metafieldName, row: row }); log('Found target metafield:', metafieldName, 'ID:', metafieldId); } } catch (error) { logError('Error processing metafield row:', error); } }); return elements; } function shouldTargetMetafield(id, name) { const { ids, } = CONFIG.targetMetafields; // If targeting specific IDs if (ids.length > 0 && ids.includes(id)) { return true; } return false; } function createWYSIWYGEditor(metafieldData) { try { const { textarea, metafieldId, metafieldName, row } = metafieldData; log('Creating WYSIWYG for:', metafieldName, 'ID:', metafieldId); // Find the TextField container const textFieldContainer = textarea.closest('.Polaris-TextField'); if (!textFieldContainer) { log('Could not find TextField container'); return null; } // Create wrapper const editorWrapper = document.createElement('div'); editorWrapper.className = 'wysiwyg-editor-wrapper'; editorWrapper.style.position = 'relative'; // Create editor div const editorId = 'wysiwyg-' + metafieldId + '-' + Date.now(); const editorDiv = document.createElement('div'); editorDiv.id = editorId; editorWrapper.appendChild(editorDiv); // Replace the TextField but keep the original hidden textFieldContainer.parentNode.insertBefore(editorWrapper, textFieldContainer); textFieldContainer.style.display = 'none'; // Store references editorWrapper.originalElement = textarea; editorWrapper.originalContainer = textFieldContainer; processedElements.add(textarea); // Get initial content const initialContent = textarea.value || ''; let hasInitialContent = false; if (initialContent && initialContent.trim()) { hasInitialContent = true; } // Initialize Summernote with jQuery let $editor; try { $editor = jQuery(editorDiv); // Clone the config and set up callbacks for this instance const instanceConfig = jQuery.extend(true, {}, CONFIG.editorConfig); // Set up content synchronization let syncTimeout; let userHasInteracted = false; const syncContent = () => { try { const content = $editor.summernote('code'); // Check if content is just empty paragraph(s) - don't sync these const isEmpty = !content || content.trim() === '<p><br></p>' || content.trim() === '<p></p>' || content.trim() === '' || $editor.summernote('isEmpty'); // Update the original textarea const oldValue = textarea.value; const newValue = isEmpty ? '' : content; // Only trigger events if content actually changed AND it's not just empty formatting if (oldValue !== newValue && (hasInitialContent || !isEmpty)) { textarea.value = newValue; // Also try to trigger Shopify React change detection const reactProps = Object.keys(textarea).find(key => key.startsWith('__react')); if (reactProps) { const reactInternalInstance = textarea[reactProps]; if (reactInternalInstance && reactInternalInstance.memoizedProps && reactInternalInstance.memoizedProps.onChange) { try { reactInternalInstance.memoizedProps.onChange({ target: textarea, currentTarget: textarea }); } catch (e) { logError('React onChange trigger failed:', e); } } } console.dir({ before: oldValue, after: newValue, }, {depth:3}); log('Content synced for:', metafieldName, 'Length:', newValue.length); } } catch (error) { logError('Error syncing content:', error); } }; // Set up callbacks instanceConfig.callbacks.onInit = function() { // Set initial content after initialization if (hasInitialContent) { try { $editor.summernote('code', initialContent); setTimeout(syncContent, 100); } catch (e) { logError('Error setting initial content:', e); $editor.summernote('code', initialContent); } } // Focus editor setTimeout(() => { $editor.summernote('focus'); }, 100); }; instanceConfig.callbacks.onChange = function(contents, $editable) { userHasInteracted = true; // Clear existing timeout clearTimeout(syncTimeout); // Debounce the sync to avoid too many events syncTimeout = setTimeout(syncContent, 300); }; instanceConfig.callbacks.onBlur = function() { if (userHasInteracted) { clearTimeout(syncTimeout); syncContent(); } }; // Initialize Summernote $editor.summernote(instanceConfig); } catch (error) { logError('Failed to create Summernote instance:', error); // Restore original element textFieldContainer.style.display = ''; editorWrapper.remove(); processedElements.delete(textarea); return null; } summernoteInstances.set(editorId, { $editor: $editor, originalTextarea: textarea, metafieldName: metafieldName }); log('WYSIWYG editor created successfully for:', metafieldName); return editorWrapper; } catch (error) { logError('Failed to create WYSIWYG editor:', error); if (metafieldData.textarea) { processedElements.delete(metafieldData.textarea); } return null; } } async function processMetafields() { try { if (!isProductPage()) { log('Not on product page, skipping...'); return; } if (!summernoteReady) { log('Summernote not ready yet, checking availability...'); summernoteReady = await checkSummernoteAvailability(); if (!summernoteReady) { log('Summernote failed to load properly'); return; } } log('Processing metafields...'); const metafieldElements = findMetafieldElements(); let processedCount = 0; metafieldElements.forEach(metafieldData => { try { const result = createWYSIWYGEditor(metafieldData); if (result) { processedCount++; } } catch (error) { logError('Failed to create editor for metafield:', error); } }); log(`Successfully processed ${processedCount} metafield(s)`); } catch (error) { logError('Error in processMetafields:', error); } } let processTimeout; function debouncedProcess() { clearTimeout(processTimeout); processTimeout = setTimeout(processMetafields, 200); } // Setup observer for dynamic content function setupObserver() { try { if (observer) { observer.disconnect(); } observer = new MutationObserver((mutations) => { let shouldProcess = false; for (const mutation of mutations) { // Only check childList mutations for efficiency if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { for (const node of mutation.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE) { // Check if this node or its descendants contain metafield elements if (node.matches && ( node.matches('div._RowWrapper_xxurb_22') || node.matches('a[href*="/metafields/"]') || node.matches('textarea[aria-multiline="true"]') )) { shouldProcess = true; break; } else if (node.querySelector && ( node.querySelector('div._RowWrapper_xxurb_22') || node.querySelector('a[href*="/metafields/"]') || node.querySelector('textarea[aria-multiline="true"]') )) { shouldProcess = true; break; } } } if (shouldProcess) break; } } if (shouldProcess) { log('DOM changes detected, reprocessing...'); debouncedProcess(); } }); observer.observe(document.body, { childList: true, subtree: true, // Only observe what we need attributes: false, attributeOldValue: false, characterData: false, characterDataOldValue: false }); log('Observer set up successfully'); } catch (error) { logError('Error setting up observer:', error); } } // Initialize the script async function initialize() { try { if (!isProductPage()) return; log('Initializing Shopify Metafield WYSIWYG Editor...'); log('Target config:', CONFIG.targetMetafields); // Wait for Summernote to be ready summernoteReady = await checkSummernoteAvailability(); if (summernoteReady) { log('Summernote is ready, processing metafields...'); setTimeout(processMetafields, 500); setTimeout(processMetafields, 2000); // Backup processing setupObserver(); } else { log('Failed to initialize: Summernote not available'); } } catch (error) { logError('Error in initialize:', error); } } // Handle page navigation let currentUrl = window.location.href; function handleUrlChange() { if (currentUrl !== window.location.href) { currentUrl = window.location.href; log('URL changed, reinitializing...'); // Clean up processedElements.clear(); if (observer) observer.disconnect(); summernoteInstances.forEach((instance, id) => { try { instance.$editor.summernote('destroy'); } catch (e) { logError(e); } }); summernoteInstances.clear(); summernoteReady = false; initAttempts = 0; // Reinitialize setTimeout(initialize, 1000); } } setInterval(handleUrlChange, 1000); // Start the script if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initialize); } else { setTimeout(initialize, 1000); } // Cleanup on page unload window.addEventListener('beforeunload', () => { try { if (observer) observer.disconnect(); summernoteInstances.forEach((instance) => { try { instance.$editor.summernote('destroy'); } catch (e) { logError(e); } }); summernoteInstances.clear(); } catch (error) { logError('Error during cleanup:', error); } }); // Debug functions window.debugWYSIWYG = { processMetafields: processMetafields, getInstances: () => summernoteInstances, getProcessed: () => processedElements, checkSummernote: () => checkSummernoteAvailability(), forceSync: () => { summernoteInstances.forEach((instance, id) => { try { const content = instance.$editor.summernote('code'); instance.originalTextarea.value = content; instance.originalTextarea.dispatchEvent(new Event('input', { bubbles: true })); instance.originalTextarea.dispatchEvent(new Event('change', { bubbles: true })); log('Force synced:', instance.metafieldName); } catch (e) { logError('Error force syncing:', instance.metafieldName, e); } }); } }; log('Shopify Metafield WYSIWYG Editor script loaded successfully'); })();