CKEditor benutzerdefinierte Stile Drop-Down mit Vorschau, aber keine Inlining

Question

Verwenden von CKEditor 4 und die benutzerdefinierte Stile-Funktion. Ich habe es funktioniert gut, aber etwas stört mich wirklich. Es scheint, als ob Sie eine Vorschau des Stils im Dropdown benötigen, Ihre CKEDITOR.stylesSet Objekte müssen die styles Eigenschaft haben. Wie:

{ name: name, element: element, attributes: { class: css_class }, styles: styles_as_json }

Was wirklich ist, ich will nur die Klasse hinzuzufügen, die auf der Seite Element in attributes ist Sie markiert haben, wenn Sie einen Stil wählen. Aber wenn Sie einen Stil auf Ihren Inhalt anwenden, fügt er die Klassen und Inlines ein, was auch immer Sie in styles aufgeführt haben, was diese ganze Eigenschaft sinnlos macht.

Der Grund, warum CKEditor die Möglichkeit bietet, benutzerdefinierte Stile zu laden und sie einer CSS-Klasse zuzuordnen, ist so, dass Sie den Stil ändern können und dann alles mit dieser CSS-Klasse automatisch aktualisiert wird. Wenn jedoch auch das Inline-Styling angewendet wird, hat das Ändern des benutzerdefinierten Stils keine Auswirkungen, da die benutzerdefinierten Styles nun durch Inline-Styles überschrieben werden (wow, worry).

Ich frage, ob jemand jemals gewünscht hat ihre Stile in der Drop-Down-Vorschau angezeigt haben (die benutzerdefinierten Stil auf das Listenelement angelegt wird) und wollte nicht, dass diese Stile auf der Seite Inhalt inlined werden - Sie möchte nur, dass die CSS-Klasse angewendet wird. Wie hast du es gemacht?

Ich denke, dass es mit dem Dropdown in einem iframe zu tun hat (also die css aus dem übergeordneten Fenster wird nicht zu diesem), weil die angegebene CSS-Klasse für den Stil auf der Stil-Option ist, aber Die Stile werden nicht angewendet. Wenn die Stile in der Stiloption inline sind, wird die Option daher verwendet.

Answer 1

Ich fand schließlich eine (hacky) Lösung für diese, so dass ich dachte, ich würde es veröffentlichen, wenn jemand neugierig war.

Ich begann eine ID an mein Stil-Tag, die meine benutzerdefinierten Stildefinitionen hielt.
<style id="_custom_styles">...</style>

dann, wenn eine Instanz von CKEditor bereit war, hörte ich für Klicks auf die Stile es Drop-Down dann das Stilelement gepackt und kopiert in die Stile Dropdown so werden die Listenelemente durch ihre gegebenen Klasse Stil könnte.

CKEDITOR.on 'instanceReady', -> 
    $(".cke").on "click", ".cke_combo__styles", (e) -> 
    node = document.getElementById("_custom_styles").cloneNode(true) 
    $(".cke_combopanel__styles").find("iframe")[0].contentWindow.document.head.appendChild(node)