Increase parser and SCEditor synchronization + return inline style for color, background, font bbcodes
This commit is contained in:
Visman
parent
f85dd4743c
commit
9cf8967bb8
4 changed files with 170 additions and 124 deletions
|
|
@ -112,6 +112,7 @@ HANDLER,
|
|||
],
|
||||
],
|
||||
'handler' => <<<'HANDLER'
|
||||
$parser->inlineStyle(true);
|
||||
$color = $attrs['Def'];
|
||||
|
||||
if ('#' === $color[0]) {
|
||||
|
|
@ -141,7 +142,7 @@ if ('#' === $color[0]) {
|
|||
}
|
||||
}
|
||||
|
||||
return "<span class=\"f-bb-color\" data-bb=\"{$color}\">{$body}</span>";
|
||||
return "<span class=\"f-bb-color\" style=\"color:{$color};\">{$body}</span>";
|
||||
HANDLER,
|
||||
],
|
||||
[
|
||||
|
|
@ -153,6 +154,7 @@ HANDLER,
|
|||
],
|
||||
],
|
||||
'handler' => <<<'HANDLER'
|
||||
$parser->inlineStyle(true);
|
||||
$color = $attrs['Def'];
|
||||
|
||||
if ('#' === $color[0]) {
|
||||
|
|
@ -182,7 +184,7 @@ if ('#' === $color[0]) {
|
|||
}
|
||||
}
|
||||
|
||||
return "<span class=\"f-bb-color\" data-bb=\"{$color}\">{$body}</span>";
|
||||
return "<span class=\"f-bb-color\" style=\"color:{$color};\">{$body}</span>";
|
||||
HANDLER,
|
||||
],
|
||||
[
|
||||
|
|
@ -194,7 +196,37 @@ HANDLER,
|
|||
],
|
||||
],
|
||||
'handler' => <<<'HANDLER'
|
||||
return "<span style=\"background-color:{$attrs['Def']};\">{$body}</span>";
|
||||
$parser->inlineStyle(true);
|
||||
$color = $attrs['Def'];
|
||||
|
||||
if ('#' === $color[0]) {
|
||||
$color = \strtoupper($color);
|
||||
} else {
|
||||
$repl = [
|
||||
'black' => '#000000',
|
||||
'gray' => '#808080',
|
||||
'silver' => '#C0C0C0',
|
||||
'white' => '#FFFFFF',
|
||||
'fuchsia' => '#FF00FF',
|
||||
'purple' => '#800080',
|
||||
'red' => '#FF0000',
|
||||
'maroon' => '#800000',
|
||||
'yellow' => '#FFFF00',
|
||||
'olive' => '#808000',
|
||||
'lime' => '#00FF00',
|
||||
'green' => '#008000',
|
||||
'aqua' => '#00FFFF',
|
||||
'teal' => '#008080',
|
||||
'blue' => '#0000FF',
|
||||
'navy' => '#000080',
|
||||
];
|
||||
|
||||
if (isset($repl[$color])) {
|
||||
$color = $repl[$color];
|
||||
}
|
||||
}
|
||||
|
||||
return "<span class=\"f-bb-bgcolor\" style=\"background-color:{$color};\">{$body}</span>";
|
||||
HANDLER,
|
||||
],
|
||||
[
|
||||
|
|
@ -206,7 +238,7 @@ HANDLER,
|
|||
],
|
||||
],
|
||||
'handler' => <<<'HANDLER'
|
||||
return "<span class=\"f-bb-size{$attrs['Def']}\">{$body}</span>";
|
||||
return "<span class=\"f-bb-size\" data-bb=\"{$attrs['Def']}\">{$body}</span>";
|
||||
HANDLER,
|
||||
],
|
||||
[
|
||||
|
|
@ -240,7 +272,7 @@ HANDLER,
|
|||
[
|
||||
'tag' => 'mono',
|
||||
'handler' => <<<'HANDLER'
|
||||
return "<code class=\"f-bb-mono\">{$body}</code>";
|
||||
return "<span class=\"f-bb-mono\">{$body}</span>";
|
||||
HANDLER,
|
||||
],
|
||||
[
|
||||
|
|
@ -252,7 +284,9 @@ HANDLER,
|
|||
],
|
||||
],
|
||||
'handler' => <<<'HANDLER'
|
||||
return "<span class=\"f-bb-font\" data-bb=\"{$attrs['Def']}\">{$body}</span>";
|
||||
$parser->inlineStyle(true);
|
||||
|
||||
return "<span class=\"f-bb-font\" style=\"font-family:{$attrs['Def']};\">{$body}</span>";
|
||||
HANDLER,
|
||||
],
|
||||
[
|
||||
|
|
|
|||
|
|
@ -347,6 +347,9 @@
|
|||
tags: {
|
||||
font: {
|
||||
size: null
|
||||
},
|
||||
span: {
|
||||
class: 'f-bb-size'
|
||||
}
|
||||
},
|
||||
styles: {
|
||||
|
|
@ -356,6 +359,10 @@
|
|||
var fontSize = attr(element, 'size'),
|
||||
size = 2;
|
||||
|
||||
if (!fontSize) {
|
||||
fontSize = attr(element, 'data-bb');
|
||||
}
|
||||
|
||||
if (!fontSize) {
|
||||
fontSize = css(element, 'fontSize');
|
||||
}
|
||||
|
|
@ -694,18 +701,29 @@
|
|||
// START_COMMAND: Code
|
||||
code: {
|
||||
tags: {
|
||||
pre: null,
|
||||
code: null
|
||||
},
|
||||
isInline: false,
|
||||
allowedChildren: ['#', '#newline'],
|
||||
format: '[code]{0}[/code]',
|
||||
format: function (element, content) {
|
||||
if (is(element, 'pre') && is(element.firstChild, 'code')) {
|
||||
content = this.elementToBbcode(element.firstChild);
|
||||
}
|
||||
|
||||
return '[code]' + content + '[/code]';
|
||||
},
|
||||
html: '<code>{0}</code>'
|
||||
},
|
||||
// END_COMMAND
|
||||
|
||||
|
||||
// START_COMMAND: Left
|
||||
left: {
|
||||
tags: {
|
||||
p: {
|
||||
class: 'f-bb-left'
|
||||
}
|
||||
},
|
||||
styles: {
|
||||
'text-align': [
|
||||
'left',
|
||||
|
|
@ -723,6 +741,11 @@
|
|||
|
||||
// START_COMMAND: Centre
|
||||
center: {
|
||||
tags: {
|
||||
p: {
|
||||
class: 'f-bb-center'
|
||||
}
|
||||
},
|
||||
styles: {
|
||||
'text-align': [
|
||||
'center',
|
||||
|
|
@ -740,6 +763,11 @@
|
|||
|
||||
// START_COMMAND: Right
|
||||
right: {
|
||||
tags: {
|
||||
p: {
|
||||
class: 'f-bb-right'
|
||||
}
|
||||
},
|
||||
styles: {
|
||||
'text-align': [
|
||||
'right',
|
||||
|
|
@ -757,6 +785,11 @@
|
|||
|
||||
// START_COMMAND: Justify
|
||||
justify: {
|
||||
tags: {
|
||||
p: {
|
||||
class: 'f-bb-justify'
|
||||
}
|
||||
},
|
||||
styles: {
|
||||
'text-align': [
|
||||
'justify',
|
||||
|
|
@ -814,6 +847,62 @@
|
|||
},
|
||||
// END_COMMAND
|
||||
|
||||
// START_COMMAND: Mono
|
||||
mono: {
|
||||
tags: {
|
||||
span: {
|
||||
class: 'f-bb-mono'
|
||||
}
|
||||
},
|
||||
isInline: true,
|
||||
format: '[mono]{0}[/mono]',
|
||||
html: '<span class="f-bb-mono">{0}</span>'
|
||||
},
|
||||
// END_COMMAND
|
||||
|
||||
// START_COMMAND: Spoiler
|
||||
spoiler: {
|
||||
tags: {
|
||||
details: null
|
||||
},
|
||||
isInline: false,
|
||||
// quoteType: QuoteType.never,
|
||||
format: function (element, content) {
|
||||
var summary;
|
||||
var children = element.children;
|
||||
|
||||
for (var i = 0; !summary && i < children.length; i++) {
|
||||
if (is(children[i], 'summary')) {
|
||||
summary = children[i];
|
||||
}
|
||||
}
|
||||
|
||||
if (summary) {
|
||||
element.removeChild(summary);
|
||||
content = this.elementToBbcode(element);
|
||||
summary = '=' + summary.textContent;
|
||||
|
||||
if (/^=['"]?Hidden text['"]?$/.test(summary)) {
|
||||
summary = '';
|
||||
}
|
||||
} else {
|
||||
summary = '';
|
||||
}
|
||||
|
||||
return '[spoiler' + summary + ']' + content + '[/spoiler]';
|
||||
},
|
||||
html: function (token, attrs, content) {
|
||||
if (attrs.defaultattr) {
|
||||
var summary = escapeEntities(attrs.defaultattr);
|
||||
} else {
|
||||
var summary = 'Hidden text';
|
||||
}
|
||||
|
||||
return '<details><summary>' + summary + '</summary><div class="f-bb-s-body">' + content + '</div></details>';
|
||||
}
|
||||
},
|
||||
// END_COMMAND
|
||||
|
||||
// this is here so that commands above can be removed
|
||||
// without having to remove the , after the last one.
|
||||
// Needed for IE.
|
||||
|
|
|
|||
|
|
@ -89,6 +89,7 @@ video {
|
|||
box-sizing: border-box;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -214,3 +215,32 @@ img {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
span.f-bb-mono {
|
||||
border: 0.0625rem solid #C0C0C0;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 0.25rem;
|
||||
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
summary::after {
|
||||
display: inline-block;
|
||||
content: "(click to open)";
|
||||
font-size: 0.875rem;
|
||||
margin: 0 0.3125rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
details[open] > summary::after {
|
||||
content: "(click to close)";
|
||||
}
|
||||
|
||||
div.f-bb-s-body {
|
||||
padding: 0.625rem;
|
||||
border-inline-start: 0.1875rem solid #AA7939;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -164,7 +164,8 @@ body,
|
|||
}
|
||||
|
||||
#fork code,
|
||||
#fork pre {
|
||||
#fork pre,
|
||||
#fork .f-bb-mono {
|
||||
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
}
|
||||
|
||||
|
|
@ -1758,143 +1759,35 @@ body,
|
|||
background-color: #D3B58D;
|
||||
}
|
||||
|
||||
#fork .f-bb-size1 {
|
||||
#fork .f-bb-size[data-bb="1"] {
|
||||
font-size: xx-small;
|
||||
}
|
||||
|
||||
#fork .f-bb-size2 {
|
||||
#fork .f-bb-size[data-bb="2"] {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
#fork .f-bb-size3 {
|
||||
#fork .f-bb-size[data-bb="3"] {
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
#fork .f-bb-size4 {
|
||||
#fork .f-bb-size[data-bb="4"] {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
#fork .f-bb-size5 {
|
||||
#fork .f-bb-size[data-bb="5"] {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
#fork .f-bb-size6 {
|
||||
#fork .f-bb-size[data-bb="6"] {
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
#fork .f-bb-size7 {
|
||||
#fork .f-bb-size[data-bb="7"] {
|
||||
font-size: 3rem;
|
||||
font-size: xxx-large; /* https://caniuse.com/mdn-css_properties_font-size_xxx-large */
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Arial"] {
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Arial Black"] {
|
||||
font-family: "Arial Black";
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Comic Sans MS"] {
|
||||
font-family: "Comic Sans MS";
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Courier New"] {
|
||||
font-family: "Courier New";
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Georgia"] {
|
||||
font-family: Georgia;
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Impact"] {
|
||||
font-family: Impact;
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Sans-serif"] {
|
||||
font-family: Sans-serif;
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Serif"] {
|
||||
font-family: Serif;
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Times New Roman"] {
|
||||
font-family: "Times New Roman";
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Trebuchet MS"] {
|
||||
font-family: "Trebuchet MS";
|
||||
}
|
||||
|
||||
#fork .f-bb-font[data-bb="Verdana"] {
|
||||
font-family: Verdana;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#000000"] {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#808080"] {
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#C0C0C0"] {
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#FFFFFF"] {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#FF00FF"] {
|
||||
color: #FF00FF;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#800080"] {
|
||||
color: #800080;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#FF0000"] {
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#800000"] {
|
||||
color: #800000;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#FFFF00"] {
|
||||
color: #FFFF00;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#808000"] {
|
||||
color: #808000;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#00FF00"] {
|
||||
color: #00FF00;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#008000"] {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#00FFFF"] {
|
||||
color: #00FFFF;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#008080"] {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#0000FF"] {
|
||||
color: #0000FF;
|
||||
}
|
||||
|
||||
#fork .f-bb-color[data-bb="#000080"] {
|
||||
color: #000080;
|
||||
}
|
||||
|
||||
/****************/
|
||||
/* Предпросмотр */
|
||||
/****************/
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue