Remplacer simpleMDE par un éditeur maison #110
|
@ -51,16 +51,24 @@
|
|||
position: absolute;
|
||||
left: 0px;
|
||||
width: auto;
|
||||
min-width: 30vw;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
right: inherit;
|
||||
background-image: none;
|
||||
background-color: #161819;
|
||||
border-color: #3a3f42;
|
||||
border-radius: .4rem;
|
||||
background: var(--background-hover);
|
||||
border: var(--border);
|
||||
color: var(--text);
|
||||
padding: .2rem;
|
||||
top: 3.2rem;
|
||||
z-index: 100;
|
||||
list-style-position: initial;
|
||||
list-style-type: none;
|
||||
}
|
||||
.editor .modal > div {
|
||||
margin: 0.8rem;
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.editor .modal > div label {
|
||||
margin-top: 0.4rem;
|
||||
}
|
|
@ -23,6 +23,7 @@
|
|||
.form input[type='date'],
|
||||
.form input[type='password'],
|
||||
.form input[type='search'],
|
||||
.form input[type='url'],
|
||||
.form textarea,
|
||||
.form select {
|
||||
display: block;
|
||||
|
@ -38,6 +39,7 @@
|
|||
.form input[type='date']:focus,
|
||||
.form input[type='password']:focus,
|
||||
.form input[type='search']:focus,
|
||||
.form input[type='url']:focus,
|
||||
.form textarea:focus,
|
||||
.form select:focus {
|
||||
border-color: var(--border-focused);
|
||||
|
@ -48,6 +50,7 @@
|
|||
.form input[type='date']:focus-within,
|
||||
.form input[type='password']:focus-within,
|
||||
.form input[type='search']:focus-within,
|
||||
.form input[type='url']:focus-within,
|
||||
.form textarea:focus-within,
|
||||
.form select:focus-within {
|
||||
outline: none;
|
||||
|
|
|
@ -64,19 +64,29 @@
|
|||
position: absolute;
|
||||
left: 0px;
|
||||
width: auto;
|
||||
min-width: 30vw;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
right: inherit;
|
||||
|
||||
background-image: none;
|
||||
background-color: rgb(22, 24, 25);
|
||||
border-color: rgb(58, 63, 66);
|
||||
border-radius: .4rem;
|
||||
background: var(--background-hover);
|
||||
border: var(--border);
|
||||
color: var(--text);
|
||||
padding: .2rem;
|
||||
top: 3.2rem;
|
||||
z-index: 100;
|
||||
list-style-position: initial;
|
||||
list-style-type: none;
|
||||
|
||||
& > div {
|
||||
margin: 0.8rem;
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
label {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -32,6 +32,7 @@
|
|||
input[type='date'],
|
||||
input[type='password'],
|
||||
input[type='search'],
|
||||
input[type='url'],
|
||||
textarea,
|
||||
select {
|
||||
display: block;
|
||||
|
|
|
@ -112,13 +112,16 @@ function editor_clear_modals(event, close = true) {
|
|||
for (const i of modals) {i.style.display = 'none'};
|
||||
}
|
||||
|
||||
function editor_insert_link(event, link, text = "", image = false)
|
||||
function editor_insert_link(event, link_id, text_id, image = false)
|
||||
{
|
||||
const [editor, button, ta] = editor_event_source(event);
|
||||
ta.focus();
|
||||
let indexStart = ta.selectionStart;
|
||||
let indexEnd = ta.selectionEnd;
|
||||
|
||||
const link = document.getElementById(link_id).value;
|
||||
const text = document.getElementById(text_id).value;
|
||||
|
||||
editor_clear_modals(event);
|
||||
|
||||
let [start, end] = editor_replace_range(ta, indexStart, indexEnd,
|
||||
|
|
|
@ -115,7 +115,7 @@
|
|||
<input type="url" id="link-link-input" name="link-link-input">
|
||||
</div>
|
||||
<div>
|
||||
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, document.getElementById('link-link-input').value, document.getElementById('link-desc-input').value)">Valider</a>
|
||||
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, 'link-link-input', 'link-desc-input')">Valider</a>
|
||||
<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -132,7 +132,7 @@
|
|||
<input type="url" id="img-link-input" name="img-link-input">
|
||||
</div>
|
||||
<div>
|
||||
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, document.getElementById('img-link-input').value, document.getElementById('img-alt-input').value, true)">Valider</a>
|
||||
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, 'img-link-input', 'img-alt-input', true)">Valider</a>
|
||||
<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue