CKEditor4 программно проверяет выравнивание текста

Question

Я создаю пользовательскую панель инструментов, используя CKEDITOR API.Чтобы проверить, активен ли стиль, я использую этот

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")
    }

, который отлично работает, за исключением последних четырех стилей (выравнивания текста)

Яприменяя выравнивание текста к каждому тегу, возможному в моем редакторе (p, h1, h2, strong, em, etc..) через

  editor.execCommand(style)

, где style может быть: bold, italic, justifyright, justifyleft, etc.., и это также отлично работает.

Моя проблемав том, что я не могу проверить, применяется ли выравнивание к выделенному тексту.Я попытался использовать

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

, и это работает, но это означало бы создание одного style на каждый tag, используемый в редакторе.Есть идеи?

Answer 1

но это будет означать создание одного стиля для каждого тега, используемого в редакторе.

Это то, что вам, к сожалению, нужно сделать.Стили в CKEditor назначены определенному элементу, чтобы вы могли видеть предварительный просмотр такого назначения стиля в выпадающем списке.

Когда вы откроете раскрывающийся список Стили, вы увидите стиль H1, стиль span или простой стиль code, но вы не увидите стиль, назначенный ни одному элементу, потому что не было бы возможности представить такойстиль.

Использование фиктивного заполнителя, такого как P, но разрешение присвоения стиля любому элементу может показаться оправданным, но в случае более сложных стилей окончательный результат будет выглядеть совсем иначе на p, table или strong, и именно здесь мы начнем идти против wysiwyg и вводить пользователей в заблуждение, представляя им превью, которые не соответствуют их результатам.

Как я уже сказал в начале, вам нужно назначить каждый стиль определенному элементу, и нет никакого способа обойти его.