承接 riodwanto/filament-ace-editor 相关项目开发

从需求分析到上线部署,全程专人跟进,保证项目质量与交付效率

邮箱:yvsm@zunyunkeji.com | QQ:316430983 | 微信:yvsm316

riodwanto/filament-ace-editor

最新稳定版本:4.1.0

Composer 安装命令:

composer require riodwanto/filament-ace-editor

包简介

An ACE editor field for Filament forms with syntax highlighting, themes, and autocompletion.

README 文档

README

Latest Version on Packagist Total Downloads

Ace Editor implementation for Filament Form.

Requirements

  • PHP 8.2+
  • Laravel 11.28+

Version Compatibility

Package Version Filament Version Status
4.1.0 4.x Latest ✨
1.x 3.x Stable ✅

Choose the package version that matches your Filament installation. We recommend using the latest compatible version for the best features and security updates.

Installation

You can install the package via composer:

composer require riodwanto/filament-ace-editor

The package will automatically detect your Filament version and install the compatible release.

Usage

use Riodwanto\FilamentAceEditor\AceEditor;

public function form(Form $form): Form
{
    return $form
        ->schema([
            ...
            AceEditor::make('code_editor')
                ->label('Code Editor')
                ->mode('php')
                ->theme('github')
                ->darkTheme('dracula')
                ->fontSize('14px')
                ->cursorStyle('smooth')
                ->softWrap('free')
                ->tabSize(4)
                ->useSoftTabs(true)
                ->addExtensions(['language_tools', 'beautify'])
                ->customCompletions([
                    'php' => [
                        ['caption' => 'dd()', 'value' => 'dd(${1:variable});', 'meta' => 'Laravel debug helper'],
                        ['caption' => 'collect()', 'value' => 'collect(${1:array});', 'meta' => 'Laravel collection'],
                    ]
                ]),
        ]);
}
Available methods
Method Info
mode change editor programming language
theme default theme in light mode
darkTheme default theme in dark mode
height set editor height
disableDarkTheme disable darkTheme, theme will be used as default
editorConfig editor config will be initialize after ace loaded. (it is config that used in ace.config)
editorOptions editor options used in ace.editor.options, you can set additional ace option here.
addExtensions by default, not all options available in editorOptions. you must enable extension first with this method.
headerTitle Editor tittle
fontSize Set font size using string (px, rem, em) or integer
cursorStyle Set cursor style: ace, slim, smooth, wide, smooth-slim
softWrap Control text wrapping behavior: off, free, printMargin, textWidth
showGutter Show/hide line numbers and breakpoints
showPrintMargin Show/hide vertical print margin line
foldStyle Set code folding style: manual, markbegin, markbeginend
tabSize Set tab size for indentation
useSoftTabs Use spaces instead of tabs for indentation

All default values can be found in the Configuration section below.

Publishing

You can publish the views using:

php artisan vendor:publish --tag="filament-ace-editor-views"

You can publish the config file with:

php artisan vendor:publish --tag="filament-ace-editor-config"

Configuration

This is the contents of the published config file:

return [
    ...

    'base_url' => 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.3',
    'file' => 'ace.js',

    'editor_config' => [
        'useWorker' => false
    ],

    'editor_options' => [
        'mode' => 'ace/mode/php',
        'theme' => 'ace/theme/eclipse',
        'enableBasicAutocompletion' => true,
        'enableLiveAutocompletion' => true,
        'liveAutocompletionDelay' => 0,
        'liveAutocompletionThreshold' => 0,
        'enableSnippets' => true,
        'enableInlineAutocompletion' => true,
        'showPrintMargin' => true,
        'wrap' => 'off',
        'animatedScroll' => false,
        'fadeFoldWidgets' => false,
        'displayIndentGuides' => false,
        'highlightGutterLine' => false,
        'showInvisibles' => false,
    ],

    'dark_mode' => [
        'enable' => true,
        'theme' => 'ace/theme/dracula',
    ],

    'enabled_extensions' => [
        'beautify',
        'language_tools',
        'inline_autocomplete',
        'rtl',
        'statusbar',
        'whitespace',
        'searchbox',
    ],

    ...
];

Supported Features

This package supports most of the powerful features from Ace Editor:

Feature Support
Syntax highlighting themes ✅ Full
Automatic indent/outdent ✅ Full
Huge document handling ✅ Full
Search and replace ✅ Full
Line wrapping ✅ Full
Multiple cursors and selections ✅ Full
Autocompletion ✅ Full
Snippets ✅ Full
Custom key bindings ⚠️ Limited
Command line interface ❌ Not supported

Limited: Custom key bindings require additional configuration.

Buy Me A Coffee

Credits

License

The MIT License (MIT). Please see License File for more information.

统计信息

  • 总下载量: 58.87k
  • 月度下载量: 0
  • 日度下载量: 0
  • 收藏数: 20
  • 点击次数: 1
  • 依赖项目数: 6
  • 推荐数: 0

GitHub 信息

  • Stars: 20
  • Watchers: 1
  • Forks: 14
  • 开发语言: JavaScript

其他信息

  • 授权协议: MIT
  • 更新时间: 2024-03-03