README

✨ 简介

一个基于 Jodit 编辑器的强大 Livewire 富文本编辑器（WYSIWYG）组件。

使用此包之前，您必须已安装 Livewire 3。

📦 安装

通过 Composer 安装此包

composer require mantix/livewire-jodit-text-editor

将 Jodit 编辑器主题和库包含在您的布局或特定视图中。

<!-- Include Jodit CSS Styling -->
<link rel="stylesheet" href="//unpkg.com/jodit@4.1.16/es2021/jodit.min.css">

<!-- Include the Jodit JS Library -->
<script src="//unpkg.com/jodit@4.1.16/es2021/jodit.min.js"></script>

或者，您可以使用 NPM 直接在项目中安装 Jodit 编辑器

npm install jodit

在您的 app.js 中导入它，例如

// Jodit Editor
import 'jodit/esm/plugins/resizer/resizer'; // Resizer plugin is used when inserting images
import 'jodit/esm/plugins/video/video'; // Video plugin is used to insert videos
// Feel free to add extra plugins here...
import { Jodit } from 'jodit';
window.Jodit = Jodit;

并在您的 app.scss 中导入它，例如

// Jodit Editor
@import 'jodit/es2021/jodit';

有关更多信息，请参阅 Jodit 编辑器文档。

🎬 展示

现在您可以像使用其他组件一样使用文本编辑器组件。

<livewire:jodit-text-editor wire:model.live="content" />

或者，添加 "buttons" 属性以动态定义按钮。

<livewire:jodit-text-editor wire:model.live="content" :buttons="['bold', 'italic', 'underline', 'strikeThrough', '|', 'left', 'center', 'right', '|', 'link', 'image']" />

🎨 自定义 UI

文本编辑器组件完全可定制。只需发布视图文件，使其成为您自己的。

php artisan vendor:publish --tag=livewire-jodit-text-editor-views

🔄 变更日志

有关最近更改的更多信息，请参阅 CHANGELOG。

🤝 贡献

有关详细信息，请参阅 CONTRIBUTING。

❤️ 支持我

这个插件对您有帮助吗？请通过在 LinkedIn 或 X 上与我联系来告诉我。

mantix / livewire-jodit-text-editor

维护者

详细信息