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

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!

Address: http://www.manongjc.com/article/657.html

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