Quill 2.0 dev 3 + better tables

This commit is contained in:
2019-09-30 21:12:09 +02:00
parent e347e134c0
commit b22ad457ca
12 changed files with 2538 additions and 2305 deletions

View File

@@ -8,6 +8,7 @@
<script type="text/javascript" src="scripts/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mods.js"></script>
<script type="text/javascript" src="scripts/quill.min.js"></script>
<script type="text/javascript" src="scripts/quill.mods.js"></script>
<script type="text/javascript" src="[#]filepath_js_common[#]"></script>
<script type="text/javascript" src="[#]filepath_js_catc[#]"></script>
<link rel="icon" type="image/png" href="images/favicon.png">

View File

@@ -414,6 +414,8 @@ function CATC(asGlobals)
}
}
Quill.register({'modules/better-table': quillBetterTable}, true);
class Editor {
constructor(sEditorId, bReadOnly) {
this.keystrokes = 0;
@@ -430,6 +432,19 @@ class Editor {
placeholder: 'Notes',
readOnly: bReadOnly,
modules: {
table: false,
'better-table': {
operationMenu: {
items: {
unmergeCells: {
text: 'Another unmerge cells name'
}
}
}
},
keyboard: {
bindings: quillBetterTable.keyboardBindings
},
toolbar: [
['bold', 'italic', 'underline', 'strike'],
//['blockquote', 'code-block'],
@@ -443,12 +458,19 @@ class Editor {
//[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
//[{ 'font': [] }],
[{ 'align': [] }],
['table'],
['link', 'image'],
['clean']
]
}
});
var oToolbar = this.oQuill.getModule('toolbar');
oToolbar.addHandler('table', () => {
let tableModule = this.oQuill.getModule('better-table');
tableModule.insertTable(3, 3);
});
this._initEvents();
this._postInit();
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
scripts/quill.mods.js Normal file

File diff suppressed because one or more lines are too long

View File

@@ -1,4 +1,5 @@
@import 'quill/quill.snow';
@import 'quill/quill.better-table';
.ql-toolbar.ql-snow {
border: none;
@@ -21,3 +22,39 @@
.ql-snow .ql-tooltip {
z-index: 10;
}
.qlbt-col-tool {
display: none;
}
/* Quill Better Table */
.ql-container {
table.quill-better-table {
td {
border-color: $col_main_1;
}
}
.qlbt-selection-line.qlbt-selection-line-right,
.qlbt-selection-line.qlbt-selection-line-left {
margin-top: -2px;
margin-left: -2px;
background-color: $col_main_2 !important;
&::before {
background-color: $col_main_2;
}
}
.qlbt-selection-line.qlbt-selection-line-top,
.qlbt-selection-line.qlbt-selection-line-bottom {
margin-top: -3px;
margin-left: -2px;
background-color: $col_main_2 !important;
}
.qlbt-col-tool .qlbt-col-tool-cell-holder:hover {
background-color: $col_main_2;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,117 @@
.ql-container .qlbt-selection-line.qlbt-selection-line-left::before {
position: absolute;
left: -2px;
top: -2px;
content: '';
width: 5px;
height: 5px;
background-color: #0589f3;
border-radius: 5px; }
.ql-container .qlbt-selection-line.qlbt-selection-line-right::before {
position: absolute;
right: -2px;
bottom: -3px;
content: '';
width: 5px;
height: 5px;
background-color: #0589f3;
border-radius: 5px; }
.quill-better-table-wrapper {
overflow-x: auto; }
.ql-container table {
table-layout: fixed;
border-collapse: collapse; }
.ql-container table td {
border: 1px solid #000;
padding: 2px 5px; }
.qlbt-operation-menu {
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
font-size: 14px;
z-index: 100;
overflow: hidden; }
.qlbt-operation-menu .qlbt-operation-menu-dividing {
height: 1px;
background-color: #efefef; }
.qlbt-operation-menu .qlbt-operation-menu-subtitle {
color: #999;
font-size: 14px;
padding: 5px 16px; }
.qlbt-operation-menu .qlbt-operation-color-picker {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0 16px 10px;
background-color: #fff;
overflow: hidden; }
.qlbt-operation-menu .qlbt-operation-color-picker .qlbt-operation-color-picker-item {
width: 20px;
height: 20px;
border: 1px solid #595959;
margin-right: 5px;
margin-bottom: 5px;
cursor: pointer; }
.qlbt-operation-menu .qlbt-operation-menu-item {
display: flex;
align-items: center;
padding: 10px 16px;
background-color: #fff;
cursor: pointer;
color: #595959;
overflow: hidden;
text-overflow: ellipsis; }
.qlbt-operation-menu .qlbt-operation-menu-item:hover {
background-color: #efefef; }
.qlbt-operation-menu .qlbt-operation-menu-item .qlbt-operation-menu-icon {
margin-right: 8px;
height: 20px;
width: 20px;
font-size: 0; }
.qlbt-col-tool {
position: absolute;
display: flex;
align-items: flex-end;
overflow: hidden;
z-index: 99;
height: 16px; }
.qlbt-col-tool .qlbt-col-tool-cell {
position: relative;
background-color: #fff;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000; }
.qlbt-col-tool .qlbt-col-tool-cell:first-child {
border-left: 1px solid #000; }
.qlbt-col-tool .qlbt-col-tool-cell-holder {
position: absolute;
right: -1px;
top: 0;
bottom: 0;
z-index: 3;
width: 1px;
background-color: transparent;
cursor: ew-resize; }
.qlbt-col-tool .qlbt-col-tool-cell-holder:hover {
background-color: #0589f3; }
.qlbt-col-tool .qlbt-col-tool-cell-holder::before {
content: "";
position: absolute;
top: 0;
left: -6px;
display: block;
width: 8px;
height: 100%; }
.qlbt-col-tool .qlbt-col-tool-cell-holder::after {
content: "";
position: absolute;
top: 0;
right: -6px;
display: block;
width: 8px;
height: 100%; }

View File

@@ -1,5 +1,5 @@
/*!
* Quill Editor v1.3.6
* Quill Editor v2.0.0-dev.3
* https://quilljs.com/
* Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com
@@ -15,8 +15,9 @@
.ql-container.ql-disabled .ql-tooltip {
visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
pointer-events: none;
.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
cursor: pointer;
}
.ql-clipboard {
left: -100000px;
@@ -31,6 +32,7 @@
}
.ql-editor {
box-sizing: border-box;
counter-reset: list-0;
line-height: 1.42;
height: 100%;
outline: none;
@@ -47,7 +49,6 @@
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
@@ -58,144 +59,135 @@
.ql-editor h6 {
margin: 0;
padding: 0;
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
.ql-editor p,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor table {
border-collapse: collapse;
}
.ql-editor td {
border: 1px solid #000;
padding: 2px 5px;
}
.ql-editor ol {
padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
.ql-editor li {
list-style-type: none;
padding-left: 1.5em;
position: relative;
}
.ql-editor ul > li::before {
content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
color: #777;
cursor: pointer;
pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
content: '\2610';
}
.ql-editor li::before {
.ql-editor li > .ql-ui:before {
display: inline-block;
white-space: nowrap;
width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
margin-left: -1.5em;
margin-right: 0.3em;
text-align: right;
white-space: nowrap;
width: 1.2em;
}
.ql-editor li.ql-direction-rtl::before {
margin-left: 0.3em;
margin-right: -1.5em;
.ql-editor li[data-list=checked] > .ql-ui,
.ql-editor li[data-list=unchecked] > .ql-ui {
color: #777;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
padding-left: 1.5em;
.ql-editor li[data-list=bullet] > .ql-ui:before {
content: '\2022';
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
padding-right: 1.5em;
.ql-editor li[data-list=checked] > .ql-ui:before {
content: '\2611';
}
.ql-editor ol li {
.ql-editor li[data-list=unchecked] > .ql-ui:before {
content: '\2610';
}
.ql-editor li[data-list=ordered] {
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
counter-increment: list-0;
}
.ql-editor ol li:before {
.ql-editor li[data-list=ordered] > .ql-ui:before {
content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
.ql-editor li[data-list=ordered].ql-indent-1 {
counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
.ql-editor li[data-list=ordered].ql-indent-1 {
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
.ql-editor li[data-list=ordered].ql-indent-2 {
counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
.ql-editor li[data-list=ordered].ql-indent-2 {
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
.ql-editor li[data-list=ordered].ql-indent-3 {
counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
.ql-editor li[data-list=ordered].ql-indent-3 {
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
.ql-editor li[data-list=ordered].ql-indent-4 {
counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
.ql-editor li[data-list=ordered].ql-indent-4 {
counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
.ql-editor li[data-list=ordered].ql-indent-5 {
counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
.ql-editor li[data-list=ordered].ql-indent-5 {
counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
.ql-editor li[data-list=ordered].ql-indent-6 {
counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
.ql-editor li[data-list=ordered].ql-indent-6 {
counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
.ql-editor li[data-list=ordered].ql-indent-7 {
counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
.ql-editor li[data-list=ordered].ql-indent-7 {
counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
.ql-editor li[data-list=ordered].ql-indent-8 {
counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
.ql-editor li[data-list=ordered].ql-indent-8 {
counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
.ql-editor li[data-list=ordered].ql-indent-9 {
counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
@@ -306,6 +298,24 @@
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
padding-right: 28.5em;
}
.ql-editor li.ql-direction-rtl {
padding-right: 1.5em;
}
.ql-editor li.ql-direction-rtl > .ql-ui:before {
margin-left: 0.3em;
margin-right: -1.5em;
text-align: left;
}
.ql-editor table {
table-layout: fixed;
width: 100%;
}
.ql-editor table td {
outline: none;
}
.ql-editor .ql-code-block-container {
font-family: monospace;
}
.ql-editor .ql-video {
display: block;
max-width: 100%;
@@ -386,6 +396,9 @@
.ql-editor .ql-align-right {
text-align: right;
}
.ql-editor .ql-ui {
position: absolute;
}
.ql-editor.ql-blank::before {
color: rgba(0,0,0,0.6);
content: attr(data-placeholder);
@@ -619,12 +632,11 @@
padding-left: 16px;
}
.ql-bubble .ql-editor code,
.ql-bubble .ql-editor pre {
.ql-bubble .ql-editor .ql-code-block-container {
background-color: #f0f0f0;
border-radius: 3px;
}
.ql-bubble .ql-editor pre {
white-space: pre-wrap;
.ql-bubble .ql-editor .ql-code-block-container {
margin-bottom: 5px;
margin-top: 5px;
padding: 5px 10px;
@@ -633,7 +645,7 @@
font-size: 85%;
padding: 2px 4px;
}
.ql-bubble .ql-editor pre.ql-syntax {
.ql-bubble .ql-editor .ql-code-block-container {
background-color: #23241f;
color: #f8f8f2;
overflow: visible;
@@ -845,6 +857,13 @@
.ql-bubble .ql-color-picker.ql-color .ql-picker-item {
background-color: #000;
}
.ql-code-block-container {
position: relative;
}
.ql-code-block-container .ql-ui {
right: 5px;
top: 5px;
}
.ql-bubble .ql-toolbar .ql-formats {
margin: 8px 12px 8px 0px;
}
@@ -950,3 +969,4 @@
.ql-container.ql-bubble:not(.ql-disabled) a:hover::after {
visibility: visible;
}

View File

@@ -1,5 +1,5 @@
/*!
* Quill Editor v1.3.6
* Quill Editor v2.0.0-dev.3
* https://quilljs.com/
* Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com
@@ -15,8 +15,9 @@
.ql-container.ql-disabled .ql-tooltip {
visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
pointer-events: none;
.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
cursor: pointer;
}
.ql-clipboard {
left: -100000px;
@@ -31,6 +32,7 @@
}
.ql-editor {
box-sizing: border-box;
counter-reset: list-0;
line-height: 1.42;
height: 100%;
outline: none;
@@ -47,7 +49,6 @@
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
@@ -58,144 +59,135 @@
.ql-editor h6 {
margin: 0;
padding: 0;
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
.ql-editor p,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor table {
border-collapse: collapse;
}
.ql-editor td {
border: 1px solid #000;
padding: 2px 5px;
}
.ql-editor ol {
padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
.ql-editor li {
list-style-type: none;
padding-left: 1.5em;
position: relative;
}
.ql-editor ul > li::before {
content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
color: #777;
cursor: pointer;
pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
content: '\2610';
}
.ql-editor li::before {
.ql-editor li > .ql-ui:before {
display: inline-block;
white-space: nowrap;
width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
margin-left: -1.5em;
margin-right: 0.3em;
text-align: right;
white-space: nowrap;
width: 1.2em;
}
.ql-editor li.ql-direction-rtl::before {
margin-left: 0.3em;
margin-right: -1.5em;
.ql-editor li[data-list=checked] > .ql-ui,
.ql-editor li[data-list=unchecked] > .ql-ui {
color: #777;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
padding-left: 1.5em;
.ql-editor li[data-list=bullet] > .ql-ui:before {
content: '\2022';
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
padding-right: 1.5em;
.ql-editor li[data-list=checked] > .ql-ui:before {
content: '\2611';
}
.ql-editor ol li {
.ql-editor li[data-list=unchecked] > .ql-ui:before {
content: '\2610';
}
.ql-editor li[data-list=ordered] {
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
counter-increment: list-0;
}
.ql-editor ol li:before {
.ql-editor li[data-list=ordered] > .ql-ui:before {
content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
.ql-editor li[data-list=ordered].ql-indent-1 {
counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
.ql-editor li[data-list=ordered].ql-indent-1 {
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
.ql-editor li[data-list=ordered].ql-indent-2 {
counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
.ql-editor li[data-list=ordered].ql-indent-2 {
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
.ql-editor li[data-list=ordered].ql-indent-3 {
counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
.ql-editor li[data-list=ordered].ql-indent-3 {
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
.ql-editor li[data-list=ordered].ql-indent-4 {
counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
.ql-editor li[data-list=ordered].ql-indent-4 {
counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
.ql-editor li[data-list=ordered].ql-indent-5 {
counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
.ql-editor li[data-list=ordered].ql-indent-5 {
counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
.ql-editor li[data-list=ordered].ql-indent-6 {
counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
.ql-editor li[data-list=ordered].ql-indent-6 {
counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
.ql-editor li[data-list=ordered].ql-indent-7 {
counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
.ql-editor li[data-list=ordered].ql-indent-7 {
counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
.ql-editor li[data-list=ordered].ql-indent-8 {
counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
.ql-editor li[data-list=ordered].ql-indent-8 {
counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
.ql-editor li[data-list=ordered].ql-indent-9 {
counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
@@ -306,6 +298,24 @@
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
padding-right: 28.5em;
}
.ql-editor li.ql-direction-rtl {
padding-right: 1.5em;
}
.ql-editor li.ql-direction-rtl > .ql-ui:before {
margin-left: 0.3em;
margin-right: -1.5em;
text-align: left;
}
.ql-editor table {
table-layout: fixed;
width: 100%;
}
.ql-editor table td {
outline: none;
}
.ql-editor .ql-code-block-container {
font-family: monospace;
}
.ql-editor .ql-video {
display: block;
max-width: 100%;
@@ -386,6 +396,9 @@
.ql-editor .ql-align-right {
text-align: right;
}
.ql-editor .ql-ui {
position: absolute;
}
.ql-editor.ql-blank::before {
color: rgba(0,0,0,0.6);
content: attr(data-placeholder);
@@ -395,3 +408,4 @@
position: absolute;
right: 15px;
}

View File

@@ -1,5 +1,5 @@
/*!
* Quill Editor v1.3.6
* Quill Editor v2.0.0-dev.3
* https://quilljs.com/
* Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com
@@ -15,8 +15,9 @@
.ql-container.ql-disabled .ql-tooltip {
visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
pointer-events: none;
.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,
.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui {
cursor: pointer;
}
.ql-clipboard {
left: -100000px;
@@ -31,6 +32,7 @@
}
.ql-editor {
box-sizing: border-box;
counter-reset: list-0;
line-height: 1.42;
height: 100%;
outline: none;
@@ -47,7 +49,6 @@
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
@@ -58,144 +59,135 @@
.ql-editor h6 {
margin: 0;
padding: 0;
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
.ql-editor p,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor table {
border-collapse: collapse;
}
.ql-editor td {
border: 1px solid #000;
padding: 2px 5px;
}
.ql-editor ol {
padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
.ql-editor li {
list-style-type: none;
padding-left: 1.5em;
position: relative;
}
.ql-editor ul > li::before {
content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
color: #777;
cursor: pointer;
pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
content: '\2610';
}
.ql-editor li::before {
.ql-editor li > .ql-ui:before {
display: inline-block;
white-space: nowrap;
width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
margin-left: -1.5em;
margin-right: 0.3em;
text-align: right;
white-space: nowrap;
width: 1.2em;
}
.ql-editor li.ql-direction-rtl::before {
margin-left: 0.3em;
margin-right: -1.5em;
.ql-editor li[data-list=checked] > .ql-ui,
.ql-editor li[data-list=unchecked] > .ql-ui {
color: #777;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
padding-left: 1.5em;
.ql-editor li[data-list=bullet] > .ql-ui:before {
content: '\2022';
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
padding-right: 1.5em;
.ql-editor li[data-list=checked] > .ql-ui:before {
content: '\2611';
}
.ql-editor ol li {
.ql-editor li[data-list=unchecked] > .ql-ui:before {
content: '\2610';
}
.ql-editor li[data-list=ordered] {
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
counter-increment: list-0;
}
.ql-editor ol li:before {
.ql-editor li[data-list=ordered] > .ql-ui:before {
content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
.ql-editor li[data-list=ordered].ql-indent-1 {
counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
.ql-editor li[data-list=ordered].ql-indent-1 {
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
.ql-editor li[data-list=ordered].ql-indent-2 {
counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
.ql-editor li[data-list=ordered].ql-indent-2 {
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
.ql-editor li[data-list=ordered].ql-indent-3 {
counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
.ql-editor li[data-list=ordered].ql-indent-3 {
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
.ql-editor li[data-list=ordered].ql-indent-4 {
counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
.ql-editor li[data-list=ordered].ql-indent-4 {
counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
.ql-editor li[data-list=ordered].ql-indent-5 {
counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
.ql-editor li[data-list=ordered].ql-indent-5 {
counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
.ql-editor li[data-list=ordered].ql-indent-6 {
counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
.ql-editor li[data-list=ordered].ql-indent-6 {
counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
.ql-editor li[data-list=ordered].ql-indent-7 {
counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
.ql-editor li[data-list=ordered].ql-indent-7 {
counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
.ql-editor li[data-list=ordered].ql-indent-8 {
counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
.ql-editor li[data-list=ordered].ql-indent-8 {
counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
.ql-editor li[data-list=ordered].ql-indent-9 {
counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
@@ -306,6 +298,24 @@
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
padding-right: 28.5em;
}
.ql-editor li.ql-direction-rtl {
padding-right: 1.5em;
}
.ql-editor li.ql-direction-rtl > .ql-ui:before {
margin-left: 0.3em;
margin-right: -1.5em;
text-align: left;
}
.ql-editor table {
table-layout: fixed;
width: 100%;
}
.ql-editor table td {
outline: none;
}
.ql-editor .ql-code-block-container {
font-family: monospace;
}
.ql-editor .ql-video {
display: block;
max-width: 100%;
@@ -386,6 +396,9 @@
.ql-editor .ql-align-right {
text-align: right;
}
.ql-editor .ql-ui {
position: absolute;
}
.ql-editor.ql-blank::before {
color: rgba(0,0,0,0.6);
content: attr(data-placeholder);
@@ -619,12 +632,11 @@
padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
.ql-snow .ql-editor .ql-code-block-container {
background-color: #f0f0f0;
border-radius: 3px;
}
.ql-snow .ql-editor pre {
white-space: pre-wrap;
.ql-snow .ql-editor .ql-code-block-container {
margin-bottom: 5px;
margin-top: 5px;
padding: 5px 10px;
@@ -633,7 +645,7 @@
font-size: 85%;
padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
.ql-snow .ql-editor .ql-code-block-container {
background-color: #23241f;
color: #f8f8f2;
overflow: visible;
@@ -845,6 +857,13 @@
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
background-color: #000;
}
.ql-code-block-container {
position: relative;
}
.ql-code-block-container .ql-ui {
right: 5px;
top: 5px;
}
.ql-toolbar.ql-snow {
border: 1px solid #ccc;
box-sizing: border-box;
@@ -943,3 +962,4 @@
.ql-container.ql-snow {
border: 1px solid #ccc;
}