Skip to content

Commit

Permalink
renaming things
Browse files Browse the repository at this point in the history
  • Loading branch information
lahirulhr committed May 25, 2022
1 parent b998f5f commit 47160ab
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 34 deletions.
53 changes: 21 additions & 32 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,77 +1,66 @@
# Laravel Nova TinyMCE 5 Editor field
# Laravel Nova Image TinyMCE Editor field

Nova TinyMCE 5 Editor is Laravel Nova field that integrates TinyMCE5 WYSIWYG editor.
Nova Image TinyMCE Editor is Laravel Nova field that integrates TinyMCE5 WYSIWYG editor wit inbuilt image gallery.

## Installation

Use the [composer](https://getcomposer.org/) to install this package.

```bash
composer require kraftbit/nova-tinymce5-editor
composer require visanduma/nova-image-tinymce
```

## Usage

Publish config with the following command:

```bash
php artisan vendor:publish --provider="Kraftbit\NovaTinymce5Editor\FieldServiceProvider"
php artisan vendor:publish --provider="Visanduma\NovaImageTinymce\FieldServiceProvider"
```

Now you have nova-tinymce5-editor.php file in your config folder. Edit TinyMCE options and toolbar here.
Now you have nova-image-tinymce.php file in your config folder. Edit TinyMCE options and image related configrations
here.

Add your TinyMCE cloud API key here or to your .env file like this:

```bash
TINYMCE_API_KEY=your-key-here
```
After that you are good to go! Add NovaTinymce5Editor class and field to your Nova Resource.

Run migration to build image table

```bash
php artisan migrate
```

After that you are good to go! Add NovaImageTinymce class and field to your Nova Resource.

```php
use Kraftbit\NovaTinymce5Editor\NovaTinymce5Editor;
use Visanduma\NovaImageTinymce\NovaImageTinymceEditor;

...

NovaTinymce5Editor::make('Body', 'body'),
NovaImageTinymceEditor::make('Body', 'body'),
```

## Available options

You can pass arguments and TinyMCE options directly from a field to customize your toolbar and plugins, like this:

```php
NovaTinymce5Editor::make('Body')->placeholder('Enter content here')
NovaImageTinymceEditor::make('Body')->placeholder('Enter content here')
->options(['toolbar' => ['undo redo | align | link | code'], 'plugins' => ['link code']]),
```
For available options/plugins visit official TinyMCE 5 documentation.

## Integration with Media Library

Nova TinyMCE 5 Editor field works well with [Nova Media Library](https://github.com/classic-o/nova-media-library). If you would like to insert images from Media Library directly to editor content, you need to install Nova Media Library field first and add a Media Library JS callback field. To make it work, you need to add custom *id for TinyMCE field `->id('body')`, and meta argument `->withMeta(['mediaLibrary' => true])` and then pass the same editor *id to your Media Library callback field. In the example below we use 'body' for *id because that is the column name in our database:


```php
NovaTinymce5Editor::make('Body')->id('body')->withMeta(['mediaLibrary' => true]),

MediaLibrary::make('Insert image', 'js_callback_media_library')
->jsCallback('mediaLibrarySelectFiles', ['editor' => 'body'])->types(['Image']),
```
For available options/plugins visit official TinyMCE 5 documentation.

### Screenshots

TinyMCE editor without inserted image
![Nova TinyMCE 5 Editor](https://novapackages.com//storage/screenshots/kGTLSsRXw9yA57nkAFg2a3ntLh3clSrDKRGGSaY0.png)

TinyMCE editor with inserted image
![Nova TinyMCE 5 Editor](https://novapackages.com//storage/screenshots/1aMkYKPgnLIRjObTV03mo2BBwa5KO3bcgwyEkRPs.png)

Image file options
![Nova TinyMCE 5 Editor](https://novapackages.com//storage/screenshots/XAVVvuLaAXfpNRul35ngTbGn4haLp6yDMHV0j5Yg.jpg)


## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

This package was created using Kraftbit/nova-tinymce5-editor core
https://github.com/Kraftbit/nova-tinymce5-editor

## License

[MIT](https://choosealicense.com/licenses/mit/)
1 change: 0 additions & 1 deletion src/FieldServiceProvider.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
use Illuminate\Support\ServiceProvider;
use Laravel\Nova\Events\ServingNova;
use Laravel\Nova\Nova;
use Visanduma\NovaTwoFactor\Http\Middleware\Authorize;

class FieldServiceProvider extends ServiceProvider
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
use Laravel\Nova\Fields\Expandable;
use Laravel\Nova\Fields\Field;

class NovaTinymce5Editor extends Field
class NovaImageTinymceEditor extends Field
{
use Expandable;

Expand Down

0 comments on commit 47160ab

Please sign in to comment.