README

Neos 扩展包，添加了更改 ul 和 ol 列表样式的选项。

警告

此包是 WIP。

请牢记以下注意事项

• 此插件不支持向列表添加类。相反，它将在列表中添加一个属性 data-list-style-type="circle"
• 当更改列表的样式时，必须在编辑器中选择整个列表，否则列表将分割成多个具有不同样式的列表

安装

composer require lala/list-style:dev-master

使用方法

1. 启用属性的格式化

'Neos.Demo:Content.Text':
  superTypes:
    'Neos.Neos:Content': true
    'Neos.NodeTypes.BaseMixins:TextMixin': true

  properties:
    text:
      ui:
        inline:
          editorOptions:
            formatting:
              # Enable unordered lists
              ul: true
              # Enabled ordered lists
              ol: true
            # Configure available list styles:
            #  true: enable all
            #  false|null: disable all
            #  ol|ul:
            #    true: enable all for list type
            #    false|null: disable all for list type
            #    [style]: true|false|null
            listStyle:
              ul: true
              ol:
                upper-roman: true
                lower-alpha: ~

1. 在编辑器中创建一个列表
2. 使用光标选择整个列表
3. 打开下拉菜单并更改列表样式

为属性启用列表样式

在以下每种情况下 true 启用样式，而 false 和 null 将同等禁用。

• 启用 所有 配置的样式
  editorOptions.listStyle: true
• 为列表类型启用 所有
  editorOptions.listStyle.ul: true 或 editorOptions.listStyle.ol: ~
• 启用单个样式
  这可以通过它们的标识符来完成，例如 editorOptions.listStyle.ul.disc

注意：一旦配置可用，就会使用它，即仅指定 editorOptions.listStyle.ul.square: ~ 不会 启用 ul.* 但 square。同样，仅设置 仅 editorOptions.listStyle.ul: false 也不会启用任何 ol 样式。

样式

请注意，此插件本身不提供列表样式。

在 Resources/Public 中有一个 ListStyles.css 文件，如果需要可以包含它

prototype(Neos.Neos:Page) {
    head.stylesheets {
        listStyles = Neos.Fusion:Component {
            href = Neos.Fusion:ResourceUri {
                path = 'resource://Lala.ListStyle/Public/ListStyles.css'
            }

            renderer = afx`
                <link rel="stylesheet" href={props.href} media="all" />
            `
        }
    }
}

自定义

可以通过设置来自定义可用的列表样式

Lala:
  ListStyle:
    styles:
      ul:
        default:
          value: ''
          title: 'Default'
        circle:
          value: 'neos-list-circle'
          title: 'Circle'
        square:
          value: 'neos-list-square'
          title: 'Square'

        # To disable styles, set them to NULL
        # square: ~
      ol:
        default:
          value: ''
          title: 'Default'
        upper-roman:
          value: 'neos-list-upper-roman'
          title: 'Upper Roman'
        lower-alpha:
          value: 'neos-list-lower-alpha'
          title: 'Lower Alpha'

title 用于后端的按钮标签，value 将是列表的 list-style-type 属性的值。请确保为自定义列表样式添加样式。