feat(creator-studio): portal dropdowns, hidden content, two-step block delete
Toolbar - New ToolMenu renders menus through a portal on body, so they are no longer clipped by the horizontally scrolling toolbar and no longer fall back to a native <select>. Triggers reuse .jio-creator__tool-btn geometry, fixing the heading button's mismatched height/size/position. - Heading / list / align / quote / hidden-content are all dropdowns. - Lists: unordered + ordered via InsertOrderedList/InsertUnorderedList. The TOC button is removed (it also used the wrong icon). - Adds left / center / right alignment. - Adds hidden content: comment / login / VIP / paid, wired to the existing [reply], [jio_hide mode="login"], [vip] and [payshow] shortcodes. Editor content - Quote blocks now match the live article: full .quote_q structure, four colour variables, and an SVG-mask quote mark that does not depend on the Font Awesome font being present inside the iframe. - Block math is centred on a transparent background instead of a full-width grey bar. - Code blocks are plain <pre><code>, identical to the article page; language and theme selection is gone and EnlighterJS handles highlighting globally. The classic submit editor's code modal follows the same shape. - Hidden content reuses the .tinymce-hide structure and shows a readable label while keeping the shortcode text in the DOM for saving. Block deletion - Two-step delete, WPS style: the first click only selects and highlights the block, the second click removes it. Clicking elsewhere or Esc cancels. Contracts updated and extended; 884 widget-system tests pass.
This commit is contained in:
kate522 committed
1 parent
3e48fdf61e
commit
c5bdbc0457
16 files changed
+1090
-545
No files matched your search
@@ -2,8 +2,8 @@
|
||||
* TinyMCE iframe 内的正文样式。
|
||||
*
|
||||
* 编辑器正文跑在 iframe 里，页面级 SCSS 影响不到它，所以这里显式给出：
|
||||
* 正文排版、主题引用 .quote_q、表格、公式、目录占位、块级删除控件，以及
|
||||
* 代码块右上角的语言标签。
|
||||
* 正文排版、主题引用 .quote_q、隐藏内容 .tinymce-hide、表格、公式、
|
||||
* 块级删除控件与块选中态。
|
||||
*
|
||||
* @package Jio
|
||||
*/
|
||||
@@ -25,16 +25,14 @@ img { height: auto; }
|
||||
|
||||
/*
|
||||
* 块级删除控件。它由 editor-runtime 插进 iframe 的 body，样式必须写在这里：
|
||||
* 父页面样式表管不到 iframe 内部，缺这条规则时按钮会退化成正文顶部的常显 ✕。
|
||||
* 父页面样式表管不到 iframe 内部，缺这条规则时按钮会退化成正文顶部的常显小方块。
|
||||
* 正文是流式布局且 iframe 高度随内容增长，所以按整篇正文定位，而不是相对某个块。
|
||||
*/
|
||||
#jio-block-actions {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
left: 6px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease;
|
||||
@@ -45,59 +43,72 @@ img { height: auto; }
|
||||
}
|
||||
#jio-block-actions .jio-creator__block-action {
|
||||
display: inline-flex;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
gap: 5px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid #e3e7e5;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: #7d8683;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2px 8px rgba(24, 39, 34, 0.08);
|
||||
cursor: pointer;
|
||||
}
|
||||
#jio-block-actions .jio-creator__block-action-icon {
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
}
|
||||
#jio-block-actions .jio-creator__block-action:hover {
|
||||
border-color: #e6b8ad;
|
||||
border-color: #cdd6d2;
|
||||
color: #4f5957;
|
||||
}
|
||||
#jio-block-actions.is-selected .jio-creator__block-action {
|
||||
border-color: #e0a99b;
|
||||
background: #fdf2ee;
|
||||
color: #b4573f;
|
||||
}
|
||||
#jio-block-actions.is-selected .jio-creator__block-action:hover {
|
||||
border-color: #cf8574;
|
||||
background: #fbe7e1;
|
||||
}
|
||||
|
||||
/* 代码块：右上角显示当前语言，点击即可更换（交互在父组件里接管）。 */
|
||||
.enlighter-pre {
|
||||
position: relative;
|
||||
/* 第一次点击选中的块：虚线高亮，明确「还没删」。 */
|
||||
.jio-creator__block-selected {
|
||||
outline: 2px dashed rgba(180, 87, 63, 0.55);
|
||||
outline-offset: 3px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
* 代码块：与前台文章页保持一致，只用 pre > code。
|
||||
* 前台由 EnlighterJS 高亮，编辑器里给出同一份底色与等宽排版。
|
||||
*/
|
||||
pre {
|
||||
margin: 0 0 1.1em;
|
||||
padding: 40px 14px 14px;
|
||||
overflow: auto;
|
||||
padding: 14px 18px;
|
||||
overflow-x: auto;
|
||||
border-radius: 8px;
|
||||
background: #f2f4f5;
|
||||
cursor: pointer;
|
||||
color: #2b2b2b;
|
||||
font-family: Consolas, Monaco, "Courier New", monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.enlighter-pre code.gl {
|
||||
display: block;
|
||||
pre code {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #2b2b2b;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.enlighter-pre .jio-code-lang {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(135deg, #3dcabd 10%, #254bdd 100%);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.enlighter-pre .jio-code-lang:hover {
|
||||
filter: brightness(1.08);
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
padding: 0;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
/* 引用：与前台主题的 .quote_q 视觉一致。 */
|
||||
@@ -106,24 +117,49 @@ img { height: auto; }
|
||||
margin: 10px 0 20px;
|
||||
padding: 1.2em;
|
||||
border-radius: 6px;
|
||||
color: var(--quote-color, #555);
|
||||
background: rgba(85, 85, 85, 0.04);
|
||||
--quote-color: #555;
|
||||
color: var(--quote-color);
|
||||
}
|
||||
.quote_q.qe_wzk_c-red { --quote-color: #dc3f3f; background: rgba(220, 63, 63, 0.05); }
|
||||
.quote_q.qe_wzk_lan { --quote-color: #0092ff; background: rgba(0, 146, 255, 0.05); }
|
||||
.quote_q.qe_wzk_lv { --quote-color: #23790e; background: rgba(35, 121, 14, 0.05); }
|
||||
.quote_q::after {
|
||||
.quote_q::before {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 18px;
|
||||
color: var(--quote-color, #555);
|
||||
content: '\\201C';
|
||||
font-size: 1.4em;
|
||||
inset: 0;
|
||||
border-radius: 6px;
|
||||
background: var(--quote-color);
|
||||
content: '';
|
||||
opacity: 0.04;
|
||||
}
|
||||
.quote_q.quote-mce::after {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
color: var(--quote-color);
|
||||
content: '';
|
||||
font-size: 1.2em;
|
||||
line-height: 1;
|
||||
opacity: 0.6;
|
||||
/* 引号用图标字体绘制时依赖 FA；这里用内联 SVG 数据，编辑器与前台都不缺图标。 */
|
||||
background: var(--quote-color);
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
.quote_q > div { padding-left: 2em; opacity: 0.85; }
|
||||
.quote_q > div > p:last-child { margin-bottom: 0; }
|
||||
.quote_q > div {
|
||||
position: relative;
|
||||
min-height: 24px;
|
||||
padding-left: 2em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.quote_q > div > :first-child { margin-top: 0; }
|
||||
.quote_q > div > :last-child { margin-bottom: 0; }
|
||||
.quote_q [contenteditable="true"] {
|
||||
outline: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.quote_q.qe_wzk_c-red { --quote-color: #dc3f3f; }
|
||||
.quote_q.qe_wzk_lan { --quote-color: #0092ff; }
|
||||
.quote_q.qe_wzk_lv { --quote-color: #23790e; }
|
||||
|
||||
/* 表格。 */
|
||||
.jio-content-table {
|
||||
@@ -145,7 +181,7 @@ img { height: auto; }
|
||||
}
|
||||
.jio-content-table.is-striped tbody tr:nth-child(odd) td { background: #f7f9f8; }
|
||||
|
||||
/* 公式。 */
|
||||
/* 公式：独占一行时居中显示，不铺满整行底色。 */
|
||||
.jio-math {
|
||||
font-family: "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
|
||||
font-size: 1.05em;
|
||||
@@ -153,25 +189,57 @@ img { height: auto; }
|
||||
}
|
||||
.jio-math--block {
|
||||
display: block;
|
||||
margin: 12px 0;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
background: #f8faf9;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 2px 0;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.jio-math sup, .jio-math sub { font-size: 0.72em; }
|
||||
.jio-toc-placeholder {
|
||||
height: 40px;
|
||||
margin: 0 0 1.1em;
|
||||
border: 1px dashed #d3ded8;
|
||||
border-radius: 8px;
|
||||
background: #f7faf9;
|
||||
color: #8c9a94;
|
||||
font-size: 12px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
|
||||
/* 隐藏内容：短代码放进 .hide-before / .hide-after，编辑器只显示可读标签。 */
|
||||
.tinymce-hide {
|
||||
position: relative;
|
||||
margin: 18px 0;
|
||||
padding: 38px 14px 14px;
|
||||
border: 1px dashed rgba(240, 68, 148, 0.35);
|
||||
border-radius: 6px;
|
||||
background: rgba(240, 68, 148, 0.04);
|
||||
}
|
||||
.jio-toc-placeholder::after { content: '目录将在发布后自动生成'; }
|
||||
.tinymce-hide > .hide-before,
|
||||
.tinymce-hide > .hide-after {
|
||||
margin: 0;
|
||||
font-family: Consolas, Monaco, monospace;
|
||||
font-size: 0;
|
||||
line-height: 1.5;
|
||||
color: #f04494;
|
||||
}
|
||||
.tinymce-hide > .hide-before {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 14px;
|
||||
}
|
||||
.tinymce-hide > .hide-before::before {
|
||||
content: attr(data-jio-hide-label);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.tinymce-hide > .hide-after {
|
||||
display: none;
|
||||
}
|
||||
.tinymce-hide > [contenteditable="true"] {
|
||||
min-height: 38px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
outline: 0;
|
||||
}
|
||||
.tinymce-hide > [contenteditable="true"] > :first-child { margin-top: 0; }
|
||||
.tinymce-hide > [contenteditable="true"] > :last-child { margin-bottom: 0; }
|
||||
|
||||
/* 注释：编辑器里显示上标标记，发布后由服务端渲染编号与注释列表。 */
|
||||
.jio-footnote-ref {
|
||||
|
||||
Reference in new issue
Block a user