Monocons-Icons in der Toolbar des SCEditors

Question

Ich möchte in meiner Befragung ein offenes Textfeld verwenden, bei dem die Teilnehmer:innen den Text auch bearbeiten können. Dazu habe ich einen SCEditor eingebunden. Ich hätte gerne, dass in der Toolbar Icons (monocons) verwendet werden.

Dabei habe ich mich an die Anleitung unter https://www.sceditor.com/ (mit xhtml) gehalten. Zusätzlich habe ich monocons.js als script eingebunden und im Konstruktor icons: 'monocons' hinzugefügt.

Trotzdem tauchen die Icons nicht in der Toolbar auf, sondern es werden Wörter (z.B. Bold) verwendet.

Wo könnte ich denn einen Fehler gemacht haben?

Comments

Ich glaube, Sie müssten uns ggs. einmal ihren Code und einen Pre- Testlink zur Verfügung stellen (direkt auf die angesprochene Seite). Sonst ist eine Fehlersuche schwierig.

---

Das wäre der Code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sceditor@3/minified/themes/default.min.css" />
<script src="https://cdn.jsdelivr.net/npm/sceditor@3/minified/sceditor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sceditor@3/minified/formats/xhtml.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sceditor@3/minified/icons/monocons.min.js"></script>

<script type="text/javascript">
   var textarea = document.getElementById('EX02_01');
   sceditor.create(textarea, {
    format: 'xhtml',
        icons: 'monocons',
        spellcheck: false,
        toolbar: 'font,size,color|bold,italic,underline|left,center,right|bulletlist,orderedlist|emoticon',
        emoticonsRoot: '../plugins/SCEditor/',
        style: 'https://cdn.jsdelivr.net/npm/sceditor@3/minified/themes/content/default.min.css'
});
</script>

---

Und das wäre der Pretest-Link:

https://www.soscisurvey.de/schreibexperiment/?act=XxzkSsZFEr6ks3qvFku0tglL

---

Was passiert, wenn Sie den Parameter "icons" weglassen, den style wie folgt tauschen und das PlugIn direkt vom Befragungsserver laden (Datenschutz!)?

emoticonsRoot: "../plugins/SCEditor/",
style: "../plugins/SCEditor/minified/themes/default.min.css",

Zum Laden vom Befragungsserver lassen Sie das <link> und <script> oben weg und verwenden stattdessen einen PHP-Code mit folgendem Inhalt

library('SCEditor');

---

Es zeigen sich unverändert keine Icons...
Ich habe auch schon verschiedene Quellen der Stylesheets und Kombinationsmöglichkeiten durchprobiert, immer ohne Erfolg.

---

Würden Sie die externe Einbindung von Quellen dennoch mal abstellen? Aus Datenschutz-Gründen. Außerdem kann ich dann mit der Einbindung unter "Text hinzufügen" -> "Neuer Text" abgleichen, dort werden die Icons nämlich korrekt angezeigt.

---

Ja, ich habe den Code nun wie vorgeschlagen geändert.

---

In Ordnung, hier ist die Lösung:

document.getElementById("EX02_tab").getElementsByTagName("td")[0].classList.remove("text")

Das Problem, für das ist im Moment nur o.g. Workaround habe, welches ich mir aber nochmal im Details ansehen muss: SoSci Survey und der SCEditor verwenden beide die CSS-Klasse "text". Und diese deaktiviert die Icons

---

Vielen herzlichen Dank, jetzt klappt es!

Answer 1

Wir sehen uns das Problem nochmal genauer an.

Die Verwendung einer generischen CSS-Klasse wie "text" ist vom SCEditor und SoSci Survey gleichermaßen nicht optimal. Da lassen wir uns etwas einfallen.

Derweilen hilt der Workaround, die CSS-Klasse mittels JavaScript aus dem HTML-Element zu entfernen. Hier zur Dokumentation nochmal der entsprechende JavaScript-Code aus den Kommentaren (die Kennung EX02 muss man natürlich gegen die Kennung der eigenen Frage austauschen).

document.getElementById("EX02_tab").getElementsByTagName("td")[0].classList.remove("text");