Skip to content

Inject CSS into HEAD Suggestion #3

Description

@zadro

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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions