WordPress.org

Ready to get started?Download WordPress

Forums

Inline SVG Disappears When Switching Between Editing Modes (8 posts)

  1. bhammie85
    Member
    Posted 3 months ago #

    Hi there,

    I have a couple of WordPress pages with inline SVGs on them. If I (or my client) switches to Visual mode, however, the SVG code disappears. Completely. WordPress takes it out entirely. Here's an example of what I'm using:

    <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="Layer_1" x="0px" y="0px" width="100%" height="450px" viewBox="0 0 375 175" xml:space="preserve" class="design-thinking">...[bunch of gobbletygook here]...</svg>
    </div>

    I am using inline SVG because I need the graphic to be interactive (I have onclick events for some of the nodes in the graphic, and yes I am enqueuing my js as well).

    Fortunately I can revert back to the latest revision if necessary, but is there anything I need to do to make this valid code for WordPress / TinyMCE and/or make WordPress ignore this code block entirely?

    Thanks!

  2. Okay.. you have some pretty funky attributes there.

    I'm not exactly sure why it's not working now, as opposed to before. With the new editor; the changes by TinyMCE; the changes by WP; it's hard to tell anymore what changed and why.

    But, here is your solution. You will need to add this to your functions (preferably in a child theme):

    function allow_all_tinymce_elements_attributes( $init ) {
    
        // Allow all elements and all attributes
        $ext = '*[*]';
    
        // Add to extended_valid_elements if it already exists
        if ( isset( $init['extended_valid_elements'] ) ) {
            $init['extended_valid_elements'] .= ',' . $ext;
        } else {
            $init['extended_valid_elements'] = $ext;
        }
    
        // return value
        return $init;
    }
    add_filter('tiny_mce_before_init', 'allow_all_tinymce_elements_attributes');

    What that does.. is tells tinymce to allow all elements with all attributes. We could have refined it some; if you didn't have those :'s in the attribute names... but, there you go.

    This page may help explain a little more.

  3. bhammie85
    Member
    Posted 3 months ago #

    Hi Josh,

    Thanks for the quick response!

    Unfortunately it didn't work for me. I put it in the bottom of my functions.php file and I still get the same behavior. Here is a little gif screencast of the problem:

    http://recordit.co/OBz3bSvspr

    Any ideas? The "weird" attributes for <svg> elements are standard attributes for them.

  4. Thanks for the screencast!! Very nice! But... there is always a but ;)... I was able to take your example above and test it myself.

    I could see, indeed, it was being stripped right out of there.

    But, after writing the function above.. I was able to retain the entire structure.

    To what file exactly did you add the code?

    You may need to manually empty your broser cache, or a site plugin cache if you're using one.

    If that still doesn't work.. make a screencast of where you are adding the code :)

  5. bhammie85
    Member
    Posted 3 months ago #

    Hi Josh,

    I placed your code in the bottom of my theme's functions.php file. I created the theme using underscores.me.

    I also copied just the snippet of the svg code (as in what I said in my first message) and tried that, and yes it worked.

    However, the problem is that the actual svg is a really big complex graphic and has lots of elements inside of it - and WordPress doesn't like something about it. It contains <rect>s, <circle>s, <path>s, <g>s, etc.

    Here's a screenshot of both the small snippet and the big one. You can see the big one still doesn't work.

    I did some testing by removing individual elements, but if I leave anything inside the <svg> tags, WordPress removes the whole thing.

    Here's a link to the raw svg code.

    Any idea how to get WordPress to ignore everything inside the <svg> tags?

  6. Perfect. Seems you have a little experience in support forums ;) Thanks for the very detailed, concise links and explanation!

    I'll look at this directly after dinner :) Please post back in an hour if I have not replied.

    I'm not sure if there is much else we can do... as the function I provided is supposed to all ALL elements and ALL attributes.

    But, I'll do a little more experimenting.

    Talk to you soon!

  7. bhammie85
    Member
    Posted 3 months ago #

    Hi Josh,

    Any luck with a solution? Maybe TinyMCE doesn't like <g> or <rect> or <circle> elements, or it doesn't like self-closing elements?

    Is there an alternative to TinyMCE that I could try?

    Thanks!

  8. bhammie85
    Member
    Posted 3 months ago #

    I haven't found any solution to permanently fix this, but I did turn off the Visual mode as a temporary fix by using this code in my functions.php file for the pages where I am using SVGs:

    add_filter( 'user_can_richedit', 'disable_my_richedit' );
    function disable_my_richedit( $default ) {
        global $post;
        if ( in_array( $post->ID, array(432, 10) ) ) // change the post ID
            return false;
        return $default;
    }

    I found the solution here.

    My clients don't mind that much but it would be nice to get Visual mode back at some point.

    Thanks for your help!

Reply

You must log in to post.

About this Topic