error if editable contains <SVG .../> tag

markfink commented 11 years ago

I am trying to use embedded SVG images within HTML5 code (last time I checked SVG tags are valid HTML5).

In google chrome I get the following error: Uncaught TypeError: Object # has no method 'indexOf' (aloha-bare.min.js:23911). The whole thing does not work in Firefox so maybe there is something wrong, too.

It would be great if Aloha-Editor could handle the SVG tags in a useful way so one could select it and use Cut&Paste etc.

Here is the HTML file I used to discover the problem:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Getting Started with Aloha Editor</title>
    <!--link rel="stylesheet" href="index.css" type="text/css"-->
    <!-- Load Aloha Editor css and js -->
    <link rel="stylesheet" href="/aloha/css/aloha.css" type="text/css">
    <script src="/aloha/lib/require.js"></script>
    <script src="/aloha/lib/aloha-bare.min.js"
    data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link">
    </script>
    <!-- save the content of the page -->
    <script src="/lib/aloha-save.js"></script>

</head>
<body>
    <div id="main">
        <div id="content"><p>Getting started with Aloha Editor!</p>
            <!-- Created with Inkscape (http://www.inkscape.org/) -->
            <svg
            xmlns:svg="http://www.w3.org/2000/svg"
            xmlns="http://www.w3.org/2000/svg"
            version="1.0"
            x="0.00000000"
            y="0.00000000"
            width="500.00000"
            height="500.00000"
            id="svg2">
                <defs id="defs4" />
                <g id="layer1">
                    <rect
                    width="300.00000"
                    height="300.00000"
                    x="100.00000"
                    y="100.00000"
                    style="opacity:1.0000000;fill:none;fill-opacity:1.0000000;fill-rule:evenodd;stroke:#000000;stroke-width:8.0000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-dashoffset:0.00000000;stroke-opacity:1.0000000"
                    id="rect5719" />
                </g>
            </svg>
        </div>
    </div>
    <script type="text/javascript">
    Aloha.ready( function() {
        Aloha.jQuery('#content').aloha();
    });
    </script>
</body>
</html>

markfink commented 11 years ago

Could you reproduce the issue? Do you need any more information from me for triage? I would appreciate if you could tell me if you are going to fix this eventually.

deliminator commented 11 years ago

I think the way to go about it is probably to wrap it into a block: http://aloha-editor.org/guides/plugin_block.html

markfink commented 11 years ago

this sounds about right. I will check this and close the issue in case it works. Thank you very much

markfink commented 11 years ago

I added the block - Plugin but it did not change much. I still get the Javascript error.

deliminator commented 11 years ago

What I meant was to build a custom block implementation that contains the SVG. For example, the table plugin wraps tables in a block, which gives tables the draghandle.

markfink commented 11 years ago

This sounds like a massive task to work around a defect (the table plugin has over 3000 lines). I like Aloha-Editor so please do not get this the wrong way. Maybe one day I come back but for now I switched to redactor it is able to handle inline SVG images.

cecilialam commented 11 years ago

It might not be too bad. I had built a custom block implementation around my FIGURE tags using DIV as the root tag. However, I am having trouble building a custom block using SPAN as the root tag. I hope Aloha can help here. https://github.com/alohaeditor/Aloha-Editor/issues/945

Thanks.

tedw commented 9 years ago

Any updates on this?

alohaeditor / Aloha-Editor

error if editable contains <SVG .../> tag #951