Have you seen our new video tutorials? Check it out!

Editor Field Type

A powerful code editor field type built with the Ace editor.

Introduction

anomaly.field_type.editor

The editor field type provides a code editor input powered by Ace.

Configuration

Below is the full configuration available with defaults values:

"example" => [
    "type"   => "anomaly.field_type.editor",
    "config" => [
        "default_value" => null,
        "mode"          => "twig",
        "height"        => 500,
        "word_wrap"     => null,
    ]
]
Properties
Key Example Description

default_value

<h3>Hello World</h3>

The default value.

mode

css

The editor mode. Valid options can be found in the editor.php config file.

height

1000

The height of the editor.

word_wrap

true

Whether to wrap long lines of text or not.

Addon Configuration

The editor field type configures Ace options using it's editor.php config file.

You can override these options by publishing the addon and modifying the resulting configuration file:

php artisan addon:publish anomaly.field_type.editor

The field type will be published to /resources/{application}/addons/anomaly/editor-field_type.

Success: If you feel a popular mode is missing - add it to the config and send a pull request to https://github.com/anomalylabs/editor-field_type

Storage Files

The editor field type dumps content to a corresponding storage file. The path to this file will be visible underneath the editor when app.debug is enabled.

You can edit this file directly and it will automatically sync back and forth with the database value. This is for convenience only, never commit the storage directory.

Usage

This section will show you how to use the field type via API and in the view layer.

Setting Values

You can set the field type value with a string.

$entry->example = $html;

Basic Output

The field type always returns the storage file content by default.

$entry->example; // Raw contents of storage::example/input/file.js

Presenter Output

This section will show you how to use the decorated value provided by the \Anomaly\EditorFieldType\EditorFieldTypePresenter class.

EditorFieldTypePresenter::path()

The path method returns the prefix hinted path to the storage file.

Returns: string
Example
$decorated->example->path(); // storage::the/path/example.js
Twig
{{ decorated.example.path() }} // storage::the/path/example.js

EditorFieldTypePresenter::render()

The render method returns the rendered view if the mode is twig, blade, or html.

Returns: string
Arguments
Key Required Type Default Description

$payload

false

array

null

Additional payload data for the view.

Example
$decorated->example->render(['name' => 'Ryan']);
Twig
{{ decorated.example.render({'name': 'Ryan'})|raw }}

EditorFieldTypePresenter::parse()

The parse method runs the file contents through the view engine. This is great for parsing Twig in js or other files.

Returns: string
Arguments
Key Required Type Default Description

$payload

false

array

null

Additional payload data for the view.

Example
$decorated->example->parse(['name' => 'Ryan']);
Twig
{{ decorated.example.parse({'name': 'Ryan'})|raw }}

EditorFieldTypePresenter::content()

The content method returns the raw value.

Returns: string
Example
$decorated->example->content();
Twig
{{ decorated.example.content() }}

EditorFieldTypePresenter::__toString()

The __toString method is mapped to render for twig, blade, and html files and mapped to content for everything else.

Returns: string
Example
$decorated->example;
Twig
{{ decorated.example|raw }}
Heads Up: The __toString will not properly display exceptions spurring from value content.