How to make the WordPress editor support inline SVG code, wordpresssvg_php tutorial

How to make the WordPress editor support inline SVG code, WORDPRESSSVG

WordPress Editor support for SVG has always been very unfriendly, first it can not upload SVG files, and can not be automatically embedded in the content to let it display normally. At the same time, the inline SVG code is not recognized at all and will ruthlessly delete the SVG code automatically.

In the previous article I described how to let WordPress support uploading SVG images, seems to be part of the solution to this problem. The recent development process has encountered a number of situations that require the use of inline svg (inline SVG) code in the WordPress visual editor.

I believe you also know that WordPress is using the TINYMCE editor, and the TINYMCE editor only support the standard HTML5 tags, SVG code is not recognized, when I in the WordPress editor "visualization" and "text" two tags between the switch, All of the SVG code is deleted cleanly.

There are many online discussions on how to make WordPress TINYMCE support SVG, and the TINYMCE official website also found a document to configure TINYMCE extension tags. It is mainly three configuration points: Extended_valid_elements,custom_elements and Valid_children. Here is the online copy of a section of the user to provide the configuration of the WordPress editor code:

Add_filter (' Tiny_mce_before_init ', ' vsl2014_filter_tiny_mce_before_init ');functionVsl2014_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;}

There are netizens think that the following can be:

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

There are also netizens to give the following suggestions:

The above recommendations alone seem unsuccessful, but each suggestion seems to solve some of the problems. After repeated experiments, I finally found the following method, can successfully make SVG in the WordPress tinymce editor is not deleted, and well-preserved format.

First, function.php add the following PHP code:

/** ADD to Extended_valid_elements for TinyMCE * * @param $init Assoc. Array of TinyMCE options * @return $init the C Hanged Assoc. Array*/functionMy_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 above WordPress filter, I have all the SVG markup elements added up (as for the use of wildcard ' *[*] ' method, I have not experimented, interested friends can try, welcome to give feedback. )

A careful friend may have observed that the SVG tag names above have all been changed to lowercase. It is clear that the SVG official specification specifies that the capitalization of the SVG tag name is meaningful. But I have experimented with the use of camel-style SVG tag names. It may be that the HTML code does not care about the reason for capitalization.

Second, in the WordPress tinymce editor, all the SVG code is used

Wrap it up so that the TinyMCE editor can keep the original indentation format of the SVG code.

Third, put something in the code, such as, or a "Sorry, your browser does not support SVG":

< svg >    < rect > 
  
    rect>     Sorry, your browser does not support SVG
   
     svg >  

After implementing the above method, I now use the WordPress tinymce Editor, after embedding the SVG code, like writing plain HTML code, will not be deleted and the situation. I did not delve into the TINYMCE editor of the SVG code processing mechanism, the above methods are only a temporary cure. Perhaps these methods will fail with the upgrade or TINYMCE upgrade of WordPress.

If you have a more ingenious method, please share in the comments, thank you!

Original address: http://www.manongjc.com/article/657.html

Related reading:

Let WordPress support upload SVG images

How to use Wp_title () function in WordPress

Introduction to the usage of several animated elements in SVG

http://www.bkjia.com/PHPjc/1116241.html www.bkjia.com true http://www.bkjia.com/PHPjc/1116241.html techarticle How to let the WordPress editor support inline SVG code, wordpresssvg WordPress Editor support for SVG has always been very unfriendly, first it can not upload SVG files, nor automatic embedding ...

