interaction-design-foundation/nova-html-code-field

一个Laravel Nova字段，用于编写原始HTML并进行预览。

维护者

详细信息

github.com/InteractionDesignFoundation/nova-html-code-field

来源

问题

安装次数: 63,457

依赖者: 0

建议者: 0

安全: 0

星标: 9

关注者: 7

分支: 0

公开问题: 2

语言:Vue

2.1.0 2024-03-12 00:02 UTC

Requires

Requires (Dev)

MIT cddf53575f0518c4c40235e143044c8f25b5f2ab

htmlnovalaravellaravel-nova-field

This package is auto-updated.

Last update: 2024-09-12 21:57:04 UTC

README

Latest Stable Version Total Downloads

image

有时你需要一个选项来编写原始HTML，并对其实时预览。此软件包提供了这样的功能。在底层，此软件包使用iframe来预览您所写的HTML代码，因此Nova样式不会泄漏到预览中。此外，您可以提供自定义CSS文件的URL，从而使您的HTML预览非常接近最终结果。

image

安装

您可以通过composer将此软件包安装到使用Nova的Laravel应用程序中

composer require interaction-design-foundation/nova-html-code-field

用法

use InteractionDesignFoundation\NovaHtmlCodeField\HtmlCode;

public function fields()
{
    return [
        HtmlCode::make('HTML content', 'content'),
     ];
}

选项

完整示例

HtmlCode::make('HTML content', 'content')
    ->styles([asset(mix('css/app.css'))]), // optional, you can inject your custom CSS files to have more realistic preview.
    ->previewTemplate('<section class="panel">%CODE%</section>') // optional, wrap editable code to have even better preview (good together with custom styles).

变更日志

请参阅发布信息，了解最近有哪些变化。

贡献

请参阅贡献指南以获取详细信息。

许可证

MIT许可证（MIT）。请参阅许可证文件以获取更多信息。

待办事项

  1. 添加工具栏
  2. 添加HTML验证器（https://npmjs.net.cn/package/html-validator）
  3. 优化预览：仅重新渲染更改的节点