search

givanz / VvvebJs

Drag and drop page builder library written in vanilla javascript without dependencies or build tools.
https://www.vvveb.com/vvvebjs/editor.html
Apache License 2.0
7.07k stars 1.62k forks source link

Dealing with inline css #248

Open carlosbranco opened 2 years ago

carlosbranco commented 2 years ago

I notice when there is inline CSS the editor can't overwrite it. There is any good way to deal with this ? Maybe for !important in all values (even if is not a good practice ? Thank for the great work!

givanz commented 2 years ago

Hi

Thank you. Inline style has higher priority, you can either strip all style attributes after loading the page or if this is not possible you can add !important to all styles added by the editor by changing https://github.com/givanz/VvvebJs/blob/master/libs/builder/builder.js#L2131 to 

css += `${property}: ${value} !important;`;

Another option is to change Vvveb.StyleManager.setStyle to set the css inline with style attribute instead of generating css, just change https://github.com/givanz/VvvebJs/blob/master/libs/builder/builder.js#L2104

with something like

setStyle: function (element, styleProp, value) {
    return element.css(styleProp, value);
}