Как применять постоянные стили к виджетам форматированного текста между обновлениями в Apostrophe CMS - PullRequest
Новая
       28

Как применять постоянные стили к виджетам форматированного текста между обновлениями в Apostrophe CMS

0 голосов
/ 15 апреля 2020

Я начинающий с Апострофом и пытаюсь обернуть голову вокруг некоторых понятий, а также знакомлюсь со всем, что может делать Апостроф.

В настоящее время я строю маркетинговая страница. У меня есть синглтон виджета расширенного текста, определенный следующим образом: 

{{ apos.singleton(data.page, 'introBlurb', 'apostrophe-rich-text', {
            toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink' ],
            styles: [
            { name: 'H1', element: 'h1' },
            { name: 'H2', element: 'h2' },
            { name: 'H3', element: 'h3' },
            { name: 'H4', element: 'h4' },
            { name: 'P', element: 'p'},
            { name: 'H1 Center', element: 'h1', styles: {'text-align': 'center'} },
            { name: 'H2 Center', element: 'h2', styles: {'text-align': 'center'} },
            { name: 'H3 Center', element: 'h3', styles: {'text-align': 'center'} },
            { name: 'H4 Center', element: 'h4', styles: {'text-align': 'center'} },
            { name: 'P Center', element: 'p', styles: {'text-align': 'center'} },
            { name: 'H1 Right', element: 'h1', styles: {'text-align': 'right'} },
            { name: 'H2 Right', element: 'h2', styles: {'text-align': 'right'} },
            { name: 'H3 Right', element: 'h3', styles: {'text-align': 'right'} },
            { name: 'H4 Right', element: 'h4', styles: {'text-align': 'right'} },
            { name: 'P Right', element: 'p', styles: {'text-align': 'right'} }
            ]
            }) }}

CKEditor правильно отображает все используемые стили текста в раскрывающемся списке редактора, и к вводимому мной тексту применяется правильное выравнивание текста. Например, при выборе H1 Right текст перемещается вправо от поля ввода, как и должно быть.

Однако, если refre sh (после того, как он был сохранен), текст возвращается к Выровненный по левому краю стиль. Я пробовал следующее:

  • замена объекта "styles" в одном из элементов для "атрибутов: {'class': 'textAlignRight'}"
  • присоединение "! Важный "к стилям выравнивания текста, которые я перечислил выше
  • удаление всего выравнивания текста CSS из моего основного файла" site.less "
  • перенастройка sanitize Html в индексе. js файл в lib / modules / apostrophe-rich-text И lib / modules / apostrophe-rich-text-widgets ... а также любые и все комбинации перечисленного.

Большинство вышеизложенное было почерпнуто из обсуждения в https://forum.apostrophecms.org/t/using-styles-with-a-rich-text-widget/115

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

Если у кого-нибудь есть какие-либо предложения или вы можете указать мне правильное направление, я был бы очень признателен!

1 Ответ

1 голос
/ 16 апреля 2020

Чтобы предотвратить копирование и вставку с веб-страниц или приложений в макет вашего сайта, Apostrophe фильтрует разметку, отправляемую для виджетов с форматированным текстом.

Вы можете настроить эту фильтрацию, чтобы разрешить Вы хотите разрешить, не пропуская нежелательную почту.

Чтобы сделать это, посмотрите ApostropheCMS CKEditor HOWTO , в частности, описание того, как настроить sanitize-html для вашего проекта.

Вы можете написать: 

// in your project level lib/modules/apostrophe-rich-text-widgets/index.js file
module.exports = {
  sanitizeHtml: {
    allowedAttributes: {
      'h1': [ 'style' ]
      // etc. for other tags allowing this
    }
  }
};

Но это позволит вставить случайный CSS. Лучше было бы определить CSS классы, такие как center для типов выравнивания текста, которые вы хотите, а затем использовать функцию allowedClasses sanitize- html: 

allowedClasses: {
  h1: [ 'center' ]
}

Тогда у вас есть лучший контроль того, что происходит, когда пользователи вставляют контент на ваш сайт.

...