Wordpress Page Builder selber machen ...

[deathNap]

Hallo liebes Forum,

ich habe folgendes Problem:

Ich versuche mich momentan an einem selbst entwickeltem Page Builder für Wordpress.
Mit Hilfe von Buttons sollen html tags generiert werden und in ein <textarea> Tag geschrieben werden. Den Inhalt des <textarea> Tags Speicher ich in einer Variable und gebe diese im Front-end aus. Funktioniert.

Ein Button erstellt eine Row:

<div class="row"></div>

Dieser Code wird genau so in das <textarea> Tag geschrieben. Funktioniert.

Jetzt möchte ich mit Hilfe eines weiteren Buttons innerhalb dieser Row eine Collumn erstellen.

<div class="col-1-1"></div>

Ist das möglich oder habt ihr vielleicht eine andere, bessere Herangehensweise für mein Vorhaben?

Lieben Gruß und vielen Dank

deathNap

 

[tsseh]

Ist das möglich oder habt ihr vielleicht eine andere, bessere Herangehensweise für mein Vorhaben?

dazu solltest du erst mal schreiben, was dein problem ist. eine vermutung habe ich, aber es geht besser.
du erzeugst keinen text, sondern ein modell. entweder als js-objekt

var model = [
  {
    type: "row",
    columns: [
      {
         type: "column"
      },
      {
         type: "column"
      }
    ]
  },
  {
    type: "row",
    columns: [
      {
         type: "column"
      },
      {
         type: "column"
      }
    ]
  }
];

darüber kannst du am ende iterieren und deinen outputtext erzeugen.
oder du erzeugst als model gleich ein DocumentFragment weiches du dann per innerHTML ausgibst
oder du nutzt zum aufbau deines models ein jquery-objekt jquery

 

[kkapsner]

DocumentFragment weiches du dann per innerHTML ausgibst

Ein DocumentFragement hat kein innerHTML.

 

[tsseh]

Ein DocumentFragement hat kein innerHTML.

aber das rootelement

 

[kkapsner]

Welches Rootelement? Wenn du im DocumentFragment nur ein Kindelement hast und dann nur von diesem das innerHTML ausliest, ist das DocumenFragment komplett überflüssig.

 

[tsseh]

Welches Rootelement? Wenn du im DocumentFragment nur ein Kindelement hast und dann nur von diesem das innerHTML ausliest, ist das DocumenFragment komplett überflüssig.

warum soll ich nur 1 Kindelement haben? ja, dann wäre es überflüssig. ist ja aber nicht so, soll ja belibig groß werden.
oder redest du vom rootelement? dann nein, daß DocumenFragment ist dann nicht überflüssig. du musst dich ja im modell auch bewegen können, um weitere elemente einzufügen oder wieder zu entfernen. mit dem selben argument wäre dann das document in jedem xml/html dom tree überflüssig.

 

[kkapsner]

oder redest du vom rootelement?

Nochmal: welches Rootelement? DocumentElement hat sowas nicht bzw. das DocumentElement ist die Wurzel von allem.

Sag' einfach, wie du aus sowas per innerHTML das HTML bekommst:

var frag = document.createDocumentFragment();
frag.appendChild(document.createElement("div"));
frag.appendChild(document.createElement("div"));

 

[tsseh]

du willst wieder mal stänkern?

var frag = document.createDocumentFragment();
var root = document.createElement("div");
frag.appendChild(root);
root.appendChild(document.createElement("div"));
root.appendChild(document.createElement("div"));
//ausgabe root.innerhtml

 

[kkapsner]

Nein, ich will wissen, was du meinst (so wie meistens, wenn du mich so verstehst).

In deinem Beispiel oben ist frag überflüssig. Ich kann alles mit root machen. Ist ja genau der Fall:

Wenn du im DocumentFragment nur ein Kindelement hast

 

[tsseh]

Nein, ich will wissen, was du meinst (so wie meistens, wenn du mich so verstehst).

ich kann mir hier nicht vorstellen, dass du nicht weisst was ich meine

In deinem Beispiel oben ist frag überflüssig. Ich kann alles mit root machen.

nein, weil du ja auch mit dem modell arbeiten möchtest. dein beispiel ist ja wie beispiele nunmal so sind, auf das nötigste reduziert. willst du jetzt erst ein paar divs einfügen, dann zw. 3. und 4. div eine tabelle, dann in die 3. spalte, 4. zeile ein bild ... was man eben so macht, dann ist frag ganz schnell nicht mehr überflüssig.
das es prinzipiell auch ohne fraq geht, über objekt und array methoden zeigt ja mein punkt 1, ist aber sehr aufwendig.
mit fraq wird es dann schon komfortabler, intern geht fraq natürlich auch wieder über objekt/array methoden, zwar nativ aber mit sizle hat jquery das jahrelang auch in js gemacht.
damit sind wir bei meinem 3. punkt, jquery. jquery nutzt wiederum fraq und macht es in der anwenderschnittstelle nochmal komfortabler

Ist ja genau der Fall:

ich weiß immer noch nicht was du mit "nur 1 Kindelement" meinst, 1 kindelement insgesammt oder 1 kindelement auf fraq-ebene?
also nochmal, wenn ich nur 1 element benötige, ja dann kann ich mir das fraq spaaren.
habe ich nur ein element auf oberster ebene und darunter viele weitere elemente, dann siehe oben.

 

[kkapsner]

ich kann mir hier nicht vorstellen, dass du nicht weisst was ich meine

Ist aber so. Bzw. mir ist nur grob klar, was du meinst und deswegen frag' ich nach.

dann ist frag ganz schnell nicht mehr überflüssig.

Was kann ich mit frag machen, das ich nicht mit root machen kann? Ich verstehe deinen Standpunkt nicht.

1 kindelement insgesammt oder 1 kindelement auf fraq-ebene?

Natürlich auf frag-Ebene. Die anderen Kinder sind ja keine Kinder, sondern Enkel...

habe ich nur ein element auf oberster ebene und darunter viele weitere elemente, dann siehe oben.

Warum? Dann kann ich mir das frag auch sparen...

var root = document.createElement("div");
root.appendChild(document.createElement("div"));
root.appendChild(document.createElement("div"));
//ausgabe root.innerhtml

Funktioniert genauso.

 

[tsseh]

Was kann ich mit frag machen, das ich nicht mit root machen kann? Ich verstehe deinen Standpunkt nicht.

wenn ich dich fragen würde, welche dom-funktion in js am häufigsten aufgerufen wird, was würdest du antworten?

- - - Aktualisiert - - -

oder ganz anders, was spricht denn gegen fraq?

 

[kkapsner]

Ah... document.getElementById() ... und jetzt sehe ich deinen Punkt. Hatte übersehen, dass ein DocumentFragment das auch hat... wahrscheinlich weil ich in Fragmenten normalerweise nicht nach ID suche. Hatte bis jetzt noch keine Anwendung dafür. Wenn ich ein Element spezielles Element später benötige, speichere ich es in einer Variable. Sollte meistens auch schneller sein.
Ich würde auch sagen, dass es hier nicht zum Einsatz kommt. Wahrscheinlich eher NODE.getElementsByClassName() und das kann man beim Rootelement verwenden.

Es spricht nichts gegen Fragmente. Es hat nur kein innerHTML und ist überflüssig, wenn man ein Rootelement verwendet (und wenn man getElementById außen vor lässt).

 

[tsseh]

Es spricht nichts gegen Fragmente. Es hat nur kein innerHTML

das innerHTML bezog sich auch nicht auf das document, sondern auf das modell, als allgemeinen hinweis wie man an die stringform des modells kommt.

und ist überflüssig

selbst wenn es dich stört, ist eher das root element überflüssig.
dann macht man es eben mit einer schleife und outherhtml

 

[kkapsner]

das innerHTML bezog sich auch nicht auf das document, sondern auf das modell

Dann hab' ich dich da falsch verstanden.

dann macht man es eben mit einer schleife und outherhtml

Wahrscheinlich würde ich das so machen.