Insert correction panel using JS and add editor IDs to support multiple editors

This commit is contained in:
2024-02-07 11:13:32 +01:00
parent 09be0aec88
commit 494107bafb
2 changed files with 108 additions and 10 deletions

View File

@@ -9,15 +9,19 @@
<script src="popup.js"></script>
</head>
<body>
<!--<div class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
<div class="bes-online-editor" contenteditable="true"></div>
<div class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div></div>
<div class="bes-online-editor" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<div class="bes-online-editor" contenteditable="true">To je preiskus.</div>-->
<!-- <div class="bes-online-editor" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div> -->
<!-- TODO: Insert correction-panel in DOM with JavaScript and include editor ID in its ID to support multiple editors. -->
<div id="correction-panel"></div>
<div class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<!--<div id='ed1' class="bes-online-editor" contenteditable="true">Tukaj vpišite besedilo ki ga želite popraviti.</div>
<br>
<div id='ed2' class="bes-online-editor" contenteditable="true"></div>
<br>
<div id='ed3' class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div></div>
<br>
<div id='ed4' class="bes-online-editor" contenteditable="true"><div>Popravite <a href=".">kar želite</a>.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<br>-->
<div id='ed5' class="bes-online-editor" contenteditable="true">To je preiskus.</div>
<br>
<!-- <div id='ed6' class="bes-online-editor" contenteditable="true"><div class="contextual"><p>Madžarski premier Orban je tako očitno vendarle pristal na nadaljnjo makrofinančno pomoč Ukrajini v okviru revizije dolgoročnega proračuna unije 2021-2027. Ta vključuje 50 milijard evrov za Ukrajino za prihodnja štiri leta, od tega 33 milijard evrov posojil in 17 milijard evrov nepovratnih sredstev.</p></div></div>
<br>-->
<div id="ed7" class="bes-online-editor" contenteditable="true"><div>Popravite kar želite.</div><div>Na mizo nisem položil knjigo. Popravite kar želite.</div></div>
<bes-popup-el></bes-popup-el>
</body>
</html>
@@ -36,4 +40,69 @@
font-family: Arial, Helvetica, sans-serif;
z-index: 2;
}
.bes-correction-panel-parent {
direction: ltr !important;
z-index: auto !important;
float: left !important;
display: inline !important;
width: 0 !important;
height: 0 !important;
top: 0 !important;
left: 0 !important;
position: relative !important;
overflow: visible !important;
visibility: visible !important;
}
.bes-correction-panel {
animation: none !important;
background: transparent !important;
border: none !important;
box-shadow: initial !important;
box-sizing: initial !important;
color: transparent !important;
cursor: initial !important;
display: block !important;
float: initial !important;
font-family: initial !important;
font-feature-settings: initial !important;
font-kerning: initial !important;
font-language-override: initial !important;
font-size: initial !important;
font-size-adjust: initial !important;
font-stretch: initial !important;
font-style: initial !important;
font-synthesis: initial !important;
font-variant: initial !important;
font-variant-alternates: initial !important;
font-variant-caps: initial !important;
font-variant-east-asian: initial !important;
font-variant-ligatures: initial !important;
font-variant-numeric: initial !important;
font-variant-position: initial !important;
font-weight: initial !important;
hyphens: initial !important;
letter-spacing: initial !important;
line-break: initial !important;
line-height: initial !important;
margin: 0 !important;
max-height: initial !important;
min-height: initial !important;
max-width: initial !important;
min-width: initial !important;
outline: initial !important;
overflow: hidden !important;
padding: 0 !important;
pointer-events: none !important;
position: relative !important;
text-align: initial !important;
text-decoration: initial !important;
text-indent: initial !important;
text-shadow: initial !important;
text-transform: initial !important;
white-space: initial !important;
word-spacing: initial !important;
}
</style>