作为一名 laravel 开发者，经常需要为后台管理系统构建界面。最近在使用 Laravel Nova 为客户搭建内容管理平台时，我遇到了一个常见的痛点：需要为博客文章、产品描述等字段提供丰富的文本编辑功能。然而，Nova 默认的 Textarea 字段仅仅是一个纯文本输入框，它无法支持加粗、斜体、列表、插入图片等常见的富文本操作。
这给内容编辑者带来了极大的不便。他们不得不手动输入 html 标签来格式化内容，或者在外部编辑器（如 word 或其他在线编辑器）中编辑好内容后，再复制粘贴到 Nova 的文本框中。这种工作流程不仅效率低下，还容易导致格式混乱、图片无法直接嵌入等问题，严重影响了用户体验和内容质量。我迫切需要一个解决方案，能够让内容编辑者在 Nova 后台直接进行所见即所得的富文本编辑，最好还能支持图片上传。
为了解决这个燃眉之急，我开始寻找一个能在 Nova 中无缝集成富文本编辑器的解决方案。幸运的是，我发现了 emilianotisato/nova-tinymce 这个 Composer 包，它简直是为 Nova 量身定制的救星！这个包完美地将知名的 TinyMCE 编辑器引入到 Nova 的 Textarea 字段中，不仅提供了强大的富文本编辑能力，更令人惊喜的是，它还支持与 Laravel Filemanager (LFM) 集成，实现图片直接上传功能。
安装与基础使用
安装 emilianotisato/nova-tinymce 的过程非常简单，只需几条 Composer 命令即可：
<code class="bash">composer require emilianotisato/nova-tinymce</code>
安装完成后，你需要发布 TinyMCE 的 javaScript 和 css 资源：
<code class="bash">php artisan vendor:publish --provider="EmilianotisatoNovaTinyMCEFieldServiceProvider"</code>
现在，你可以在你的 Nova 资源文件中，将普通的 Textarea 字段替换为 NovaTinyMCE 字段。例如，如果你有一个 body 字段用于存储
<pre class="brush:php;toolbar:false;">use EmilianotisatoNovaTinyMCENovaTinyMCE; use LaravelNovaFieldsID; use IlluminateHttpRequest; // ... public function fields(Request $request) { return [ ID::make()->sortable(), NovaTinyMCE::make('body'), // ... 其他字段 ]; }
保存并刷新你的 Nova 后台，你就会发现原来的纯文本区域已经变成了一个功能完善的 TinyMCE 富文本编辑器！
强大的定制化与图片上传功能
仅仅这样，你就已经拥有了一个功能完善的富文本编辑器。但 emilianotisato/nova-tinymce 的真正亮点在于它对图片上传的完美支持，这极大地提升了内容编辑的便捷性。
要启用图片上传功能，我们通常会结合 UniSharp Laravel Filemanager (LFM) 使用。首先，你需要安装并配置好 Laravel Filemanager。然后，在 NovaTinyMCE 字段的 options 方法中，传入 use_lfm => true 选项：
<pre class="brush:php;toolbar:false;">use EmilianotisatoNovaTinyMCENovaTinyMCE; // ... NovaTinyMCE::make('body')->options([ 'plugins' => [ 'lists','preview','anchor','pagebreak','image','wordcount','fullscreen','directionality' ], 'toolbar' => 'undo redo | styles | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | image | bullist numlist outdent indent | link', 'use_lfm' => true // 启用 Laravel Filemanager 集成 ]),
如果你使用的是 Laravel Filemanager v1 版本，还需要运行额外的命令来修复一些文件：
<code class="bash">php artisan nova-tinymce:support-lfm</code>
并且，你可能需要更新 lfm_url 键来匹配旧的 URL 版本，例如 'lfm_url' => 'laravel-filemanager'。
除了图片上传，你还可以根据需求定制 TinyMCE 的各种选项，例如调整编辑器的高度、添加或移除插件、自定义工具栏按钮等等。这些配置选项可以直接传递给 options() 方法：
<pre class="brush:php;toolbar:false;">NovaTinyMCE::make('body')->options([ 'height' => '500', // 设置编辑器高度 'plugins' => [ 'advlist','autolink','lists','link','image','charmap','preview','anchor','searchreplace','visualblocks', 'code','fullscreen','insertdatetime','media','table','help','wordcount' ], 'toolbar' => 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help | image media', 'use_lfm' => true, 'lfm_url' => 'filemanager' // 如果你修改了 LFM 的路由，这里也需要对应修改 ]),
你甚至可以发布该包的配置文件 (php artisan vendor:publish --provider="EmilianotisatoNovaTinyMCEFieldServiceProvider" --tag="config")，来设置全局的默认选项，避免每次都重复配置。
优势与实际应用效果
通过集成 emilianotisato/nova-tinymce，我们项目的内容管理体验得到了质的飞跃：
- 提升内容编辑效率和体验： 内容创作者现在可以直接在 Nova 后台进行所见即所得的编辑，无需切换应用，大大提高了工作效率。
- 保证内容质量和一致性： 丰富的格式选项使得内容排版更加美观、专业，并能保持统一的风格。
- 简化图片管理流程： 直接在编辑器内上传和插入图片，省去了手动上传到服务器再复制链接的繁琐步骤。
- 高度可定制化： 灵活的配置选项允许我们根据不同项目的需求，定制出最适合的编辑器功能和界面。
- 降低开发维护成本： 作为一个成熟的 Composer 包，它提供了稳定的功能和良好的维护，减少了我们自行开发富文本编辑功能的复杂性。
总而言之，emilianotisato/nova-tinymce 是一个极其实用且强大的 Composer 包，它优雅地解决了 Laravel Nova 在富文本编辑方面的痛点。如果你也正在为 Laravel Nova 的内容编辑功能发愁，强烈推荐你尝试一下这个包！它将彻底改变你的内容管理方式，让编辑变得更加轻松高效。
以上就是告别纯文本！如何使用emilianotisato/nova-tinymce在LaravelNova中集成富文本编辑器并上传图片的详细内容，更多请关注