PHPackages                             derralf/elemental-codeeditorfield - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. derralf/elemental-codeeditorfield

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

derralf/elemental-codeeditorfield
=================================

A content block to write raw code, e.g. HTML

191JavaScript

Since Apr 11Pushed 4y ago1 watchersCompare

[ Source](https://github.com/derralf/silverstripe-elemental-codeeditorfield)[ Packagist](https://packagist.org/packages/derralf/elemental-codeeditorfield)[ RSS](/packages/derralf-elemental-codeeditorfield/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

SilverStripe Elemental Code Editor Field
========================================

[](#silverstripe-elemental-code-editor-field)

A block that displays raw code, editable through an ace editor field (private project, no help/support provided)

Requirements
------------

[](#requirements)

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

For a SilverStripe 4.2 and Elemental 3.x compatible version of this module, please see the [1.x release line](https://github.com/derralf/silverstripe-elemental-image-teaser/tree/1.0#readme).

Suggestions
-----------

[](#suggestions)

- derralf/elemental-styling

Modify `/templates/Derralf/Elements/ImageTeaser/Includes/Title.ss` to your needs when using StyledTitle from derralf/elemental-styling.

Installation
------------

[](#installation)

- Install the module via Composer ```
    composer require derralf/elemental-codeeditorfield

    ```

Configuration
-------------

[](#configuration)

A basic/default config. Add this to your **mysite/\_config/elements.yml**

Note the options for `styles` and `image_view_modes`, in which the templates contained in the extension are listed.

Set `defaults:ImageViewMode` to `null` or any of the avaiable Templates from `image_view_modes`.

Optionally you may set `defaults:Style`to any of the available `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'

```

Additionally you may apply the default styles:

```
# 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

```

See Elemental Docs for [how to disable the default styles](https://github.com/dnadesign/silverstripe-elemental#disabling-the-default-stylesheets).

### Adding your own templates

[](#adding-your-own-templates)

You may add your own templates/styles like this:

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

```

...and put a template named `ElementCodeEditorField_MyCustomTemplate.ss`in `themes/{your_theme}/templates/Derralf/Elements/CodeEditorField/Element/`
**and/or**add styles for `.derralf__elements__codeEditorfield__element__elementcodeeditorfield.mycustomtemplate` to your style sheet

Template Notes
--------------

[](#template-notes)

Included templates are based on Bootstrap 3+ but may require extra/additional styling (see included stylesheet).

- Optionaly, you can require basic CSS stylings provided with this module to your controller class like: **mysite/code/PageController.php**```
        Requirements::css('derralf/elemental-codeeditorfield:client/dist/styles/frontend-default.css');

    ```

    or copy over and modify `client/src/styles/frontend-default.scss` in your theme scss

Screen Shots
------------

[](#screen-shots)

(not available)

###  Health Score

16

—

LowBetter than 5% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community5

Small or concentrated contributor base

Maturity26

Early-stage or recently created project

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/d6353682e85ce5b5f238126c18b0e13770f0e0ffaf9c9d24588cdd2a84ab9a8b?d=identicon)[derralf](/maintainers/derralf)

### Embed Badge

![Health badge](/badges/derralf-elemental-codeeditorfield/health.svg)

```
[![Health](https://phpackages.com/badges/derralf-elemental-codeeditorfield/health.svg)](https://phpackages.com/packages/derralf-elemental-codeeditorfield)
```

###  Alternatives

[mediconesystems/livewire-datatables

Advanced datatables using Laravel, Livewire, Tailwind CSS and Alpine JS

1.2k711.3k8](/packages/mediconesystems-livewire-datatables)[lorisleiva/cron-translator

Makes CRON expressions human-readable

3148.5M31](/packages/lorisleiva-cron-translator)[dusank/knapsack

Collection library for PHP

5351.0M25](/packages/dusank-knapsack)[log1x/poet

Configuration-based post type, taxonomy, editor color palette, block category, and block registration for Sage 10.

218280.1k1](/packages/log1x-poet)[freemius/wordpress-sdk

Freemius WordPress SDK

303101.4k4](/packages/freemius-wordpress-sdk)[prestashop/psgdpr

PrestaShop module psgdpr

326.3M2](/packages/prestashop-psgdpr)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)