TinyMCE and SVG's

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:

  
x

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
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
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
Vote:
 

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

/Erik

#115168
Jan 12, 2015 13:03
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
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>&nbsp;</svg>

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

/Erik

#115254
Jan 12, 2015 15:57
Vote:
 

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

#115280
Jan 13, 2015 9:30
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.