kate522
c5bdbc0457
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.
274 lines
7.5 KiB
TypeScript
274 lines
7.5 KiB
TypeScript
/**
|
|
* TinyMCE iframe 内的正文样式。
|
|
*
|
|
* 编辑器正文跑在 iframe 里，页面级 SCSS 影响不到它，所以这里显式给出：
|
|
* 正文排版、主题引用 .quote_q、隐藏内容 .tinymce-hide、表格、公式、
|
|
* 块级删除控件与块选中态。
|
|
*
|
|
* @package Jio
|
|
*/
|
|
|
|
export const EDITOR_CONTENT_STYLE = `
|
|
body {
|
|
position: relative;
|
|
margin: 0;
|
|
color: #2b2b2b;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.8;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
p { margin: 0 0 1.1em; }
|
|
h1, h2, h3, h4, h5, h6 { margin: 1.5em 0 0.65em; line-height: 1.4; }
|
|
img, iframe { max-width: 100%; }
|
|
img { height: auto; }
|
|
|
|
/*
|
|
* 块级删除控件。它由 editor-runtime 插进 iframe 的 body，样式必须写在这里：
|
|
* 父页面样式表管不到 iframe 内部，缺这条规则时按钮会退化成正文顶部的常显小方块。
|
|
* 正文是流式布局且 iframe 高度随内容增长，所以按整篇正文定位，而不是相对某个块。
|
|
*/
|
|
#jio-block-actions {
|
|
position: absolute;
|
|
z-index: 5;
|
|
top: 6px;
|
|
left: 6px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
#jio-block-actions.is-visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
#jio-block-actions .jio-creator__block-action {
|
|
display: inline-flex;
|
|
height: 26px;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 0 9px;
|
|
border: 1px solid #e3e7e5;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #7d8683;
|
|
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: #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;
|
|
}
|
|
|
|
/* 第一次点击选中的块：虚线高亮，明确「还没删」。 */
|
|
.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: 14px 18px;
|
|
overflow-x: auto;
|
|
border-radius: 8px;
|
|
background: #f2f4f5;
|
|
color: #2b2b2b;
|
|
font-family: Consolas, Monaco, "Courier New", monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
}
|
|
pre code {
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
padding: 0;
|
|
white-space: inherit;
|
|
}
|
|
|
|
/* 引用：与前台主题的 .quote_q 视觉一致。 */
|
|
.quote_q {
|
|
position: relative;
|
|
margin: 10px 0 20px;
|
|
padding: 1.2em;
|
|
border-radius: 6px;
|
|
--quote-color: #555;
|
|
color: var(--quote-color);
|
|
}
|
|
.quote_q::before {
|
|
position: absolute;
|
|
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 {
|
|
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 {
|
|
width: 100%;
|
|
margin: 0 0 1.1em;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
.jio-content-table th,
|
|
.jio-content-table td {
|
|
padding: 10px 12px;
|
|
border: 1px solid #e6e9e8;
|
|
line-height: 1.6;
|
|
}
|
|
.jio-content-table thead th {
|
|
background: #f6f8f7;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
}
|
|
.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;
|
|
white-space: pre-wrap;
|
|
}
|
|
.jio-math--block {
|
|
display: block;
|
|
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; }
|
|
|
|
/* 隐藏内容：短代码放进 .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);
|
|
}
|
|
.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 {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
padding: 0 6px;
|
|
border-radius: 4px;
|
|
background: #eef5f2;
|
|
color: #267665;
|
|
font-size: 0.78em;
|
|
line-height: 1.6;
|
|
vertical-align: super;
|
|
cursor: default;
|
|
}
|
|
.jio-footnote-ref::before {
|
|
content: '注 ';
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 附件链接。 */
|
|
.jio-file-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
border: 1px solid #e6e9e8;
|
|
border-radius: 6px;
|
|
background: #f7f8f8;
|
|
text-decoration: none;
|
|
}
|
|
`;
|