如何将 Bricks 的 Ctrl/Cmd+Shift+V 快捷键改为前端预览

Ctrl+Shift+V 在 Windows 里是「无格式粘贴」的常用快捷键。偏偏 Bricks 编辑器也用这组键来在前端查看当前正在编辑的页面/文章/模板。

我们可以把这组快捷键改成 Ctrl/Cmd+Alt+V，把 Ctrl+Shift+V 还给无格式粘贴（PC 上）。

做法如下。

在子主题目录下创建 js 文件夹，在里面创建 builder-view-shortcut.js，内容如下：

( () => {
	'use strict';

	/**
	 * Remap "View on frontend" from Ctrl+Shift+V to Ctrl+Alt+V.
	 *
	 * Bricks registers its keydown handler on the iframe document in the
	 * bubble phase.  We register in the capture phase so we always fire first.
	 *
	 * New shortcut : Ctrl+Alt+V   (Win) / Cmd+Option+V (Mac)
	 * Blocked      : Ctrl+Shift+V (Win) / Cmd+Shift+V  (Mac) — restored to
	 *                browser-native paste-without-formatting.
	 */

	const isMac = /Mac|iPhone|iPod|iPad/.test( navigator.platform );

	/**
	 * Capture-phase keydown handler.
	 *
	 * @param {KeyboardEvent} e
	 */
	const handleKeydown = ( e ) => {
		// Use e.code (physical key) instead of e.key because on Mac,
		// Option+V produces "√" rather than "v" for e.key.
		if ( e.code !== 'KeyV' ) {
			return;
		}

		const hasMod = isMac ? e.metaKey : e.ctrlKey;

		if ( ! hasMod ) {
			return;
		}

		// New shortcut: Ctrl+Alt+V → view on frontend.
		if ( e.altKey && ! e.shiftKey ) {
			e.preventDefault();
			e.stopPropagation();
			e.stopImmediatePropagation();

			const anchor = window.top.document.querySelector( '#bricks-toolbar .new-tab a' );

			if ( anchor ) {
				anchor.click();
			}

			return;
		}

		// Block Bricks from hijacking Ctrl+Shift+V.
		// Do NOT preventDefault — let the browser paste without formatting.
		if ( e.shiftKey && ! e.altKey ) {
			e.stopPropagation();
			e.stopImmediatePropagation();
		}
	};

	/**
	 * Attach the capture-phase listener to a document.
	 *
	 * @param {Document} doc
	 */
	const attachTo = ( doc ) => {
		doc.addEventListener( 'keydown', handleKeydown, true );
	};

	// Main builder frame.
	attachTo( document );

	// Canvas iframe (where Bricks' own listener lives).
	const iframe = document.getElementById( 'bricks-builder-iframe' );

	if ( iframe ) {
		iframe.addEventListener( 'load', () => {
			try {
				attachTo( iframe.contentDocument );
			} catch {
				// Same-origin guard.
			}
		} );

		// Iframe may already be loaded.
		try {
			if ( iframe.contentDocument?.readyState === 'complete' ) {
				attachTo( iframe.contentDocument );
			}
		} catch {
			// Ignore.
		}
	}
} )();

脚本原理：Bricks 在 iframe 文档的冒泡阶段注册了 keydown 处理器，这段脚本改用捕获阶段注册，保证总是先执行。按下 Ctrl/Cmd+Alt+V 时阻止 Bricks 默认行为，并模拟点击工具栏里「在新标签打开」的链接（#bricks-toolbar .new-tab a）；按下 Ctrl/Cmd+Shift+V 时只拦截事件传播、不阻止默认行为，让浏览器原生无格式粘贴生效。

然后在 Bricks 编辑器里加载这段 JS——编辑子主题的 functions.php，把

add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	}
} );

替换为

add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	}
	
	// Enqueue builder keyboard shortcuts
	if ( bricks_is_builder_main() ) {
		// Remap "View on frontend" from Cmd/Ctrl+Shift+V to Cmd/Ctrl+Alt+V.
		wp_enqueue_script(
			'bl-builder-view-shortcut',
			get_stylesheet_directory_uri() . '/js/builder-view-shortcut.js',
			[ 'bricks-builder' ],
			filemtime( get_stylesheet_directory() . '/js/builder-view-shortcut.js' ),
			true,
		);
	}
} );

保存并重新加载 Bricks 编辑器。按 Ctrl/Cmd+Alt+V，当前编辑的内容会在新标签页中打开预览。

JavaScript 代码致谢：Claude AI。