Plone 5: почему TinyMCE отключает пользовательские встроенные стили?

У меня проблема с TinyMCE и Plone 5, но я не уверен, что ядро ​​проблемы находится в Plone CMS или TinyMCE.

Я добавляю пользовательские стили в конфигурации панели управления TinyMCE ( "Настройки TinyMCE" → "Встроенные стили" ).

Новая конфигурация выглядит примерно так:

Bold|bold|bold
Italic|italic|italic
Underline|underline|underline
Strikethrough|strikethrough|strikethrough
Superscript|superscript|superscript
Subscript|subscript|subscript
Code|code|code
Custom style|customClass|custom-class

Затем редактор TinyMCE правильно отображает меню:

введите описание изображения здесь

Но запись новостей "отключена", нажатие на нее ничего не сделает. Проверяя разметку меню TinyMCE, я нахожу:

<div aria-checked="false" aria-disabled="true" role="menuitem" id="mceu_155" class="mce-menu-item mce-menu-item-preview mce-stack-layout-item mce-last mce-disabled" tabindex="-1">
    <i class="mce-ico mce-i-custom-class"></i>&nbsp;
    <span id="mceu_155-text" class="mce-text">Custom style</span>
</div>

Итак: TinyMCE отключает его. Проблема, похоже, связана с классом, который я использую, а не с именем, которое я даю, или с отсутствующим значком. Если я использую дубликат другого стиля, например...

...
Custom style|italic|custom-class

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

...
Custom style|discreet|custom-class

... но некоторые другие классы не разрешены.

Связано ли это с внутренними компонентами TinyMCE? Может ли TinyMCE "тестировать" класс, чтобы включить/отключить их? Или эта проблема связана с Plone?

Ответы

Ответ 1

После много отладки, потеряв себя внутри макета + Plone JSON conf + TinyMCE, я нашел решение для этой утилиты:

Наличие дополнительного и рабочего встроенного стиля зависит от конфигурации " Inline Styles"...

введите описание изображения здесь

... и Форматы "...

введите описание изображения здесь

Итак: вы можете легко настроить это также через универсальную настройку, обеспечивающую registry.xml следующим образом:

<registry>

    <record name="plone.inline_styles" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="inline_styles">
        <value>
            <element>Bold|bold|bold</element>
            <element>Italic|italic|italic</element>
            <element>Underline|underline|underline</element>
            <element>Strikethrough|strikethrough|strikethrough</element>
            <element>Superscript|superscript|superscript</element>
            <element>Subscript|subscript|subscript</element>
            <element>Code|code|code</element>
            <element>Foo Bar Baz|foo|foo</element>
        </value>
    </record>

    <record name="plone.formats" interface="Products.CMFPlone.interfaces.controlpanel.ITinyMCESchema" field="formats">
        <value>{
    "clearfix": {
        "classes": "clearfix",
        "block": "div"
    },
    "discreet": {
        "inline": "span",
        "classes": "discreet"
    },
    "foo": {
        "inline": "span",
        "classes": "foo"
    }
}
</value>
    </record>

</registry>

ПРИМЕЧАНИЕ: это не, связанное с содержимым меню Форматы.

введите описание изображения здесь

Стили, загруженные из таблиц стилей ++plone++static/tinymce-styles.css, автоматически загружаются благодаря плагину TinyMCE importcss.

Смотрите https://github.com/plone/Products.CMFPlone/issues/492 и https://github.com/plone/Products.CMFPlone/issues/1264 для больше.