如何将 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。

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

常见误区

几个坑：一是改键时把监听注册在冒泡阶段，被 Bricks 自己的处理器抢先，本文用捕获阶段（capture）才稳；二是新组合键和系统/浏览器撞车（如 Ctrl+W），改前先查占用；三是只在桌面端测，Mac 的 Cmd 和 Win 的 Ctrl 要分别照顾。快捷键改写是改编辑器体验的小手术，捕获阶段 + 不撞键 + 双平台验证，三件都做到就不翻车。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

为什么要在捕获阶段注册？ Bricks 在 iframe 文档的冒泡阶段注册了原快捷键，我们用捕获阶段先一步拦下，才能改掉它。

新组合键会盖系统键吗？ 可能，改前避开 Ctrl+W/Ctrl+T 这类浏览器保留键，选顺手又不冲突的。

Mac 和 Win 都要测吗？ 要，Cmd 和 Ctrl 分别对应，逻辑里把两平台都照顾到。

改完不生效？ 确认 JS 在构建器页面加载、且组合键没被别的脚本拦截。

• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程