mirror of https://github.com/logos-co/open-law.git
Merge pull request #55 from Simple2B/svyat/feat/quill_readonly
Fix quill readonly
This commit is contained in:
Костя Столярский
GitHub
commit
ee797b850f
|
|
@ -0,0 +1,413 @@
|
|||
.ql-container.ql-disabled .ql-editor-readonly ul[data-checked] > li::before {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ql-editor-readonly {
|
||||
box-sizing: border-box;
|
||||
line-height: 1.42;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
padding: 12px 15px;
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 4;
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.ql-editor-readonly > * {
|
||||
cursor: text;
|
||||
}
|
||||
.ql-editor-readonly p,
|
||||
.ql-editor-readonly ol,
|
||||
.ql-editor-readonly ul,
|
||||
.ql-editor-readonly pre,
|
||||
.ql-editor-readonly blockquote,
|
||||
.ql-editor-readonly h1,
|
||||
.ql-editor-readonly h2,
|
||||
.ql-editor-readonly h3,
|
||||
.ql-editor-readonly h4,
|
||||
.ql-editor-readonly h5,
|
||||
.ql-editor-readonly 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-readonly ol,
|
||||
.ql-editor-readonly ul {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.ql-editor-readonly ol > li,
|
||||
.ql-editor-readonly ul > li {
|
||||
list-style-type: none;
|
||||
}
|
||||
.ql-editor-readonly ul > li::before {
|
||||
content: '\2022';
|
||||
}
|
||||
.ql-editor-readonly ul[data-checked='true'],
|
||||
.ql-editor-readonly ul[data-checked='false'] {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ql-editor-readonly ul[data-checked='true'] > li *,
|
||||
.ql-editor-readonly ul[data-checked='false'] > li * {
|
||||
pointer-events: all;
|
||||
}
|
||||
.ql-editor-readonly ul[data-checked='true'] > li::before,
|
||||
.ql-editor-readonly ul[data-checked='false'] > li::before {
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
.ql-editor-readonly ul[data-checked='true'] > li::before {
|
||||
content: '\2611';
|
||||
}
|
||||
.ql-editor-readonly ul[data-checked='false'] > li::before {
|
||||
content: '\2610';
|
||||
}
|
||||
.ql-editor-readonly li::before {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
width: 1.2em;
|
||||
}
|
||||
.ql-editor-readonly li:not(.ql-direction-rtl)::before {
|
||||
margin-left: -1.5em;
|
||||
margin-right: 0.3em;
|
||||
text-align: right;
|
||||
}
|
||||
.ql-editor-readonly li.ql-direction-rtl::before {
|
||||
margin-left: 0.3em;
|
||||
margin-right: -1.5em;
|
||||
}
|
||||
.ql-editor-readonly ol li:not(.ql-direction-rtl),
|
||||
.ql-editor-readonly ul li:not(.ql-direction-rtl) {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-direction-rtl,
|
||||
.ql-editor-readonly ul li.ql-direction-rtl {
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
.ql-editor-readonly ol li {
|
||||
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-readonly ol li:before {
|
||||
content: counter(list-0, decimal) '. ';
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-1 {
|
||||
counter-increment: list-1;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-1:before {
|
||||
content: counter(list-1, lower-alpha) '. ';
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-1 {
|
||||
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-2 {
|
||||
counter-increment: list-2;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-2:before {
|
||||
content: counter(list-2, lower-roman) '. ';
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-2 {
|
||||
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-3 {
|
||||
counter-increment: list-3;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-3:before {
|
||||
content: counter(list-3, decimal) '. ';
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-3 {
|
||||
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-4 {
|
||||
counter-increment: list-4;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-4:before {
|
||||
content: counter(list-4, lower-alpha) '. ';
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-4 {
|
||||
counter-reset: list-5 list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-5 {
|
||||
counter-increment: list-5;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-5:before {
|
||||
content: counter(list-5, lower-roman) '. ';
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-5 {
|
||||
counter-reset: list-6 list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-6 {
|
||||
counter-increment: list-6;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-6:before {
|
||||
content: counter(list-6, decimal) '. ';
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-6 {
|
||||
counter-reset: list-7 list-8 list-9;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-7 {
|
||||
counter-increment: list-7;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-7:before {
|
||||
content: counter(list-7, lower-alpha) '. ';
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-7 {
|
||||
counter-reset: list-8 list-9;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-8 {
|
||||
counter-increment: list-8;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-8:before {
|
||||
content: counter(list-8, lower-roman) '. ';
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-8 {
|
||||
counter-reset: list-9;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-9 {
|
||||
counter-increment: list-9;
|
||||
}
|
||||
.ql-editor-readonly ol li.ql-indent-9:before {
|
||||
content: counter(list-9, decimal) '. ';
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-1:not(.ql-direction-rtl) {
|
||||
padding-left: 3em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-1:not(.ql-direction-rtl) {
|
||||
padding-left: 4.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 3em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-1.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 4.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-2:not(.ql-direction-rtl) {
|
||||
padding-left: 6em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-2:not(.ql-direction-rtl) {
|
||||
padding-left: 7.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 6em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-2.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 7.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-3:not(.ql-direction-rtl) {
|
||||
padding-left: 9em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-3:not(.ql-direction-rtl) {
|
||||
padding-left: 10.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 9em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-3.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 10.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-4:not(.ql-direction-rtl) {
|
||||
padding-left: 12em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-4:not(.ql-direction-rtl) {
|
||||
padding-left: 13.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 12em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-4.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 13.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-5:not(.ql-direction-rtl) {
|
||||
padding-left: 15em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-5:not(.ql-direction-rtl) {
|
||||
padding-left: 16.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 15em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-5.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 16.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-6:not(.ql-direction-rtl) {
|
||||
padding-left: 18em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-6:not(.ql-direction-rtl) {
|
||||
padding-left: 19.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 18em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-6.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 19.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-7:not(.ql-direction-rtl) {
|
||||
padding-left: 21em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-7:not(.ql-direction-rtl) {
|
||||
padding-left: 22.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 21em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-7.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 22.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-8:not(.ql-direction-rtl) {
|
||||
padding-left: 24em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-8:not(.ql-direction-rtl) {
|
||||
padding-left: 25.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 24em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-8.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 25.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-9:not(.ql-direction-rtl) {
|
||||
padding-left: 27em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-9:not(.ql-direction-rtl) {
|
||||
padding-left: 28.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 27em;
|
||||
}
|
||||
.ql-editor-readonly li.ql-indent-9.ql-direction-rtl.ql-align-right {
|
||||
padding-right: 28.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.ql-editor-readonly .ql-video.ql-align-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ql-editor-readonly .ql-video.ql-align-right {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
.ql-editor-readonly .ql-bg-black {
|
||||
background-color: #000;
|
||||
}
|
||||
.ql-editor-readonly .ql-bg-red {
|
||||
background-color: #e60000;
|
||||
}
|
||||
.ql-editor-readonly .ql-bg-orange {
|
||||
background-color: #f90;
|
||||
}
|
||||
.ql-editor-readonly .ql-bg-yellow {
|
||||
background-color: #ff0;
|
||||
}
|
||||
.ql-editor-readonly .ql-bg-green {
|
||||
background-color: #008a00;
|
||||
}
|
||||
.ql-editor-readonly .ql-bg-purple {
|
||||
background-color: #93f;
|
||||
}
|
||||
.ql-editor-readonly .ql-color-white {
|
||||
color: #fff;
|
||||
}
|
||||
.ql-editor-readonly .ql-color-red {
|
||||
color: #e60000;
|
||||
}
|
||||
.ql-editor-readonly .ql-color-orange {
|
||||
color: #f90;
|
||||
}
|
||||
.ql-editor-readonly .ql-color-yellow {
|
||||
color: #ff0;
|
||||
}
|
||||
.ql-editor-readonly .ql-color-green {
|
||||
color: #008a00;
|
||||
}
|
||||
.ql-editor-readonly .ql-color-purple {
|
||||
color: #93f;
|
||||
}
|
||||
.ql-editor-readonly .ql-font-serif {
|
||||
font-family: Georgia, Times New Roman, serif;
|
||||
}
|
||||
.ql-editor-readonly .ql-font-monospace {
|
||||
font-family: Monaco, Courier New, monospace;
|
||||
}
|
||||
.ql-editor-readonly .ql-size-small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.ql-editor-readonly .ql-size-large {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-size-huge {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.ql-editor-readonly .ql-direction-rtl {
|
||||
direction: rtl;
|
||||
text-align: inherit;
|
||||
}
|
||||
.ql-editor-readonly .ql-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
.ql-editor-readonly .ql-align-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
.ql-editor-readonly .ql-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
.ql-editor-readonly.ql-blank::before {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
content: attr(data-placeholder);
|
||||
font-style: italic;
|
||||
left: 15px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly h3 {
|
||||
font-size: 1.17em;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly h5 {
|
||||
font-size: 0.83em;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly h6 {
|
||||
font-size: 0.67em;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly blockquote {
|
||||
border-left: 4px solid #ccc;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly code,
|
||||
.ql-snow .ql-editor-readonly pre {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly pre {
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly code {
|
||||
font-size: 85%;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly pre.ql-syntax {
|
||||
background-color: #23241f;
|
||||
color: #f8f8f2;
|
||||
overflow: visible;
|
||||
}
|
||||
.ql-snow .ql-editor-readonly img {
|
||||
max-width: 100%;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,8 @@
|
|||
<!-- prettier-ignore -->
|
||||
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" />
|
||||
<!-- prettier-ignore -->
|
||||
<link href="{{ url_for('static', filename='css/quill_readonly.snow.css') }}" rel="stylesheet" />
|
||||
<!-- prettier-ignore -->
|
||||
<link href="{{ url_for('static', filename='css/quill.snow.css') }}" rel="stylesheet" />
|
||||
<script>
|
||||
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
|
||||
|
|
|
|||
|
|
@ -34,6 +34,22 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="myTabContent" class="mt-40">
|
||||
<!-- prettier-ignore -->
|
||||
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="section-text" role="tabpanel" aria-labelledby="text-tab">
|
||||
<dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
|
||||
<div class="flex flex-col w-full">
|
||||
<!-- prettier-ignore -->
|
||||
<dt class="flex w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
|
||||
<div class="ql-snow">
|
||||
<div class="ql-editor-readonly">
|
||||
{{ section.about|safe }}
|
||||
</div>
|
||||
</div>
|
||||
</dt>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="interpretation" role="tabpanel" aria-labelledby="interpretation-tab">
|
||||
{% if not current_user.is_authenticated %}
|
||||
|
|
@ -71,7 +87,8 @@
|
|||
<div class="p-6 pt-0 space-y-6">
|
||||
<div class="w-full max-w-6xl mx-auto rounded-xl bg-gray-50 dark:bg-gray-600 shadow-lg text-white-900">
|
||||
<div class="overflow-hidden rounded-md bg-gray-50 [&>*]:dark:bg-gray-600 text-black [&>*]:!border-none [&>*]:!stroke-black dark:text-white dark:[&>*]:!stroke-white">
|
||||
<div id="interpretation-text" class="quill-editor dark:text-white h-64"></div>
|
||||
<div id="interpretation-text" class="quill-editor dark:text-white h-64">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,7 +170,7 @@
|
|||
</svg>
|
||||
<span>{{ section.label }}</span>
|
||||
</a>
|
||||
<div class="dark:text-white h-30 ql-editor">
|
||||
<div class="dark:text-white h-30 ql-editor-readonly">
|
||||
<p>{{ interpretation.text|safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<h1 class="text-l font-extrabold dark:text-white ml-4 truncate">
|
||||
{{ interpretation.label }}
|
||||
</h1>
|
||||
<div class="quill-editor text-lg dark:text-white p-3">{{interpretation.text|safe}}</div>
|
||||
<div class="ql-editor-readonly text-lg dark:text-white p-3">{{interpretation.text|safe}}</div>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<!-- prettier-ignore -->
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
{% include 'book/local_breadcrumbs_navigation.html'%}
|
||||
<p>{{ interpretation.section.label }}</p>
|
||||
</a>
|
||||
<div class="dark:text-white h-30 ql-editor">
|
||||
<div class="dark:text-white h-30 ql-editor-readonly">
|
||||
<p>{{ interpretation.text|safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
{% include 'book/local_breadcrumbs_navigation.html'%}
|
||||
<p>{{ interpretation.section.label }}</p>
|
||||
</a>
|
||||
<div class="dark:text-white h-30 ql-editor">
|
||||
<div class="dark:text-white h-30 ql-editor-readonly">
|
||||
<p>{{ interpretation.text|safe }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,30 @@
|
|||
const Quill = require('./quill');
|
||||
|
||||
export function initQuill() {
|
||||
var icons = Quill.import('ui/icons');
|
||||
// prettier-ignore
|
||||
icons.header['false'] = '<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000"viewBox="-8 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3z"/></svg>';
|
||||
icons.header[1] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-5 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm9.52.779H10V3h3.36v7h-1.84V4.779z"/></svg>`;
|
||||
icons.header[2] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4.5 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm12.88 4.352V10H10V8.986l.1-.246 1.785-1.913c.43-.435.793-.77.923-1.011.124-.23.182-.427.182-.587 0-.14-.04-.242-.127-.327a.469.469 0 0 0-.351-.127.443.443 0 0 0-.355.158c-.105.117-.165.288-.173.525l-.012.338h-1.824l.016-.366c.034-.735.272-1.33.718-1.77.446-.44 1.02-.66 1.703-.66.424 0 .805.091 1.14.275.336.186.606.455.806.8.198.343.3.7.3 1.063 0 .416-.23.849-.456 1.307-.222.45-.534.876-1.064 1.555l-.116.123-.254.229h1.938z"/></svg>`;
|
||||
icons.header[3] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4.5 -6.5 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm12.453 2.513l.043.055c.254.334.38.728.38 1.172 0 .637-.239 1.187-.707 1.628-.466.439-1.06.658-1.763.658-.671 0-1.235-.209-1.671-.627-.436-.418-.673-.983-.713-1.676L10 7.353h1.803l.047.295c.038.238.112.397.215.49.1.091.23.137.402.137a.566.566 0 0 0 .422-.159.5.5 0 0 0 .158-.38c0-.163-.067-.295-.224-.419-.17-.134-.438-.21-.815-.215l-.345-.004v-1.17l.345-.004c.377-.004.646-.08.815-.215.157-.124.224-.255.224-.418a.5.5 0 0 0-.158-.381.566.566 0 0 0-.422-.159.568.568 0 0 0-.402.138c-.103.092-.177.251-.215.489l-.047.295H10l.022-.37c.04-.693.277-1.258.713-1.675.436-.419 1-.628 1.67-.628.704 0 1.298.22 1.764.658.468.441.708.991.708 1.629a1.892 1.892 0 0 1-.424 1.226z"/></svg>`;
|
||||
icons.header[4] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4.5 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm10.636 4.74H10V7.302l.06-.198 2.714-4.11h1.687v3.952h.538V8.74h-.538V10h-1.825V8.74zm.154-1.283V5.774l-1.1 1.683h1.1z"/></svg>`;
|
||||
icons.header[5] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4 -6.5 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm8.003 4.317h2.68c.386 0 .699-.287.699-.642 0-.355-.313-.642-.698-.642H10.01l.002-.244L10 3h5.086v1.888h-3.144l.014.617h1.114c1.355 0 2.469.984 2.523 2.23.052 1.21-.972 2.231-2.288 2.28l-.095.001-3.21-.02V8.73l.003-.414z"/></svg>`;
|
||||
icons.header[6] = `<svg style="scale: 1.6;" xmlns="http://www.w3.org/2000/svg" fill="#000000" viewBox="-4.5 -7 24 24" preserveAspectRatio="xMinYMin"><path d="M2 4h4V1a1 1 0 1 1 2 0v8a1 1 0 1 1-2 0V6H2v3a1 1 0 1 1-2 0V1a1 1 0 1 1 2 0v3zm11.949 2.057c.43.44.651.999.651 1.64 0 .629-.228 1.18-.67 1.62-.442.437-.99.663-1.613.663a2.212 2.212 0 0 1-1.649-.693c-.43-.45-.652-.985-.652-1.58 0-.224.034-.449.1-.672.063-.211.664-1.627.837-1.966.251-.491.65-1.204 1.197-2.137l1.78.652-.917 1.88c.249.113.733.386.936.593zm-1.63.765a.85.85 0 0 0-.858.863.85.85 0 0 0 .252.613.865.865 0 0 0 1.48-.614.844.844 0 0 0-.25-.611.866.866 0 0 0-.623-.251z"/></svg>`;
|
||||
|
||||
var toolbarOptions = [
|
||||
['bold', 'italic', 'underline'],
|
||||
[{list: 'ordered'}, {list: 'bullet'}],
|
||||
[{header: [1, 2, 3, 4, 5, 6, false]}],
|
||||
[{indent: '-1'}, {indent: '+1'}],
|
||||
['clean'],
|
||||
[
|
||||
{header: false},
|
||||
{header: 1},
|
||||
{header: 2},
|
||||
{header: 3},
|
||||
{header: 4},
|
||||
{header: 5},
|
||||
{header: 6},
|
||||
],
|
||||
];
|
||||
const qlEditors: NodeListOf<HTMLElement> =
|
||||
document.querySelectorAll('.quill-editor');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
export function initQuillReadOnly() {
|
||||
const readonlyQls = document.querySelectorAll('.ql-editor-readonly');
|
||||
|
||||
readonlyQls.forEach(el => {
|
||||
const ql = el.querySelector('.ql-editor');
|
||||
if (ql) {
|
||||
ql.removeAttribute('contenteditable');
|
||||
|
||||
ql.classList.remove('ql-editor');
|
||||
ql.classList.add('ql-editor-readonly');
|
||||
}
|
||||
|
||||
const qlTooltip = el.querySelector('.ql-tooltip');
|
||||
if (qlTooltip) {
|
||||
qlTooltip.remove();
|
||||
}
|
||||
|
||||
const qlClipboard = el.querySelector('.ql-clipboard');
|
||||
if (qlClipboard) {
|
||||
qlClipboard.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -8,7 +8,9 @@ import {initVote} from './vote';
|
|||
import {initTheme} from './theme';
|
||||
import {initApprove} from './approve';
|
||||
import {initStar} from './star';
|
||||
import {initQuillReadOnly} from './initQuillReadOnly';
|
||||
|
||||
initQuillReadOnly();
|
||||
initBooks();
|
||||
initContributors();
|
||||
initQuill();
|
||||
|
|
|
|||
Loading…
Reference in New Issue