CKEditor4 überprüft programmatisch die Textausrichtung - html, css, ckeditor, ckeditor4.x

Ich erstelle eine benutzerdefinierte Symbolleiste mit CKEDITOR APIs. Um zu überprüfen, ob ein Style aktiv ist, verwende ich diesen

const styles = {
bulletedlist: new CKEDITOR.style({element: "ul"}),
numberedlist: new CKEDITOR.style({element: "ol"}),
bold: new CKEDITOR.style({element: "strong"}),
italic: new CKEDITOR.style({element: "em"}),
code: new CKEDITOR.style({element: "code"}),
h2: new CKEDITOR.style({element: "h2"}),
h3: new CKEDITOR.style({element: "h3"}),
link: new CKEDITOR.style({element: "a"}),
code: new CKEDITOR.style({element: "code"}),
blockquote: new CKEDITOR.style({element: "blockquote"}),
justifyleft:  new CKEDITOR.style({styles: {"text-align": "left"}}),
justifyright:  new CKEDITOR.style({styles: {"text-align": "right"}}),
justifycenter:  new CKEDITOR.style({styles: {"text-align": "center"}}),
justifyblock:  new CKEDITOR.style({styles: {"text-align": "justify"}})
}

for (let key in styles) {
const $button = $(`[data-style="${key}"]`)
const element = editor.elementPath()
styles[key].checkActive(element, editor)
? $button.addClass("button--active")
: $button.removeClass("button--active")
}

was perfekt funktioniert, ausgenommen das letzte vier Stile (Textausrichtung)

Ich verwende Text-Alignments für jedes Tag in meinem Editor (p, h1, h2, strong, em, etc..) über

  editor.execCommand(style)

woher style kann sein: bold, italic, justifyright, justifyleft, etc.. und das funktioniert auch perfekt.

Mein Problem ist, dass ich nicht prüfen kann, ob eine Ausrichtung auf den ausgewählten Text angewendet wird. Ich habe es versucht

new CKEDITOR.style({element: "p", styles: {"text-align": "left"}})

und es funktioniert, aber das würde bedeuten, einen zu schaffen style pro Stück tag im Editor verwendet. Irgendeine Idee?

Antworten:

aber das würde bedeuten, dass für jeden Tag, der im Editor verwendet wird, ein Stil erstellt wird.

Das musst du leider tun. Stile in CKEditor werden bestimmten Elementen zugewiesen, sodass Sie eine Vorschau einer solchen Stilzuweisung im Dropdown-Menü sehen können.

Wenn Sie das Dropdown-Menü "Stile" öffnen, sehen Sie den Stil "Gestylt" H1, Stil span oder einfach code Sie werden jedoch keinen Stil sehen, der keinem Element zugewiesen ist, da es keinen Weg gibt, einen solchen Stil darzustellen.

Dummy-Platzhalter wie verwenden P aber die Zuordnung von Stil zu einem Element mag für "justify" gut klingen, aber im Falle eines komplexeren Stylings würde das Endergebnis ganz anders aussehen p, table oder strong Und hier würden Sie gegen wysiwyg antreten und die Benutzer verwirren, indem Sie ihnen Vorschaubilder präsentieren, die nicht mit ihren Ergebnissen übereinstimmen.

Wie ich zu Beginn gesagt habe, muss jeder Stil einem bestimmten Element zugeordnet sein und es gibt keinen Weg um ihn herum.