README

✨ 简介

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

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

📦 安装

使用 Composer 安装此包只需几秒钟

composer require xslain/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

🔄 更新日志

有关最近更改的更多信息，请参阅更新日志。

🤝 贡献

有关详细信息，请参阅贡献指南。

❤️ 支持我

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

xslain/ livewire-jodit-text-editor

维护者

详细信息