README

一个显示原始代码的块，可通过 ace 编辑器字段进行编辑（私有项目，不提供帮助/支持）

要求

• SilverStripe CMS ^4.3
• dnadesign/silverstripe-elemental ^4.0
• jinjie/codeeditorfield ^0.0.4

有关此模块的 SilverStripe 4.2 和 Elemental 3.x 兼容版本的 1.x 发行版，请参阅 1.x 发行线。

建议

• derralf/elemental-styling

在使用 derralf/elemental-styling 中的 StyledTitle 时，根据需要修改 /templates/Derralf/Elements/ImageTeaser/Includes/Title.ss。

安装

• 使用 Composer 安装模块

  composer require derralf/elemental-codeeditorfield
  

配置

基本/默认配置。将其添加到您的 mysite/_config/elements.yml

注意 styles 和 image_view_modes 的选项，其中列出了扩展中包含的模板。

将 defaults:ImageViewMode 设置为 null 或 image_view_modes 中可用的任何模板。

可选地，您可以设置 defaults:Style 为任何可用的 styles。

##############################################################
# Template/Example for Bootstrap 3
##############################################################

---
Name: elementalcodeeditorfield
After: 'elemental-codeeditorfield'
---

Derralf\Elements\CodeEditorField\Element\ElementCodeEditorField:
  # default editor language
  defaultProgrammingLanguageMode: 'ace/mode/html'
  # disable StyledTitle
  title_tag_variants: null
  title_alignment_variants: null
  # styles
  style_default_description: 'Standard: 2 Spalten'
  styles:
    DefaultWell: 'with well'
    FullWidthWell: 'with well and full width (Container-Breakout)'


#
# OR
#


##############################################################
# Template/Example for Bootstrap 4
##############################################################

---
Name: elementalcodeeditorfield
After: 'elemental-codeeditorfield'
---

Derralf\Elements\CodeEditorField\Element\ElementCodeEditorField:
  # default editor language
  defaultProgrammingLanguageMode: 'ace/mode/html'
  # disable StyledTitle
  title_tag_variants: null
  title_alignment_variants: null
## Bootstrap 4 default/example config
styles:
  BS4Card: 'with well (BS4-card)'
  BS4FullWidthCard: 'with well (BS4-card) and full width (Container-Breakout)'
styles_default_description: ''
colors:
  bg-primary: 'primary'
  bg-secondary: 'secondary'
  bg-light: 'light'
  bg-success: 'success'
  bg-danger: 'danger'
  bg-warning: 'warning'
  bg-info: 'info'
  bg-dark: 'dark'

此外，您可以应用默认样式

# add default styles
DNADesign\Elemental\Controllers\ElementController:
  default_styles:
    # boptstrap 3 example styles
    - derralf/elemental-codeeditorfield:client/dist/styles/frontend-default.css
    # boptstrap 4 example styles
    - derralf/elemental-codeeditorfield:client/dist/styles/frontend-bootstrap-4-example.css

有关禁用默认样式的说明，请参阅 Elemental 文档中的 说明。

添加自己的模板

您可以按如下方式添加自己的模板/样式

Derralf\Elements\CodeEditorField\Element\ElementCodeEditorField:
  styles:
    MyCustomTemplate: "new customized special Layout"

...并将名为 ElementCodeEditorField_MyCustomTemplate.ss 的模板放在 themes/{your_theme}/templates/Derralf/Elements/CodeEditorField/Element/
和/或 为 .derralf__elements__codeEditorfield__element__elementcodeeditorfield.mycustomtemplate 添加样式到您的样式表

模板说明

包含的模板基于 Bootstrap 3+，可能需要额外的/附加的样式（请参阅包含的样式表）。

• 可选地，您可以将此模块提供的基本 CSS 样式要求添加到您的控制器类中，例如：mysite/code/PageController.php

      Requirements::css('derralf/elemental-codeeditorfield:client/dist/styles/frontend-default.css');
  

  或将 client/src/styles/frontend-default.scss 复制并修改到您的主题 scss 中

屏幕截图

（不可用）