plugin development - Problem with inline style CSS properties issue on DIV

admin管理员组

文章数量:1128991

I am building a custom dragable interface where user can build form and drag elements. I am facing issue with inline style properties. The example html is given below

$content = <div style= "box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
background-color: rgb(236, 240, 241);
padding-top: 9px;
background-image: url(PATH/assets/img/leaves.png);"> </div>

Above you see, we have an to be saved as html in a custom table in WP db. Below is the code I am using to filter the content.

$allowed_tags = array(
            'div' => array(
                'class' => true,
                'style' => true,
                'id' => true,
                'draggable'=> true,
                'data-dragged-element-type' => true,
                'data-activationprops' => true,
                'data-visibilityprops' => true,
                'data-propdata' => true,
                'data-s-o-r-order' => true,
                'data-col_default_width' => true,
                'data-dragged-element-type' => true,
            ),
            'button' => array(
                'class' => true,
                'aria-label' => true,
                'type' => true,
                'style' => true,
                'data-propdata' => true,
            ),
            'a' => array(
                'href' => true,
                'class' => true,
                'target' => true,
                'data-type'=> true,
                'download' => true,
            ),
            'em' => array(
                'class' => true,
                'style' => true,
            ),
            'i' => array(
                'class' => true,
                'style' => true,
            ),
            'span' => array(
                'style' => true,
            ),
            'p' => array(
                'id' => true,
                'data-dragged-element-type' => true,
                'class' => true,
                'spellcheck' => true,
                'style' => true,
            ),
            // Add more tags and attributes as needed
        );

        // Allow specific styles within the style attribute
        $allowed_tags['div']['style'] = array(
            'width' => true,
            'right' => true,
            'z-index' => true,
            'min-width' => true,
            'background-image' => true,
            'background-color' => true,
            'box-shadow' => true,
            'color' => true,  // Allow color property
            'border' => true, // Allow border property
            'background' => true,  // Allow background property
        );

$this->content_post = wp_kses( $content, $allowed_tags );

When parced through this, I got this output, where all css properties with rgb or url() get removed.

<div style="padding-top: 9px;')"> </div>

本文标签： plugin developmentProblem with inline style CSS properties issue on DIV