mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 20:22:18 +00:00
Added WYSIWYG editor callouts
This commit is contained in:
parent
d582e76fed
commit
bcd9c2044e
@ -1,7 +1,8 @@
|
|||||||
var mceOptions = module.exports = {
|
var mceOptions = module.exports = {
|
||||||
selector: '#html-editor',
|
selector: '#html-editor',
|
||||||
content_css: [
|
content_css: [
|
||||||
'/css/styles.css'
|
'/css/styles.css',
|
||||||
|
'/libs/material-design-iconic-font/css/material-design-iconic-font.min.css'
|
||||||
],
|
],
|
||||||
body_class: 'page-content',
|
body_class: 'page-content',
|
||||||
relative_urls: false,
|
relative_urls: false,
|
||||||
@ -19,11 +20,18 @@ var mceOptions = module.exports = {
|
|||||||
{title: "Header 1", format: "h1"},
|
{title: "Header 1", format: "h1"},
|
||||||
{title: "Header 2", format: "h2"},
|
{title: "Header 2", format: "h2"},
|
||||||
{title: "Header 3", format: "h3"},
|
{title: "Header 3", format: "h3"},
|
||||||
{title: "Paragraph", format: "p"},
|
{title: "Paragraph", format: "p", exact: true, classes: ''},
|
||||||
{title: "Blockquote", format: "blockquote"},
|
{title: "Blockquote", format: "blockquote"},
|
||||||
{title: "Code Block", icon: "code", format: "pre"},
|
{title: "Code Block", icon: "code", format: "pre"},
|
||||||
{title: "Inline Code", icon: "code", inline: "code"}
|
{title: "Inline Code", icon: "code", inline: "code"},
|
||||||
|
{title: "Callouts", items: [
|
||||||
|
{title: "Success", block: 'p', exact: true, attributes : {'class' : 'callout success'}},
|
||||||
|
{title: "Info", block: 'p', exact: true, attributes : {'class' : 'callout info'}},
|
||||||
|
{title: "Warning", block: 'p', exact: true, attributes : {'class' : 'callout warning'}},
|
||||||
|
{title: "Danger", block: 'p', exact: true, attributes : {'class' : 'callout danger'}}
|
||||||
|
]}
|
||||||
],
|
],
|
||||||
|
style_formats_merge: false,
|
||||||
formats: {
|
formats: {
|
||||||
alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
|
alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
|
||||||
aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
|
aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
|
||||||
|
@ -125,3 +125,51 @@
|
|||||||
margin-right: $-xl;
|
margin-right: $-xl;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Callouts
|
||||||
|
*/
|
||||||
|
|
||||||
|
.callout {
|
||||||
|
border-left: 3px solid #BBB;
|
||||||
|
background-color: #EEE;
|
||||||
|
padding: $-s;
|
||||||
|
&:before {
|
||||||
|
font-family: 'Material-Design-Iconic-Font';
|
||||||
|
padding-right: $-s;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
&.success {
|
||||||
|
border-left-color: $positive;
|
||||||
|
background-color: lighten($positive, 45%);
|
||||||
|
color: darken($positive, 16%);
|
||||||
|
}
|
||||||
|
&.success:before {
|
||||||
|
content: '\f269';
|
||||||
|
}
|
||||||
|
&.danger {
|
||||||
|
border-left-color: $negative;
|
||||||
|
background-color: lighten($negative, 34%);
|
||||||
|
color: darken($negative, 20%);
|
||||||
|
}
|
||||||
|
&.danger:before {
|
||||||
|
content: '\f1f2';
|
||||||
|
}
|
||||||
|
&.info {
|
||||||
|
border-left-color: $info;
|
||||||
|
background-color: lighten($info, 50%);
|
||||||
|
color: darken($info, 16%);
|
||||||
|
}
|
||||||
|
&.info:before {
|
||||||
|
content: '\f1f8';
|
||||||
|
}
|
||||||
|
&.warning {
|
||||||
|
border-left-color: $warning;
|
||||||
|
background-color: lighten($warning, 36%);
|
||||||
|
color: darken($warning, 16%);
|
||||||
|
}
|
||||||
|
&.warning:before {
|
||||||
|
content: '\f1f1';
|
||||||
|
}
|
||||||
|
}
|
@ -38,6 +38,7 @@ $primary-dark: #0288D1;
|
|||||||
$secondary: #e27b41;
|
$secondary: #e27b41;
|
||||||
$positive: #52A256;
|
$positive: #52A256;
|
||||||
$negative: #E84F4F;
|
$negative: #E84F4F;
|
||||||
|
$info: $primary;
|
||||||
$warning: $secondary;
|
$warning: $secondary;
|
||||||
$primary-faded: rgba(21, 101, 192, 0.15);
|
$primary-faded: rgba(21, 101, 192, 0.15);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user