TinyMCE and SVG&#39;s

TinyMCE and SVG's

Daniel Hallqvist

Vote:

Hi!

In a project I am working on it is wanted that the editors are able to paste inline SVG into an XhtmlString (tinymce) property.

After some googling, I have created a class as following:

[TinyMCEPluginNonVisual(AlwaysEnabled = true, EditorInitConfigurationOptions = "{ extended_valid_elements: 'section[class|id]|script[type]|iframe[class|src|frameborder=0|alt|title|width|height|align|name]|svg[*]|path[*]|line[*]|circle[*]|g[*]|polygon[*]'}", PlugInName = "TinyMceExtendedValidElements")]
    public class ExtendedValidElements
    {
    }

And have added this to episerver.config:

However it still strips the SVG elements out. Iframes etc work, just not the SVG ones. I have also tried having valid elements to "*[*]" but without luck.

Has anyone managed to get this to work? Am I missing something?

#114996

Jan 07, 2015 15:34

Erik Kärrsgård

Vote:

Hi,

A couple of things to try;

[TinyMCEPluginNonVisual(ServerSideOnly = true, AlwaysEnabled = true, EditorInitConfigurationOptions = "{ extended_valid_elements: 'section[class|id],script[type],iframe[class|src|frameborder=0|alt|title|width|height|align|name],svg[*],path[*],line[*],circle[*],g[*],polygon[*]'}", PlugInName = "TinyMceExtendedValidElements")]
public class ExtendedValidElements
{
}

1. I don't know if you have a plugin script as well, otherwise you'll want to add ServerSideOnly = true
2. According the specs over at tinymce, elements in extended_valid_elements should be separated by comma(,) and not pipe(|)
3. You shouldn't need to change episerver.config since that is the default values of mergedConfigurationProperties

/Erik

#115165

Jan 12, 2015 12:33

Daniel Hallqvist

Vote:

Thanks.

I have tried your suggestion but it doesn't seem to work unfortunately. Still strips out the inline SVG.

#115167

Jan 12, 2015 12:56

Erik Kärrsgård

Vote:

Could you post an example of the svg you try to include?

/Erik

#115168

Jan 12, 2015 13:03

Daniel Hallqvist

Vote:

I have tried several, but for example this one from http://css-tricks.com/using-svg/:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
   xml:space="preserve" class="logo">

<ellipse class="ground" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
  c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
  c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
  c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
  c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
  c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
  c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
  c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
  c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
  c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
  c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
  c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
  c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
  c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
  z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
  C434.693,207.929,439.613,203.01,445.731,203.01z"/>
<filter id="pictureFilter" >
  <feGaussianBlur stdDeviation="15" />
</filter>
</svg>

#115172

Jan 12, 2015 13:29

Erik Kärrsgård

Vote:

ok,

I did some debugging into TinyMCE and the problem seems to be that the svg element is detected as being empty and therefor removed. Unfortunatley there is no config way to change this behavior but there are some workarounds.

1. Always have a name attibute for the svg element: <svg name="something"
2. Always have a data-mce attribute for the svg element: <svg data-mce-something="something"
3. Include some text content within the svg element: <svg> </svg>

Using these techniques i could succesfully store inline svg in an xhtml property

/Erik

#115254

Jan 12, 2015 15:57

Daniel Hallqvist

Vote:

Ah, that was the problem :) Thanks a lot!

#115280

Jan 13, 2015 9:30