Transform js zu html

Question

Ich möchte Komponenten aus einer Vorlage, die ich habe, diese Komponenten mit Javascript & Svg. Gibt es eine Möglichkeit, sie in reines HTML zu konvertieren? So kann ich sie leicht manipulieren. Ich versuche nur diese Komponenten zu verwenden, um sie in anderen Vorlagen zu verwenden. Aber ich finde heraus, dass ich das nicht tun kann, bis ich den gesamten Code in HTML umwandeln. Oder vielleicht ist da noch ein anderer Weg, den ich nicht kenne. Danke.

Dieser ist neben dem js in der HTML-Datei enthält

<script> 
    var grid = document.querySelector("#grid"); 

    var editor = Ned.create("#svg"); 
    editor.snapping = 10; 
    //editor.singleInputs = true; 
    //editor.singleOutputs = true; 

    // only enable middle mouse button dragging 
    editor.svg.addEventListener("mousedown", (e) => { 
     if (e.button !== 1) e.stopImmediatePropagation(); 
    }); 

    editor.panZoom = svgPanZoom(editor.svg, { 
     viewportSelector: ".svg-pan-zoom_viewport", 
     panEnabled: true, 
     controlIconsEnabled: true, 
     zoomEnabled: true, 
     dblClickZoomEnabled: false, 
     mouseWheelZoomEnabled: true, 
     preventMouseEventsDefault: false, 
     zoomScaleSensitivity: 0.2, 
     minZoom: 0.5, 
     maxZoom: 2, 
     fit: false, 
     contain: false, 
     center: false, 
     refreshRate: "auto", 
     onPan: function(newPan) { 
      var zoom = this.getZoom(); 
      grid.setAttribute("x", -newPan.x/zoom); 
      grid.setAttribute("y", -newPan.y/zoom); 
     } 
    }); 

    editor.screenToWorld = function(pos) { 
     var rect = this.svg.getBoundingClientRect(); 
     var pan = this.panZoom.getPan(); 
     var zoom = this.panZoom.getZoom(); 

     return { 
      x: (((pos.x - rect.left) - pan.x)/zoom), 
      y: (((pos.y - rect.top) - pan.y)/zoom) 
     }; 
    }; 

    window.addEventListener("resize", (e) => { 
     editor.panZoom.resize(); 
    }, true); 



    // after setup create nodes  
    var n1 = editor.createNode("Test node"); 
    n1.position = { x: 400, y: 280}; 
    n1.size = { width: 180, height: 90 }; 

    var n1i1 = n1.addInput(""); 
    var n1i2 = n1.addInput("Input B"); 

    var n1o1 = n1.addOutput("Output A"); 
    var n1o2 = n1.addOutput("Output B"); 

    var n2 = editor.createNode("Start"); 
    n2.position = { x: 100, y: 150}; 
    n2.size = { width: 100, height: 60 }; 
    var n2o1 = n2.addOutput("Output"); 

    n2o1.connectTo(n1i2); 

    var n3 = editor.createNode("Other test"); 
    n3.position = { x: 200, y: 10}; 
    n3.size = { width: 180, height: 60 }; 
    var n3i1 = n3.addInput("Input B"); 
    var n3o1 = n3.addOutput("Output"); 

    </script> 

das ist ein Teil der js Datei:

init(ned, sTitle) { 
    this.editor = ned; 
    this.inputs = []; 
    this.outputs = []; 

    // ****************** root ****************** 
    this.eRoot = document.createElementNS(ned.svg.ns, "svg"); 
    this.eRoot.setAttribute("class", "NodeContainer"); 
    var abcElements = document.querySelectorAll('.NodeContainer'); 

    // Set their ids 
    for (var i = 0; i < abcElements.length; i++){ 
     abcElements[i].id = i; 

    } 

    this.eRoot.setAttribute("overflow", "visible"); 
    this.editor.nodegroup.appendChild(this.eRoot); 

    // ****************** background ****************** 
    this.eBack = document.createElementNS(ned.svg.ns, "rect"); 
    this.eBack.setAttribute("class", "Background"); 
    this.eRoot.appendChild(this.eBack); 

    // ****************** header ****************** 
    this.eHeader = document.createElementNS(ned.svg.ns, "g"); 
    this.eHeader.setAttribute("class", "Header"); 
    this.eRoot.appendChild(this.eHeader); 

    this.eHeaderBack = document.createElementNS(ned.svg.ns, "rect"); 
    this.eHeader.appendChild(this.eHeaderBack); 

    this.eHeaderText = document.createElementNS(ned.svg.ns, "text"); 
    this.eHeaderText.appendChild(document.createTextNode(sTitle)); 
    this.eHeaderText.setAttribute("x", "50%"); 
    this.eHeader.appendChild(this.eHeaderText); 

    // ****************** inputs and outputs ****************** 
    this.eInputs = document.createElementNS(ned.svg.ns, "svg"); 
    this.eInputs.setAttribute("class", "Inputs"); 
    this.eInputs.setAttribute("overflow", "visible"); 
    this.eInputs.setAttribute("x", "0%"); 
    this.eRoot.appendChild(this.eInputs); 

    this.eOutputs = document.createElementNS(ned.svg.ns, "svg"); 
    this.eOutputs.setAttribute("class", "Outputs"); 
    this.eOutputs.setAttribute("overflow", "visible"); 
    this.eOutputs.setAttribute("x", "100%"); 
    this.eRoot.appendChild(this.eOutputs); 

    // ****************** foreign object ****************** 
    this.eForeign = document.createElementNS(ned.svg.ns, "foreignObject"); 
    this.eRoot.appendChild(this.eForeign); 

    // selection events 
    this.eRoot.addEventListener("click", (e) => { this.onClicked(e); }); 
    this.eHeader.addEventListener("mousedown", (e) => { this.beginNodeDrag (e); }); 
}, 

Answer 1

einfach Ihr JavaScript im Browser ausgeführt, und sobald Ihr HTML-Code wird generiert, drücken Sie F12 (auf Firefox/Chrome) oder klicken Sie mit der rechten Maustaste auf die Seite und dann auf "Quelle anzeigen" (der Name der Registerkarte kann sich je nach Browser ändern). Dann können Sie einfach Ihre generierten Komponenten in Ihren Editor kopieren.

Was meinen Sie mit "Konvertieren sie in reines HTML"? Wenn der Zweck dieses JS-Skripts darin besteht, HTML zu generieren, wird es im Grunde genommen in reines HTML konvertiert.