embedapi.html_disabled 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <script type="text/javascript" src="embedapi.js"></script>
  8. <script type="text/javascript">
  9. var svgCanvas = null;
  10. function init_embed() {
  11. var frame = document.getElementById('svgedit');
  12. svgCanvas = new embedded_svg_edit(frame);
  13. // Hide main button, as we will be controlling new/load/save etc from the host document
  14. var doc;
  15. doc = frame.contentDocument;
  16. if (!doc)
  17. {
  18. doc = frame.contentWindow.document;
  19. }
  20. var mainButton = doc.getElementById('main_button');
  21. mainButton.style.display = 'none';
  22. }
  23. function handleSvgData(data, error) {
  24. if (error)
  25. {
  26. alert('error ' + error);
  27. }
  28. else
  29. {
  30. alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
  31. }
  32. }
  33. function loadSvg() {
  34. 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>';
  35. svgCanvas.setSvgString(svgexample);
  36. }
  37. function saveSvg() {
  38. svgCanvas.getSvgString()(handleSvgData);
  39. }
  40. </script>
  41. <button onclick="loadSvg();">Load example</button>
  42. <button onclick="saveSvg();">Save data</button>
  43. <br/>
  44. <iframe src="svg-editor.html" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>
  45. </body>
  46. </html>