Ansicht Formular im Beitrag und als Menupunkt total unterschiedlich, Joomla 3.10

Hallo zusammen,
da ich dringend einen Nachfolger brauche für "Webdorado Form Maker" (wird nicht mehr weiterentwickelt und ist nicht php8-kompatibel), bin ich nun bei Visforms gelandet und bin mich am einarbeiten.
Nun habe ich ein Darstellungsproblem, denn ich würde meine Formulare gerne in einem Beitrag darstellen.
1. Einbindung in einen Menüpunkt funktioniert wie erwartet:
[url] www.ergebnisliste.de/index.php/teste-ein-formular [/url]
2. Einbindung in einen Beitrag funktioniert nicht wie erwartet, denn das Formular zeigt komische zusätzliche Zeilen an ohne bestimmten Inhalt:
[url] www.ergebnisliste.de/index.php/68-sonsti...-formular-einbindung [/url]
Wie bekomme ich das korrigiert? Die verschiedenen UI-Frameworks habe ich durchgetestet - immer der gleiche Fehler.

Hier mal zwei Screenshots, wo ich das markiert habe:





 

Hallo Volker,

vielen Dank für die tolle Bereitstellung der Fehler!

In den Web-Browser Entwickler-Tools stellt sich das Folgende dar.

A - Im HTML sind 2 <code> Tags zuviel enthalten, die Probleme bei der Anzeige verursachen, da <code> Tags immer mit ihrem eigenen CSS kommen.
Diese <code> Tags werden nicht von Visforms erzeugt.
Sie stammen irgendwo anders her.

Dazu:
1) Hast du im Beitrag auch wirklich nur den Plugin-String eingefügt, und nicht aus Versehen beim Kopieren einen <code> Tag mit eingefügt?
Soll ist etwa: {vfformview}{"formid":"1"}{/vfformview}
Gehe in den Editor, stelle die Ansicht auf den  Mode 'Code' und kontrolliere, was dort tatsächlich steht.
2) Hast du irgendein Plugin am Laufen, welches den Content verändert?
Es gibt Plugins, die mit <code> Tags ganz eigen verfahren und die Tags an andere Stelle verschieben (etwa so: von 'über einem <div>' nach 'in das <div> hinein').

B - Es erscheint in der Konsole der Web-Browser Entwickler-Tools ein Ladefehler:
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: www.ergebnisliste.de/media/com_visforms/....full.bootstrap4.css

Dazu:
1) Existiert in deiner Joomla Instanz folgende Datei.
.../media/com_visforms/css/visforms.full.bootstrap4.css
Falls die Datei fehlt, dann hilft eine Nach-Installation der gleichen Version der freien Basis-Version.

Wichtig für die merkwürdigen Leer-Darstellungen ist vor allem der Punkt A.

Gruß, Ingmar

Hallo Ingmar,
vielen Dank für die schnelle Lösung. "Code-Tag" war der richtige Ansatz. Ich hatte den Text aus Eurer Online-Anleitung raus kopiert und den Tag da wohl "mitgenommen" ohne es zu beachten - jetzt ist mir klar, dass ihr den braucht, damit der Text richtig dargestellt wird. Ich habe mit dem Texteditor den Tag entfernt und alles ist prima.

Die Fehlermeldung kommt wohl daher, dass ich "Bootstrap CSS für Formulare laden" auf JA gesetzt hatte - habe ich jetzt wieder rausgenommen.

Hallo Volker,

prima dass dein Formular auch im Beitrag nun einwandfrei läuft!

Ich möchte gerne verhindern, dass dieser Code-Tag Zuviel-Kopier-Vorgang anderen Nutzer ebenfalls unterläuft.
Das kommt wohl manchmal einfach vor.

Wenn ich den Formel-formatierten Plugin-String, etwa im FireFox in der Dokumentation
docs.joomla-4.visforms.vi-solutions.de/d...add-form-to-article/
- mit der linken Maus-Taste auswähle und dann
- im Maus-Kontext-Menü auf Kopien klicke und dann
- den Text irgendwo einfüge
dann erhalte ich den Code-Tag nicht.
Auch auf andere Kopier-Arten schaffe ich es einfach gar nicht, den Code-Tag mit zu kopieren.

Der Code-Tag ist ja eine HTML-Formatierung und nicht Teil des sichtbaren angezeigten (gerenderten) Textes.

Frage:
Wie hast du denn kopiert (es also geschafft), dass der <code> Tag mit kopiert wurde?

Danke und Gruß, Ingmar

Hallo Ingmar,
ich habe mal experimentiert und wohl den Übertäter gefunden = der TinyMCE-Editor in Joomla
Wenn ich den String in der Doku kopiere und
- beispielsweise im Notepad2 einfüge, dann gibt es keinen Code-Tag = also gut
- in Joomla mit "Editor - keiner" einen neuen Beitrag erstelle und dort einfüge, dann gibt es keinen Code-Tag = alles gut
- in Joomla mit "Editor - TinyMCE" einen neuen Beitrag erstelle und dort einfüge, dann ist der Code-Tag anschließend im Beitrag enthalten. Interessant: mache ich den Beitrag dann mit TinyMCE wieder auf, schalte mit <> in den Quellcode, lösche dann den Tag raus, schallte Quellcode wieder ab, gehe auf speichern-und-schließen, dann wird der Tag nicht erneut eingefügt.
Die Interpretation überlasse ich Dir.

Hallo Volker,

herzlichen Dank für dein Experiment und die erfolgreiche Ermittlung des Übeltäters!
Ich werde die Dokumentation an den betroffenen Stellen um einen Hinweis erweitern (Plugin-String und ähnliche Stellen).

Ich habe dazu einen Issue zur Entwicklung für die Wunschliste angelegt:
Issue [VF-696] Forum: Docu: Add: Notice using TinyMCE-Editor while copy&paste of plugin-string examples (invalide <code> tag inserted)
Vielen Dank nochmals für deinen Beitrag!

Wenn wir das neue Feature releasen, wirst du explizit über das Release hier im Thema informiert.

Zur Interpretation:
Ich habe ebenfalls mal experimentiert.
Vier mal Paste von unterschiedlichen Texten.
Hier die Einträge, die TinyMCE erzeugt hat, in der Code-Anzeige.

1. <p>Paste Plugin - TinyMCE</p>
2. <h3 class="LC20lb MBeuO DKV0Md">Paste Plugin - TinyMCE</h3>
3. <pre><code>{vfformview}{"formid":"1"}{/vfformview}</code><br /><br /></pre>
4. <pre><code>{vfformview}{"mein-erster-name":"mein erster wert","mein-zweiter-name":"mein zweiter wert"}{/vfformview}</code></pre>

1. Paste mit: ctrl + shift + V
2. Paste mit: ctrl + V
3. Paste mit: ctrl + V
4. Paste mit: ctrl + V

Kleines Fazit:
Es hängt vom konkreten Text ab, was genau an HTML erzeugt wird.
Das <pre><code> ist schon eine Menge an zusätzlichen Tags und recht schadhaft für die Anzeige des Formulars.

Gruß, Ingmar