[扩展推荐] 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 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。