[扩展推荐] Laravel-trix 集成 Basecamp 的 Trix 所见即所得编辑器（WYSIWYG）
Trix 是一个来自 Basecamp 创建者的开源的所见即所得编辑器，它被设计成一个与众不同的编辑器。
以下来自于 Trix 官网描述（也是演示页面）:
大多数所见即所得编辑器是围绕 HTML 的 contenteditable 属性和 execCommand API 的包装器，这些 API 由微软设计，支持在 Internet Explorer 5.5中实时编辑网页，并最终被其他浏览器逆向工程和复制。
因为这些 API 从来没有被完全规范化或者文档化，而且因为所见即所得 HTML 编辑器的范围非常大，所以每个浏览器的实现都有自己的一套 bug 和怪癖，而 JavaScript 开发人员则需要解决不一致的问题。
Trix 通过将 contenteditable 属性视为 I/O 设备来避免这些不一致: 当输入进入编辑器时，Trix 将该输入转换为其内部文档模型上的编辑操作，然后将该文档重新渲染回编辑器。 这使 Trix 能够完全控制每次击键后发生的事情，并且完全避免使用 execCommand。
由于 Trix 是 CSS 和 JavaScript 组成的，因此你已经可以将其与 Laravel 集成，但laravel-trix是一个可以更加轻松设置的扩展包。
首先，请使用 Composer 安装扩展包
composer require te7a-houdini/laravel-trix
发布资源：
php artisan vendor:publish --provider="Te7aHoudini\LaravelTrix\LaravelTrixServiceProvider"
然后，运行迁移：
php artisan migrate
安装完扩展包之后，假设你有一个文章模型，并希望 Trix 编辑器出现在它的创建和更新表单上。 所有你需要做的就是使用 Blade 和它包含的指令:
<html>
<head>
@trixassets
</head>
<body>
<form method="POST" action="route('article.store')">
@csrf
@trix(\App\Article::class, 'content')
<input type="submit">
</form>
</body>
</html>
这个扩展包还有更多的功能，比如处理上传的文件，对现有模型的渲染，以及高级配置。 你可以在 Github 页面上找到更多关于这个扩展包的信息，并阅读完整的用户指南。
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：