Namespace CSS?

Question

Hallo, Gibt es eine Möglichkeit, den grapesjs-Editor so einzurichten, dass das CSS, das für den HTML-Inhalt generiert wird, im Namensraum ist? Mit anderen Worten: Wie verhindert man, dass die für den im Editor erstellten oder bearbeiteten Inhalt definierten Stilregeln auf den Rest der Webseite durchsickern? Im Fall meiner Website kann der Nutzer einen großen Teil der Seite bearbeiten, aber nicht den gesamten – der Rest des Seiten-HTML-Inhalts und CSS wird dynamisch vom Server generiert (dies is...

danfitz36 · Accepted Answer

Denkst du, du könntest einfach alle von GrapeJs generierten Klassennamen voransetzen? Wenn du statt .row .grape-row oder ähnliches verwendest (ich würde das Präfix wahrscheinlich als Variable verwenden), bekommst du meistens den Effekt, den @tomichal sucht.

artf · Answer

Tatsächlich kannst du bei neuen Selektoren einen Hörer hinzufügen und dort ein Präfix hinzufügen '''js const Präfix = 'meinPräfix-'; editor.on('selector:add', selector => { const Name = selector.get('name'); if (selector.get('type') === editor. SelectorManager.Selector.TYPE_CLASS && name.indexOf(Präfix) !== 0) { selector.set('name', Präfix + name); } }); ```

Devmohitagarwal · Answer

HALLO, Leute, die Sandboxen und das exportierte CSS voransetzen wollen, können das ausprobieren – wir hatten denselben Anwendungsfall und haben den sassen Ansatz gewählt. Dafür habe ich sass.js (https://github.com/medialize/sass.js/) verwendet. Schritte:Decke die cssString mit deiner benutzerdefinierten Klasse ein. Sag MyCustomClass.Führe sass.compile aus der obigen Bibliothek aus, um das scss in css umzuwandeln, das nun mit der gegebenen Klasse () sandboxed ist, So wirst du nicht mit Konflikte...

Namespace CSS?

Frage

Antworten (3)

Verwandte Fragen und Antworten

Erweitern Sie Beispiele/Dokumentationen von Pannel/Command durch das Öffnen einer neuen Ansicht

Leinwand anpassen

Integration benutzerdefinierter Komponenten

Gibt es eine Möglichkeit, die HTML-ID mit ihrer Komponente zu speichern, wenn ich auf den Speichern-Button klicke

Kostenpflichtige Plugins, die diesem Problem entsprechen

Durchsuchen Sie Plugin-Kategorien