Skip to content

Inject CSS into HEAD Suggestion #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zadro opened this issue Apr 30, 2023 · 0 comments
Open

Inject CSS into HEAD Suggestion #3

zadro opened this issue Apr 30, 2023 · 0 comments

Comments

@zadro
Copy link

zadro commented Apr 30, 2023

Great little plugin! Worked like a charm for me.

Quick note, I'm not sure the purpose of line 66:
if (0 === (e = this.$modal.find("#redactor-link-styles")).length)

Is that line checking for a different installed plugin?

Also, your label and select classes should be updated to: modal-link-text

Otherwise, I have modified your init function to include injecting CSS:

// inject CSS, if classes set
if(this.opts.linkClasses.length) {
    const style = document.createElement('style');
    var classes = [];
    this.opts.linkClasses.forEach( function(e) {
        if(e.style !== undefined) {
            classes.push('.redactor-styles a.' + e.class + '{' + e.style + '}');
        }
    });
    // combine and remove comma in output
    style.textContent = classes.join("");
    document.head.append(style);
}

Which looks for an extra JSON element, such as:
{ "label": "Button (regular)", "class": "button", "style": "color: blue;" }

Of course, the main style on the frontend is still needed (without the .redactor-styles portion).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant