作为一名 Laravel 开发者，经常需要为后台管理系统构建界面。最近在使用 Laravel Nova 为客户搭建内容管理平台时，我遇到了一个常见的痛点：需要为博客文章、产品描述等字段提供丰富的文本编辑功能。然而，Nova 默认的 Textarea 字段仅仅是一个纯文本输入框，它无法支持加粗、斜体、列表、插入图片等常见的富文本操作。
这给内容编辑者带来了极大的不便。他们不得不手动输入 HTML 标签来格式化内容，或者在外部编辑器（如 Word 或其他在线编辑器）中编辑好内容后，再复制粘贴到 Nova 的文本框中。这种工作流程不仅效率低下，还容易导致格式混乱、图片无法直接嵌入等问题，严重影响了用户体验和内容质量。我迫切需要一个解决方案，能够让内容编辑者在 Nova 后台直接进行所见即所得的富文本编辑，最好还能支持图片上传。
Composer在线学习地址：学习地址
为了解决这个燃眉之急，我开始寻找一个能在 Nova 中无缝集成富文本编辑器的解决方案。幸运的是，我发现了 emilianotisato/nova-tinymce 这个 Composer 包，它简直是为 Nova 量身定制的救星！这个包完美地将知名的 TinyMCE 编辑器引入到 Nova 的 Textarea 字段中，不仅提供了强大的富文本编辑能力，更令人惊喜的是，它还支持与 Laravel Filemanager (LFM) 集成，实现图片直接上传功能。
安装与基础使用
安装 emilianotisato/nova-tinymce 的过程非常简单，只需几条 Composer 命令即可：
composer require emilianotisato/nova-tinymce安装完成后，你需要发布 TinyMCE 的 JavaScript 和 CSS 资源：
php artisan vendor:publish --provider="EmilianotisatoNovaTinyMCEFieldServiceProvider"现在，你可以在你的 Nova 资源文件中，将普通的 Textarea 字段替换为 NovaTinyMCE 字段。例如，如果你有一个 body 字段用于存储
use EmilianotisatoNovaTinyMCENovaTinyMCE;use LaravelNovaFieldsID;use IlluminateHttpRequest;// ...public function fields(Request $request){ return [ ID::make()->sortable(), NovaTinyMCE::make('body'), // ... 其他字段 ];}保存并刷新你的 Nova 后台，你就会发现原来的纯文本区域已经变成了一个功能完善的 TinyMCE 富文本编辑器！
强大的定制化与图片上传功能
仅仅这样，你就已经拥有了一个功能完善的富文本编辑器。但
emilianotisato/nova-tinymce的真正亮点在于它对图片上传的完美支持，这极大地提升了内容编辑的便捷性。
vizcom.ai
AI草图渲染工具，快速将手绘草图渲染成精美的图像
139 查看详情
要启用图片上传功能，我们通常会结合 UniSharp Laravel Filemanager (LFM) 使用。首先，你需要安装并配置好 Laravel Filemanager。然后，在
NovaTinyMCE字段的options方法中，传入use_lfm => true选项：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 版本，还需要运行额外的命令来修复一些文件：
php artisan nova-tinymce:support-lfm并且，你可能需要更新
lfm_url键来匹配旧的 URL 版本，例如'lfm_url' => 'laravel-filemanager'。除了图片上传，你还可以根据需求定制 TinyMCE 的各种选项，例如调整编辑器的高度、添加或移除插件、自定义工具栏按钮等等。这些配置选项可以直接传递给
options()方法：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中集成富文本编辑器并上传图片的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/882348.html
微信扫一扫 
支付宝扫一扫 
