告别纯文本！如何使用emilianotisato/nova-tinymce在LaravelNova中集成富文本编辑器并上传图片

这给内容编辑者带来了极大的不便。他们不得不手动输入 HTML 标签来格式化内容，或者在外部编辑器（如 Word 或其他在线编辑器）中编辑好内容后，再复制粘贴到 Nova 的文本框中。这种工作流程不仅效率低下，还容易导致格式混乱、图片无法直接嵌入等问题，严重影响了用户体验和内容质量。我迫切需要一个解决方案，能够让内容编辑者在 Nova 后台直接进行所见即所得的富文本编辑，最好还能支持图片上传。

Composer在线学习地址：学习地址

为了解决这个燃眉之急，我开始寻找一个能在 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="Emilianotisato\NovaTinyMCE\FieldServiceProvider"</code>

现在，你可以在你的 Nova 资源文件中，将普通的 Textarea 字段替换为 NovaTinyMCE 字段。例如，如果你有一个 body 字段用于存储

<pre class="brush:php;toolbar:false;">use Emilianotisato\NovaTinyMCE\NovaTinyMCE;
use Laravel\Nova\Fields\ID;
use Illuminate\Http\Request;

// ...

public function fields(Request $request)
{
    return [
        ID::make()->sortable(),

        NovaTinyMCE::make('body'),

        // ... 其他字段
    ];
}

保存并刷新你的 Nova 后台，你就会发现原来的纯文本区域已经变成了一个功能完善的 TinyMCE 富文本编辑器！

强大的定制化与图片上传功能

仅仅这样，你就已经拥有了一个功能完善的富文本编辑器。但 emilianotisato/nova-tinymce 的真正亮点在于它对图片上传的完美支持，这极大地提升了内容编辑的便捷性。

AI图像编辑器

使用文本提示编辑、变换和增强照片

46

查看详情

要启用图片上传功能，我们通常会结合 UniSharp Laravel Filemanager (LFM) 使用。首先，你需要安装并配置好 Laravel Filemanager。然后，在 NovaTinyMCE 字段的 options 方法中，传入 use_lfm => true 选项：

<pre class="brush:php;toolbar:false;">use Emilianotisato\NovaTinyMCE\NovaTinyMCE;

// ...

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="Emilianotisato\NovaTinyMCE\FieldServiceProvider" --tag="config")，来设置全局的默认选项，避免每次都重复配置。

优势与实际应用效果

通过集成 emilianotisato/nova-tinymce，我们项目的内容管理体验得到了质的飞跃：

1. 提升内容编辑效率和体验： 内容创作者现在可以直接在 Nova 后台进行所见即所得的编辑，无需切换应用，大大提高了工作效率。
2. 保证内容质量和一致性： 丰富的格式选项使得内容排版更加美观、专业，并能保持统一的风格。
3. 简化图片管理流程： 直接在编辑器内上传和插入图片，省去了手动上传到服务器再复制链接的繁琐步骤。
4. 高度可定制化： 灵活的配置选项允许我们根据不同项目的需求，定制出最适合的编辑器功能和界面。
5. 降低开发维护成本： 作为一个成熟的 Composer 包，它提供了稳定的功能和良好的维护，减少了我们自行开发富文本编辑功能的复杂性。

总而言之，emilianotisato/nova-tinymce 是一个极其实用且强大的 Composer 包，它优雅地解决了 Laravel Nova 在富文本编辑方面的痛点。如果你也正在为 Laravel Nova 的内容编辑功能发愁，强烈推荐你尝试一下这个包！它将彻底改变你的内容管理方式，让编辑变得更加轻松高效。

以上就是告别纯文本！如何使用emilianotisato/nova-tinymce在LaravelNova中集成富文本编辑器并上传图片的详细内容，更多请关注php中文网其它相关文章！