Question

我即将svg-edit集成到ASP.NET MVC项目中。是否有人有关于如何开始的推荐或教程？

谢谢。

Answer 1

我正在回答我自己的问题。经过研究，我建议将整个SVG-EDIT lib部署到mvc架构中，然后修改embed api如下：

这是我的部分视图和JS文件，它调用embed api并将其放入局部视图中的iframe中：

＆＃13;

document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
// Make sure to add the embedapi into the html file, becuase the intialization function runs actually in that file, all this call does is basically to take the iframe from html and inialize the api within that tag. 

$(document).ready(function () {
        // jquery selectro

    $("#LoadSVG").click(function () {
      
            $("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
        });

    });

＆＃13;

@Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    
</header>
<input id="LoadSVG" type="button" value="LoadSVG"  />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
    <input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
    <p id="svg"></p>
    <p id="DivData"></p>
    <p id="TestId"></p>
    <p id="SavedData"></p>

</body>




</html>

＆＃13;

Answer 2

这里我为模块准备了一个保存和加载功能：为了完善算法，还有很多工作要做，但是因为这只是一个测试项目，可以找出将模块集成到环境中的可能性我付出了足够的努力来理解与社区分享知识：

这是我的cshtml文件：

＆＃13;

@Scripts.Render("~/bundles/KSage")
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<header>
</header>
<input id="LoadSVG" type="button" value="LoadSVG"  />
<input id="CloseSVG" type="button" value="CloseSVG" />
<input id="save" type="button" value="save" onclick="save()">
<input id="Add" type="button" value="AddNewTag!" onclick="AddNewElemnt()" />
<input id="LoadExample" type="button" value ="LoadExample" onclick="LoadExample()"/>
<body id ="mainBody">
    <p id="svg"></p>
    <p id="DivData"></p>
    <p id="TestId"></p>
    <p id="SavedData"></p>
</body>
</html>

＆＃13;

这是js文件：

＆＃13;

document.write("<script type='text/javascript' src='~/Scripts/svg-edit/embedapi.js'></script>");
document.write("<script src='~/Scripts/jquery-1.10.2.js'></script>");

$(document).ready(function () {
        // jquery selectro

    $("#LoadSVG").click(function () {
      
            $("#svg").append($('<iframe src="/Scripts/svg-edit/svg-editor.html" width="900px" height="600px" id="svgedit"></iframe>'));
        });

    });

$(document).ready(function () {
    // jquery selectro

    $("#save1").click(function () {
        $("#DivData").append("<b>Appended text</b>");
    });

});

$(document).ready(function(){
        $("#CloseSVG").click(function () {
            $("#svg").hide();
        });
    });

function HandleSvgData(data,error) {
    if (error) {
        alert('Error:' + error);
    } else {
        $('#DivData').append(data);
        alert(data);
    }
}

function handleSvgData(data, error) {
    alert("handling Data");
    if (error) {
        alert('error ' + error);
    } else {
        alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
    }
}




function save1() {
    alert("saving");
   // svgCanvas.getSvgString()(handleSvgData);
    $("#svgedit").append($('This is the test classed appended after DivDat'));
}

function AddNewElemnt()
{
    var newElement = document.createElement("Test");
    var newNode = document.createTextNode("This is my new node!");
    newElement.appendChild(newNode);

    var referenceElement = document.getElementById("mainBody");
 
    var tagInsert = document.getElementById("TestId");
    referenceElement.insertBefore(newElement, tagInsert);
   // alert("added");

}

function Postt(data) {
    

}

function Post(data) {
    var mainBody = document.getElementById("mainBody");
    var SvgDataId = prompt("give me primary id");
    var SvgUser = prompt("give me UserName");
    var form = document.createElement("form");
    form.setAttribute("id", "PostData");
    form.setAttribute("action", "/SvgDatas/Create");
    form.setAttribute("method", "post");
    mainBody.appendChild(form);
    var PostData = document.getElementById("PostData");
    var InputSvgDataId = document.createElement("input");
    InputSvgDataId.setAttribute("name", "SvgDataId");
    InputSvgDataId.setAttribute("value", SvgDataId);
    PostData.appendChild(InputSvgDataId);
    var InputSvgUser = document.createElement("input");
    InputSvgUser.setAttribute("name", "SvgUser");
    InputSvgUser.setAttribute("value", SvgUser);
    PostData.appendChild(InputSvgUser);
    var InputData = document.createElement("input");
    InputData.setAttribute("name", "Data");
    InputData.setAttribute("value", data);
    PostData.appendChild(InputData);
    form.submit();

}






function save() {


    var doc, mainButton,
    frame = document.getElementById('svgedit');
    svgCanvas = new EmbeddedSVGEdit(frame);
    // Hide main button, as we will be controlling new, load, save, etc. from the host document
    doc = frame.contentDocument || frame.contentWindow.document;
    mainButton = doc.getElementById('main_button');
    mainButton.style.display = 'none';

// get data
    svgCanvas.getSvgString()(function handleSvgData(data, error) {
        if (error) {
            alert('error ' + error);
        } else {
            alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
            Post(data);
        }
    });
}

/*
function BuidUrl(SVGUser) {
    var uri = prompt("Give me url where the serach function lives, if empty then I will use Razor syntax to call within MVC architescture");
        if (uri)
            return uri;
        else {
            var urlHelper = ('http://localhost:53546/SvgDatas/Search?id='+SVGUser);
            return urlHelper;
        }
    }
*/


function returnedData_IntializeEditor(data, status) {

    if ((data != null) && (status == "success")) {
        var frame = document.getElementById('svgedit');
        svgCanvas = new EmbeddedSVGEdit(frame);
        doc = frame.contentDocument || frame.contentWindow.document;
        mainButton = doc.getElementById('main_button');
        tool_Bottum = doc.getElementById("#tool_button");
        
        mainButton.style.display = 'none';
        // Open Data into the frame
        // var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1<\/title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/><\/g><\/svg>';
        svgCanvas.setSvgString(data.Data);
    } else {
        $("#svg").append("<li>There is not such a data available in the database!</li>");

    }

}

function LoadExample() {
    var SVGUser = prompt("Enter the SVG ID");
    $.getJSON("http://localhost:53546/SvgDatas/Search?id=" + SVGUser, returnedData_IntializeEditor );
}

＆＃13;

这是模型：

＆＃13;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace IntegrationOfSVG.Models
{
    public class SvgData
    {
        public string SvgDataId { get; set; }
        public string SvgUser { get; set; }
        public string Data { get; set; }
    }

   }

＆＃13;

感谢SVG-EDIT社区提供的出色工具。

Answer 3

接下来我打算在此模块中添加一个视图模式，从一个sequal服务器打开数据，如果模式是admin，则允许用户编辑现有数据。我将保持此更新。

1-一种方法是从客户端删除工具，但它有一定的限制，即css不调整

function RemoveTools() {

    var frame = document.getElementsByClassName("iFrameHtmlTag")[0];
    doc = frame.contentWindow.document;
   
    if (doc != null) {
        var Tools = [
            'tools_top', 'tools_left', 'tools_bottom', 'sidepanels', 'main_icon', 'rulers', 'sidepanels', 'canvashadow'];
        for (i=0; i<Tools.length;i++)
        {
        doc.getElementById(Tools[i]).style.display = "none";
        }
   } else
        alert("Doc was null");
};

$(document).ready(function () {
$("#hide").click(function () {
    RemoveTools();
});

});

这是一种有效的方法，但应该有一种更好的方法来查看具有少量参数的对象，以重新调整窗口的大小。我也将继续讨论这个话题。

如何将svg-edit集成到ASP.NET MVC应用程序中

3 个答案: