Simple way to edit textarea

[GoogleCodeExporter]

Hello,
i am trying to write cool dokuwiki plugin:svg-edit and it would be nice to 
have some way to simply embed svg-edit like any other wysiwyg in few simple 
steps eg.:

1.) include svg-edit.js to page
2.) call js function with id or name of textarea containing SVG code which 
will do what's needed to show svg-edit over that textarea
3.) optionaly call js function to free textarea of this svg-edit

Original issue reported on code.google.com by Harvi...@gmail.com on 20 Feb 2010 at 6:04

[GoogleCodeExporter]

sorry, i found the embedapi.js, but it's not working... can you please add 
simplest 
example of use to your wiki or somewhere? i am trying to set and get svg code 
from 
parent frame with no success... i've tried those lines:

1.) create frame
<iframe 
src="http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-editor.html" 
id="svg-edit" name="svg-edit" width="750" height="600"/></iframe>

this works:
  <a href="http://google.com/" target="svg-edit">url</a>
this works too:
  window.frames['svg-edit'].location="http://google.com/";

this is not working:
  var svgCanvas = new embedded_svg_edit(window.frames['svg-edit']);
  svgCanvas.setSvgString('<svg></svg>');
even this is not working:
  window.frames['svg-edit'].svgCanvas.setSvgString('<svg></svg>');
this alerts source of some javascript callback function:
  alert(svgCanvas.getSvgString());

but! when i am on page 
http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-
editor.html
i can launch some commands in URL bar of my browser. those are working:
  javascript:svgCanvas.setSvgString('<svg></svg>');
  javascript:alert(svgCanvas.getSvgString());

so i wonder why i can't do the same from parent frame... ;-(

Original comment by Harvi...@gmail.com on 20 Feb 2010 at 3:38

[GoogleCodeExporter]

Oh and i've just found why it's not working... there is some bug in embedapi.js

Uncaught TypeError: Cannot call method 'postMessage' of undefined
http://svg-edit.googlecode.com/svn/tags/stable/editor/embedapi.js :150

i've checked that jQuery is loaded and still getting this message ;-(

Original comment by Harvi...@gmail.com on 20 Feb 2010 at 8:37

[GoogleCodeExporter]

Does this work? http://test.antimatter15.com/svgedit/embedtest.html

Original comment by Antimatter15 on 20 Feb 2010 at 9:35

[GoogleCodeExporter]

Harvie,

I would also suggest just looking at the Yanel and other examples as ways to
integrate.  See "Projects that use SVG-edit" on the main project page.

Jeff

Original comment by codedr...@gmail.com on 20 Feb 2010 at 10:58

• Changed state: Accepted

[GoogleCodeExporter]

codedread: i have looked at yanel and it embeds whole code - i don't like it.

i've managed to get embed working with window.frames (which needs svg-edit to 
be 
installed on same domain):
window.frames['svg-edit'].svgCanvas.setSvgString(field.value);
field.value=window.frames['svg-edit'].svgCanvas.getSvgString();

Antimatter15: Cool, that is probably what i am looking for, THX

you should put this single HTML to svn...

[attached embedapi.html] i've modified it a bit to be more usefull for beginers.
please put this file to the same directory as svg-editor.html and embedapi.js

Original comment by Harvi...@gmail.com on 21 Feb 2010 at 12:45

Attachments:

• embedapi.html

[GoogleCodeExporter]

Sorry to come in so late here, but I noticed that Antimatter's test didn't work 
in
IE... I can't get it working in IE either.

I believe the problem is related to the missing tag to tell IE to use the chrome
plugin. Any ideas?

Original comment by dmcg...@gmail.com on 20 Mar 2010 at 4:01

[GoogleCodeExporter]

the code to use the chrome plugin must be in the top parent frame not in the 
child iframe

Original comment by rodrigoa...@gmail.com on 20 Mar 2010 at 6:23

[GoogleCodeExporter]

HarvieCZ: is this still a valid bug?  What are you looking for, exactly?

Original comment by codedr...@gmail.com on 29 Mar 2010 at 3:40

[GoogleCodeExporter]

Probably it's not a bug, since i worked it out using iframe embed,
but it may be cool to have some way to load svgedit to textarea

<script src=".../embed.js" />
load_on_textarea(getelemenbyname('text1'));
unload_from_textarea(getelemenbyname('text1'));

where text1 will be textarea containing svg data, so we'll be able to POST it 
using 
html form.

Now i need to hide textarea, show new iframe, set svgedit data in iframe using 
embed 
js to textarea contents and when editing is done i get svg from svgedit, set it 
to 
textarea innerhtml, hide iframe and show textarea again, then i can submit form 
(using javascript).

this is bit ugly solution and i think svgedit should be embedable without need 
of 
iframes... i like to have something like HTML wysiwygs in javascript, which are 
loading themselves on textarea (svgedit is very similar to wysiwyg concept and 
it 
does not matter if there is XHTML or SVG in textarea)

Original comment by Harvi...@gmail.com on 29 Mar 2010 at 3:52

[GoogleCodeExporter]

HarvieCZ, for the record most in-browser HTML wysiwyg editors generate iframes 
in place of the textareas they're "attached" too. To do this with SVG Edit, 
there'd simply need to be a script that does something similar: grab contents 
of the textarea, put it into the iframe system, hide the textarea, etc--just as 
you described.

Certainly possible and not a limitation of SVG Edit as far as I know--the 
code's just not written to do that yet (from what I've found).

You've written great specs for it, though. :)

Original comment by bigbluehat on 22 Jun 2010 at 6:21

[GoogleCodeExporter]

yeah, i've realized that it's imposible to render something directly in 
textarea. but some smart code to replace textarea with svgedit (and revert it) 
can do the thing...

something more smart than the dokuwiki plugin i've made: 
http://github.com/Harvie/DokuWiki-Plugin-SVGEdit/blob/master/script.js

(this just uses 100% width, we will probably need to get dimensions of textarea 
and set it to iframe)

anyway it's working so i am not interested in it much by now...

Original comment by Harvi...@gmail.com on 22 Jun 2010 at 6:38

[GoogleCodeExporter]

I'm having trouble with this too. Just trying a pass the test string in with 
the following code:

    <script type="text/javascript" src="editor/embedapi.js"></script>
    <script type="text/javascript">

        function init_embed() {
        }

        function show(a) {
            alert(a) //cant pass alert directly as that results in a wrpaped native error
        }

        function test() {
            var frame = document.getElementById('svgedit');
            var svgCanvas = new embedded_svg_edit(frame);            
            console.log(svgCanvas);
            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(svgexample);            
        }
    </script>

    <div onclick="test();">Load example</div>
    <br/>

    <iframe src="editor/svg-editor.html" width="900px" height="600px" id="svgedit" onload="init_embed()"></iframe>    

And I know that *some* of the message is getting through, because 
ext-imagelib.js throws the error
    Unexpected data was returned: 4302502660;svgCanvas['setSvgString']("")

which I can see is because ext-imagelib.js adds an window.addEventListener, 
gets the message, and then can't parse it, but setSvgString never gets fired.

I'd really prefer to embed the editor in an IFrame rather than tweak/copypaste 
the code from svg-editor.html, so that if a new version is release I can update 
it without having to faff around. 

Any hints?

Original comment by bencurth...@gmail.com on 27 Aug 2010 at 3:14

[GoogleCodeExporter]

Mmm. Seems Chrome doesn't understand iframe.contentWindow, though it's happy 
with iframe.contentDocument.

Original comment by bencurth...@gmail.com on 27 Aug 2010 at 4:38

[GoogleCodeExporter]

no, not that. I think I've found it. There's a comment in svg-editor.js that 
says

// Not sure what this was being used for...commented out until known.
// The "message" event listener was interfering with image lib responder

and then all the code that embedapi.js needs for its callbacks.

So, whoever added that comment: what it's being used for is making embedapi.js 
work. And if the ext-imagelib.js didn't throw an error when any message it 
didn't understand showed up, then it would probably get along fine =)

Original comment by bencurth...@gmail.com on 27 Aug 2010 at 5:00

[GoogleCodeExporter]

Ok, in my copy I have uncommented the code that was commented out by adeveria 
in revision 1547 comitted 26/04/2010, and also modified the message listener in 
ext-imagelib.js so that it doesn't complain if it can't parse the message, and 
it now works for me. 

Original comment by bencurth...@gmail.com on 27 Aug 2010 at 5:14

[GoogleCodeExporter]

Ah, most enlightening, thanks for that info. :) Care to submit a patch of your 
changes?

Original comment by adeve...@gmail.com on 27 Aug 2010 at 7:01

[GoogleCodeExporter]

If I can get a test embedapi.html working again, I will submit a patch. 
setSvgString() is ok, but getSvgString() isn't calling the callback on the host 
page now. getSvgString() gets called, but the callback doesn't. This is very 
much pushing the limits of my javascript =)

Original comment by bencurth...@gmail.com on 28 Aug 2010 at 10:57

[GoogleCodeExporter]

Is there a better way of committing a patch than uploading it to this issue?

I have:
1. Uncommented the callback handler in svg-edit.js
2. Changed the postMessage call in it to use "*" as the origin instead of 
e.origin, as the former was throwing a DOM Exception 12
3. Commented the code in ext-imagelib.js that complains when it can't parse the 
message
4. Added an example embedapi.html page.

Original comment by bencurth...@gmail.com on 28 Aug 2010 at 11:27

Attachments:

• svg-edit-patch-494.patch

[GoogleCodeExporter]

Actually, use this patch - the embedapi.html page hides the main menu of the 
svg editor, as we'll probably be controlling loading and saving from the host 
page. I will be, anyway.

Original comment by bencurth...@gmail.com on 28 Aug 2010 at 11:57

Attachments:

• svg-edit-patch-494.patch

[GoogleCodeExporter]

Thanks for the patch and the new HTML file, Ben! This has now been taken of in 
r1734. Will close the issue for now.

Original comment by adeve...@gmail.com on 20 Sep 2010 at 6:59

• Changed state: Fixed