How to enable the WordPress editor to support inline SVG code and wordpresssvg

Source: Internet
Author: User

How to enable the WordPress editor to support inline SVG code and wordpresssvg

The WordPress editor has always been unfriendly to support SVG. First, it cannot upload SVG files or automatically embed them into the content for normal display. At the same time, the inline SVG code is not recognized at all, and the SVG code will be automatically deleted relentlessly.

In the previous article, I introduced how to allow Wordpress to support uploading SVG images. It seems that this problem has been partially solved. Recently, many problems have been encountered in the development process that require the use of inline SVG (inline SVG) code in the Wordpress visual editor.

I believe you also know that Wordpress uses the TinyMCE Editor, while the TinyMCE Editor only supports standard HTML5 tags, and SVG code is not recognized, when I switch between the "Visualization" and "text" tags in the Wordpress Editor, all SVG code is deleted cleanly.

There are a lot of discussions on how to enable Wordpress TinyMCE to support SVG on the Internet. On the TinyMCE official website, I also found a document to configure the TinyMCE extension tag. There are three configuration points: extended_valid_elements, custom_elements, and valid_children. The following is the code for configuring the Wordpress editor provided by a netizen copied online:

add_filter('tiny_mce_before_init', 'vsl2014_filter_tiny_mce_before_init');function vsl2014_filter_tiny_mce_before_init( $options ) {    if ( ! isset( $options['extended_valid_elements'] ) ) {        $options['extended_valid_elements'] = 'svg';    } else {        $options['extended_valid_elements'] .= ',svg';    }    if ( ! isset( $options['valid_children'] ) ) {        $options['valid_children'] = '+body[svg]';    } else {        $options['valid_children'] .= ',+body[svg]';    }    if ( ! isset( $options['custom_elements'] ) ) {        $options['custom_elements'] = 'svg';    } else {        $options['custom_elements'] .= ',svg';    }    return $options;}

Some netizens think that the following can be done:

function override_mce_options($initArray) {    $opts = '*[*]';    $initArray['valid_elements'] = $opts;    $initArray['extended_valid_elements'] = $opts;    return $initArray;}add_filter('tiny_mce_before_init', 'override_mce_options');

Some netizens also gave the following suggestions:

None of the above suggestions can be used independently, but each suggestion seems to be able to solve some problems. After repeated experiments, I finally found the following method to prevent SVG from being deleted in the TinyMCE editor of Wordpress, and saved it in a good format.

Firstfunction.phpAdd the following PHP code:

/** * Add to extended_valid_elements for TinyMCE * * @param $init assoc. array of TinyMCE options * @return $init the changed assoc. array */function my_change_mce_options( $init ) {    $ext = 'a[*],altglyph[*],altglyphdef[*],altglyphitem[*],animate[*],animatecolor[*],animatemotion[*],animatetransform[*],circle[*],clippath[*],color-profile[*],cursor[*],defs[*],desc[*],ellipse[*],feblend[*],fecolormatrix[*],fecomponenttransfer[*],fecomposite[*],feconvolvematrix[*],fediffuselighting[*],fedisplacementmap[*],fedistantlight[*],feflood[*],fefunca[*],fefuncb[*],fefuncg[*],fefuncr[*],fegaussianblur[*],feimage[*],femerge[*],femergenode[*],femorphology[*],feoffset[*],fepointlight[*],fespecularlighting[*],fespotlight[*],fetile[*],feturbulence[*],filter[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],foreignobject[*],g[*],glyph[*],glyphref[*],hkern[*],line[*],marker[*],mask[*],metadata[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialgradient[*],rect[*],script[*],set[*],stop[*],lineargradient[*],style[*],svg[*],switch[*],symbol[*],text[*],textpath[*],title[*],tref[*],tspan[*],use[*],view[*],vkern[*]';    // Add to extended_valid_elements if it alreay exists        if ( isset( $init['extended_valid_elements'] ) ) {        $init['extended_valid_elements'] .= ',' . $ext;    } else {        $init['extended_valid_elements'] = $ext;    }    // Super important: return $init!    return $init;}add_filter('tiny_mce_before_init', 'my_change_mce_options');

In the Wordpress filter above, I added all the SVG tag elements (I have not tried the wildcard '* [*]' method, if you are interested, try it. You are welcome to give feedback .)

Careful friends may observe that all the above SVG tag names are changed to lower case letters. Obviously, the SVG official specification specifies that the case sensitivity of the SVG tag name is meaningful. However, I have tested that it is not possible to use the camper SVG tag name. It may be because HTML code does not care about Case sensitivity.

Second, in the TinyMCE editor of Wordpress, wrap all SVG code with <pre> </pre>, so that the TinyMCE editor can maintain the original indent format of SVG code.

Third, put something in the <svg> </svg> code, such as & nbsp;, or say "Sorry, your browser does not support SVG ":

<Svg> <rect>... </rect> sorry, your browser does not support SVG. </svg>

After the above method is implemented, I now use the TinyMCE editor of Wordpress. After the SVG code is embedded, it is like writing common html code, and will not be deleted or deleted. I have not thoroughly studied the processing mechanism of SVG code in the TinyMCE editor. The above methods are just a temporary solution. These methods may fail as Wordpress or TinyMCE is upgraded.

If you have a more clever method, please share it in the comments. Thank you!


Related reading:

Allow Wordpress to support uploading SVG Images

How to Use the wp_title () function in WordPress

Usage of several animation elements in SVG

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.