#1 4. Februar 2014 Hallo, ich suche eine Möglichkeit das hier zu relisieren: Funschild Konfigurator Jedoch erst mal komplett ohne CMS. Später muss es aber auch im CMS funktionieren und auch ins Backend übergeben werden können. Wie würdet ihr das umsetzen? + Multi-Zitat Zitieren
#2 4. Februar 2014 AW: Funschild-Creator Also ich denke du möchtest das selbst machen? Naja dann fang mal damit an, wenn du Probleme bei der Entwicklung hast, kannst du diese ja hier posten. Dafür brauchst du Kenntnisse in: JS, PHP, HMTL/CSS + Multi-Zitat Zitieren
#3 4. Februar 2014 Zuletzt von einem Moderator bearbeitet: 15. April 2017 AW: Funschild-Creator habe schon angefangen, wollte nur unabhängige antworten, wie ihr das angehen würdet. aber hier mal was ich habe. Des Weiteren habe ich mir ein CSS-Sprite erstellt mit allen Motiven. Habe es auch schon mit einer Iconfont versucht, aber hat alles nicht so geklappt wie ich wollte. - - - - - - - - - - Beitrag zusammengefügt - - - - - - - - - - Die Farben änder ich übrigens über JQUERY. Das ist nicht das Problem. Mir gehts hauptsächlich um eine vernünftige Lösung die ICON in das Textfeld zu bekommen und das anständig ans Backend dann später weitergeben zu können. + Multi-Zitat Zitieren
#4 4. Februar 2014 AW: Funschild-Creator Die Seite die du angegeben hast benutzt dafür PHP in Verbindung mit der GD-Lib. PHP: imagecreate - Manual z.B. + Multi-Zitat Zitieren
#5 5. Februar 2014 AW: Funschild-Creator Das ist aber nur für die Anzeige. Glaube nicht, dass das so übergeben wird ins Backend. Ich möchte das auch nicht so machen, da ich alle anderen Schildgernatoren schon in diesem Stil habe. Die Icons sollen in das Textfeld und auch so übergeben werden. Evtl auch mit Ersatzcodes. + Multi-Zitat Zitieren
#6 5. Februar 2014 AW: Funschild-Creator Also der Codeabschnitt den du suchst ist glaube ich folgender: Code: $("#right .funplatesymbols li").click( this, function(e) { var sText = $('#funText').val(); // Text aus Eingabefeld auslesen var sSymbol = $(this).attr("symbol"); // Symbolcode auslesen i = e.data.getCursorPosition( $('#funText')[0] ); // Position des Cursors im Eingabefeld ermitteln sText = sText.substr(0,i) + sSymbol + sText.substr(i); // Symbol an Position im Text einfügen $('#funText').val( sText ); // Text mit Symbol wieder in Eingabefeld schreiben e.data.refreshPlate(); // Grafik aktualisieren //$('.funplatetext .funplatesymbols').append("<li class='funsymbol symbol-" + sSymbol[2] + " curpos-" + i + "'></li>"); $("#funText").focus(); }); Beim Absenden der Form sollten dann verschiedene Sonderzeichen wiedergegeben werden, die du dann wieder entsprechend in ein Bild umwandeln kannst. (Bin mir gerade nicht sicher, ob du dann das selbe rausbekommst, wie als wenn du die Symbole kopierst oder ob du dann das list-Element bekommst. Musste halt ausprobieren). LG + Multi-Zitat Zitieren
#7 6. Februar 2014 AW: Funschild-Creator Ok. Hab das jetzt mal zusammengebaut wie ichs ungefair haben will. Edit fiddle - JSFiddle Leider funktioniert das einfügen noch nicht. + Multi-Zitat Zitieren
#8 6. Februar 2014 AW: Funschild-Creator Ich würde es mit einem canvas direkt im Browser rendern lassen, erspart deinem Server rechenlast. + Multi-Zitat Zitieren
#9 6. Februar 2014 AW: Funschild-Creator Wie soll das funktionieren? Habe das noch nie gemacht. Hast du ein beispiel? Problem mit dem einfügen besteht aber weiterhin. + Multi-Zitat Zitieren
#10 6. Februar 2014 AW: Funschild-Creator Auf der Seite GutSchild wurde eine IconFont benutzt, das heißt das alle Symbole als Schriftzeichen als eine Eigene Schriftart gespeichert wurden. Dadurch ist es möglich die Symbole im Input-Feld zu packen. Das hier wäre eine Alternative. Edit fiddle - JSFiddle + Multi-Zitat Zitieren
#11 6. Februar 2014 AW: Funschild-Creator Das sieht schon mal sehr gut aus. Danke schon mal. Jetzt habe ich aber wieder ein zusätzliches Textfeld, das ich eigentlich nicht möchte. Ich möchte eigentlich nur das große Feld direkt beschreibbar und das man dort auch die icons einfügen kann. Ins backend müssten dann aber die codes übergeben werden. Werd das mal versuchen hinzubekommen. Wenns nicht möglich ist sagts mir gleich + Multi-Zitat Zitieren
#12 6. Februar 2014 AW: Funschild-Creator In das Textfeld kannst du nur Text aber keine anderen Sachen packen! Möglich wäre aber ein Div zu erstellen mit dem Attribute contenteditable="true", nur so als Ansatz. Mein Problem bei dieser Methode war das man die Symbole (span mit class) nicht mehr Entfernen/löschen konnte. + Multi-Zitat Zitieren
#13 8. Februar 2014 AW: Funschild-Creator hm ja habs auch probiert. funktioniert nicht. muss ich dann wohl oder übel so machen bis ich ne andere möglichkeit finde. Kannst du mir erklären warum es nicht mehr löschbar ist? + Multi-Zitat Zitieren
#14 18. Februar 2014 Zuletzt bearbeitet: 18. Februar 2014 AW: Funschild-Creator ich hab jetzt versuch das was in jsfiddle ist in mein Shopsystem zu übertragen, jedoch sagt er mir nun, dass die Variable funtext nicht definiert sei, obwohl es im fiddle geht. Code: Zeitstempel: 18.02.2014 16:40:09 Fehler: TypeError: funtext is null Quelldatei: http://localhost/kennzeichen2/templates/xt_grid/javascript/script.js Zeile: 24 Mein jsFiddle: Edit fiddle - JSFiddle EDIT-GELÖST: es hat ein "window.onload = function(){}" vor der Funktion gefehlt. EDIT2: Der BG wird jetzt noch jedes mal wieder ausgeblendet, wenn man wieder ins Textfeld klickt. Wie kann ich das noch beheben bzw. wie komm ich an die Variable für den Background, sodass ich das noch anhängen kann beim update. + Multi-Zitat Zitieren
#15 27. Februar 2014 AW: Funschild-Creator Problem besteht immer noch, dass wenn man wieder ins Textfeld klickt, der Hintergrund verschwindet. Des Weiteren würde ich gerne wenn man auf "Eingabe Bestätigen-Button" klickt nochmal das fertige Kennzeichen ohne Optionen anzeigen. Wie bastel ich mir das am besten zusammen. Variablen von Text, Hintergrund, Schriftfarbe habe ich. Weiß aber nicht wie ich die Symbole wieder convertiert bekomme. + Multi-Zitat Zitieren
#16 27. Februar 2014 AW: Funschild-Creator Entfern diese Zeile: Code: funtext.addEventListener('click', addBg); Immer wenn man in das Textfeld klickt wird die funktion addBg aufgerufen und das class-attribut wird mit [object object] ersetzt. Mach 2 unsichtbare Eingabefelder <input type="hidden"> für Farbe und Hintergrund und benutz diese werte dann für deine Vorschau ohne Optionen. Das funtext feld kannst du dafür auch auf type="hidden" stellen + Multi-Zitat Zitieren
#17 27. Februar 2014 Zuletzt von einem Moderator bearbeitet: 15. April 2017 AW: Funschild-Creator oh man bin ich doof ... danke Die Variablen habe ich schon. Siehe Screenshot. Das ist die Zweite Seite nach "Eingabe bestätigen". Hintergrund etc zusammenbauen etc ist kein Problem. Nur das er mir :08: auch wieder in das Icon übersetzt bekomm ich nicht hin. + Multi-Zitat Zitieren
#18 27. Februar 2014 AW: Funschild-Creator Erstelle eine Funktion wie die updatePreview nur diesmal liest du den Text nicht aus einem Eingabefeld sondern von einem Element mit innerText oder mit jQuery $('#elementid').text() Das Ergebnis lässt du dann mit §('#elementid').html(resultat) zurück schreiben, fertig. + Multi-Zitat Zitieren
#19 27. Februar 2014 AW: Funschild-Creator das habe ich bereits versucht mit: Code: function updatePreviewAfter() { var text = document.getElementById("textAfter"); var previewAfter = document.getElementById('previewAfter'); var symbolCode = '<span class="sprite-motiv sprite-motiv_$1"></span>'; text = text.replace(/(?:\:(\d+)\:)/g, symbolCode); previewAfter.innerHTML = text; } + Multi-Zitat Zitieren
#20 27. Februar 2014 AW: Funschild-Creator Hier hast du etwas vergessen: Code: var text = document.getElementById("textAfter"); Du willst doch den Text und nicht das Element, richtig? Code: var text = document.getElementById("textAfter").innerText; Optimiert: Code: function updatePreviewAfter() { var previewAfter = document.getElementById('previewAfter'), text = previewAfter.innerText; var symbolCode = '<span class="sprite-motiv sprite-motiv_$1"></span>'; text = text.replace(/(?:\:(\d+)\:)/g, symbolCode); previewAfter.innerHTML = text; } + Multi-Zitat Zitieren
#21 27. Februar 2014 AW: Funschild-Creator Ok. jetzt brauch ich aber noch ein Event bei dem das update ausgeführt wird. "onload" funktioniert nicht und beim click auf "eingabe bestätigen" auch nicht da ein "submit" ausgeführt wird. + Multi-Zitat Zitieren
#22 27. Februar 2014 AW: Funschild-Creator Also so wie ich das sehe sendest du den Text aus dem Input Feld per POST an die "In den Warenkorb legen-Seite", richtig? Wenn dies der Fall ist, sollte das ganze funktionieren, wenn du es ins jQuery.ready Event packst. Falls es nicht funktioniert, schau mal in die Entwickler Konsole (Chrome => F12) und schau was da unter "Javascript" für Fehler verbucht sind. LG + Multi-Zitat Zitieren
#23 27. Februar 2014 AW: Funschild-Creator Wenn ich es so mache: kommt der Fehler: + Multi-Zitat Zitieren
#24 27. Februar 2014 AW: Funschild-Creator Du hast die Variable "text" nicht richtig deklariert. Pack ein "var" (ohne die ") vor das text = previewAfter.innerText;. Also so: var text = previewAfter.innerText; LG + Multi-Zitat Zitieren
#25 27. Februar 2014 AW: Funschild-Creator Die variable "text" ist richtig definiert, aber durch das packen in die Anonymous-Funktion wird der Scope beschränkt und ist nicht mehr für die "updatePreviewAfter" verfügbar. Definiere die variablen vor der ready-funktion: Code: var previewAfter, text; $.ready(function () { // Hier natürlich ohne "var" sonst wird der scope auf diese Funktion beschränkt. previewAfter = document.getElementById('previewAfter'); text = previewAfter.innerText; // weiterer code ... }); Kurz zur Erklärung wegen der "text" variable Definition: Mit "var" lassen sich mehrer Variablen durch Komma getrennt definieren. Code: var foo, bar, baz; + Multi-Zitat Zitieren