allowedStyles option

[codemzy]

Thanks for the awesome work 👍

I understand the reasons for not allowing inline styles but for some wysiwyg editors they are hard to avoid completely.

I was thinking rather than an all or nothing approach, it could be cool to have something similar to the allowedClasses option, where some (safe?) inline styles can be allowed.

Like..

  allowedStyles: {
    'table': [ 'width', 'border-style' ]
  }

I couldn't find an option for this other than allowing all styles, for now I have come up with a work around... which could probably be improved on...

transformTags: {
    '*': function(tagName, attribs) {
        if (attribs.style) {
            let allowedStyles = ["width"];
            let cleanedStyles = [];
            allowedStyles.forEach(function(element) {
                let regex = new RegExp(element + ":[\\s|\\S]*?;");
                let matches = attribs.style.match(regex);
                if (matches) {
                    cleanedStyles.push(matches[0]);
                }
            });
            attribs.style = cleanedStyles.join(' ');
        }
        return {
            tagName: tagName,
            attribs: attribs
        };
    }
}

[boutell]

There are many ways of escaping CSS that are valid and would have to be understood by a robust implementation of this. Conversely we'd need to make sure those mechanisms could't fake it out... or introduce disallowed URLs as sources for background images... etc. A full CSS parser would probably be required.

…

On Tue, Aug 29, 2017 at 8:30 AM, Codemzy ***@***.***> wrote: Thanks for the awesome work 👍 I understand the reasons for not allowing inline styles but for some wysiwyg editors they are hard to avoid completely. I was thinking rather than an all or nothing approach, it could be cool to have something similar to the allowedClasses option, where some (safe?) inline styles can be allowed. Like.. allowedStyles: { 'table': [ 'width', 'border-style' ] } I couldn't find an option for this other than allowing all styles, for now I have come up with a work around... which could probably be improved on... transformTags: { '*': function(tagName, attribs) { if (attribs.style) { let allowedStyles = ["width"]; let cleanedStyles = []; allowedStyles.forEach(function(element) { let regex = new RegExp(element + ":[\\s|\\S]*?;"); let matches = attribs.style.match(regex); if (matches) { cleanedStyles.push(matches[0]); } }); attribs.style = cleanedStyles.join(' '); } return { tagName: tagName, attribs: attribs }; } } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#158>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAB9fY2fwuS6oZC0LJYNek1n9F2h2HXuks5sdARbgaJpZM4PF2S0> .

-- *THOMAS BOUTELL, *SUPPORT LEAD P'UNK AVENUE | (215) 755-1330 | punkave.com

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.