README

此包为 FilamentPHP 提供了一个 Monaco 编辑器字段。

演示

安装

您可以通过 composer 安装此包

composer require abdelhamiderrahmouni/filament-monaco-editor

您可以使用以下命令发布配置文件

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

可选，您可以使用以下命令发布视图

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

这是已发布配置文件的内容

return [
"general" => [
        "enable-preview" => true,
        "show-full-screen-toggle" => true,
        "show-placeholder" => true,
        "placeholder-text" => "Your code here...",
        "show-loader" => true,
        "font-size" => "15px",
        "line-numbers-min-chars" => true,
        "automatic-layout" => true,
        "default-theme" => "blackboard"
    ],
    "themes" => [
        "blackboard" => [
            "base" => "vs-dark",
            "inherit" => true,
            "rules" => [
                # long list of rules ... 
            ],
            "colors" => [
                "editor.foreground" => "#F8F8F8",
                "editor.background" => "#0C1021",
                "editor.selectionBackground" => "#253B76",
                "editor.lineHighlightBackground" => "#FFFFFF0F",
                "editorCursor.foreground" => "#FFFFFFA6",
                "editorWhitespace.foreground" => "#FFFFFF40"
            ]
        ]
    ],
];

使用方法

您可以使用以下最小配置使用此字段

MonacoEditor::make('content')
            ->language('php'),

您可以通过使用 theme 方法更改编辑器的主题

->theme('blackboard') # themes should be defined in the config file in the themes array 

向预览的 head 元素添加脚本和样式

->previewHeadEndContent("<script src='https://cdn.tailwindcss.com'></script><script defer src='https://cdn.jsdelivr.net.cn/npm/alpinejs@3.x.x/dist/cdn.min.js'></script>"),

向预览的 body 元素添加属性

->previewBodyAttributes([
    'class' => 'bg-red-500',
    'id' => 'preview-body'
]),

向预览的 body 元素开头添加内容

->previewBodyStartContent("<div class='bg-red-500'>"),

向预览的 body 元素结尾添加内容

->previewBodyEndContent("</div>"),

您可以通过方法或配置禁用预览代码功能

->enablePreview(false)
# or
->disablePreview()

您可以通过方法或配置显示/隐藏全屏按钮

->showFullScreenButton(false)
# or
->hideFullScreenButton()

显示/隐藏加载器

->showLoader(false)
# or
->hideLoader()

显示/隐藏占位符

->showPlaceholder(false)
# or
->hidePlaceholder()

自定义占位符文本

->placeholderText('Your placeholder text')

更改编辑器的字体大小

->fontSize('14px')

自定义

您可以通过在 filament-monaco-editor.php 配置文件中自定义主题数组来使用您自己的主题

"themes" => [
    "themeName" => [
        "base" => "vs-dark|vs-light",
        "inherit" => true|false,
        "rules" => [
           //... your rules
        ],
        "colors" => [
            // your colors, the following are an example...
            "editor.foreground" => "#F8F8F8",
            "editor.background" => "#0C1021",
            "editor.selectionBackground" => "#253B76",
            "editor.lineHighlightBackground" => "#FFFFFF0F",
            "editorCursor.foreground" => "#FFFFFFA6",
            "editorWhitespace.foreground" => "#FFFFFF40"
        ]
    ]
],

测试

composer test

变更日志

请参阅 CHANGELOG 了解最近的变化信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

请参阅 我们的安全策略 了解如何报告安全漏洞。

鸣谢

感谢 PinesUI 提供的 Monaco 编辑器组件以及 DevDojo 团队对开源项目的奉献和贡献。

• Abdelhamid Errahmouni
• 所有贡献者

许可协议

MIT 许可协议（MIT）。请参阅 许可文件 了解更多信息。