fix(creator-studio): hide block-delete overlay inside the editor iframe
块级删除浮层插在 TinyMCE 的 iframe 里,但隐藏规则只写在父页面样式表, iframe 是独立文档、拿不到这些样式,于是 opacity:0 / position:absolute 全部 失效,✕ 退化成正文顶部的常显元素。 - 把 #jio-block-actions 的定位与隐藏规则移入 content_style,并给 body 加 position:relative 作为定位基准;隐藏时 pointer-events:none 避免挡住正文 - 浮层加 data-mce-bogus="all",让 TinyMCE 在序列化、字数和选区计算时跳过它, 否则 ✕ 会被写进保存内容 - 删除 _block-tools.scss 中作用于同一选择器的页面级死样式 - 契约测试锁定「样式必须在 content_style」与 bogus 属性 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
1970db0b56
commit
3e48fdf61e
7 files changed
+77
-44
No files matched your search
@@ -143,6 +143,10 @@ export function syncCodeLabels(editor: any): void {
|
||||
*
|
||||
* 与 WPS 的块操作一致:鼠标悬停到块上时在右上角出现删除入口,
|
||||
* 避免只能靠反复按退格键。
|
||||
*
|
||||
* 浮层直接插在 iframe 的 body 里,因此用 data-mce-bogus 让 TinyMCE 在
|
||||
* 序列化、字数和选区计算时完全忽略它;它的样式写在 editor-content-style.ts
|
||||
* (父页面样式表管不到 iframe 内部)。
|
||||
*/
|
||||
export function installBlockActions(editor: any): void {
|
||||
const doc = editor.getDoc();
|
||||
@@ -152,6 +156,8 @@ export function installBlockActions(editor: any): void {
|
||||
const bar = doc.createElement('div');
|
||||
bar.id = 'jio-block-actions';
|
||||
bar.className = 'jio-creator__block-actions';
|
||||
// "all" 让 TinyMCE 连同子节点一起跳过。
|
||||
bar.setAttribute('data-mce-bogus', 'all');
|
||||
bar.innerHTML =
|
||||
'<button type="button" class="jio-creator__block-action" data-jio-block-delete title="' +
|
||||
'删除此块' +
|
||||
|
||||
Reference in new issue
Block a user