PHPackages                             hillbilisim/nova-key-value-with-tinymce - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. hillbilisim/nova-key-value-with-tinymce

ActiveLibrary[Templating & Views](/categories/templating)

hillbilisim/nova-key-value-with-tinymce
=======================================

This Nova package allow you to use TinyMCE editor for text areas.You can customize the editor options and... you can upload images to your server and put them rigth there on the text without leaving the text editor!

v1.1.5(1y ago)032MITVuePHP ^7.3|^8.0|^8.1

Since Jul 11Pushed 1y ago1 watchersCompare

[ Source](https://github.com/hillbilisim/nova-key-value-with-tinymce)[ Packagist](https://packagist.org/packages/hillbilisim/nova-key-value-with-tinymce)[ RSS](/packages/hillbilisim-nova-key-value-with-tinymce/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)Dependencies (1)Versions (39)Used By (0)

Laravel Nova TinyMCE editor (with images upload capabilities!)
--------------------------------------------------------------

[](#laravel-nova-tinymce-editor-with-images-upload-capabilities)

This Nova package allow you to use [TinyMCE editor](https://tiny.cloud) for text areas. You can customize the editor options and... you can **upload images to your server** and put them right there on the content without leaving the text editor!! [![Editor](https://private-user-images.githubusercontent.com/25797257/277254377-8f19556d-d93c-4a97-9337-3c21d059ffc0.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyMDM4NTksIm5iZiI6MTc3NTIwMzU1OSwicGF0aCI6Ii8yNTc5NzI1Ny8yNzcyNTQzNzctOGYxOTU1NmQtZDkzYy00YTk3LTkzMzctM2MyMWQwNTlmZmMwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDAzVDA4MDU1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMyOGQ1NjBjNTJlYTQ5Njk4NDY3NDU0ODJhN2U5ODcyMDc1ZDkyODk2M2MyNDBlOWVhYWU3NGQwMjAyMWVhMmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.e7L_iJCyqBJ15_b0f_-6ZgZdW6YpnTlPGNvoce7CXJc)](https://private-user-images.githubusercontent.com/25797257/277254377-8f19556d-d93c-4a97-9337-3c21d059ffc0.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyMDM4NTksIm5iZiI6MTc3NTIwMzU1OSwicGF0aCI6Ii8yNTc5NzI1Ny8yNzcyNTQzNzctOGYxOTU1NmQtZDkzYy00YTk3LTkzMzctM2MyMWQwNTlmZmMwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDAzVDA4MDU1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMyOGQ1NjBjNTJlYTQ5Njk4NDY3NDU0ODJhN2U5ODcyMDc1ZDkyODk2M2MyNDBlOWVhYWU3NGQwMjAyMWVhMmYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.e7L_iJCyqBJ15_b0f_-6ZgZdW6YpnTlPGNvoce7CXJc)

Installation
------------

[](#installation)

(backward compatibility)

NovaPackageV 1, 2, 3V 1V 4V 2```
composer require hillbilisim/nova-key-value-with-tinymce
```

Run the command bellow, to publish TinyMCE JavaScript and CSS assets.

```
php artisan vendor:publish --provider="HillTech\NovaKeyValueTinyMCE\FieldServiceProvider"
```

Usage
-----

[](#usage)

In your Nova resource add the use declaration and use the NovaTinyMCE field:

```
use HillTech\NovaKeyValueTinyMCE\NovaKeyValueTinyMCE;

// ...

    /**
     * Get the fields displayed by the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),

            NovaKeyValueTinyMCE::make('body'),
        ];
    }
```

By default, the editor comes with some basic options and the image management without the filemanager (inserted just as links).

You can use custome options like this:

```
NovaTinyMCE::make('body')->options([
                'plugins' => [
                    'lists','preview','anchor','pagebreak','image','wordcount','fullscreen','directionality'
                ],
                'toolbar' => 'undo redo | styles | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | image | bullist numlist outdent indent | link'
            ]),
```

### Using the upload images feature with LFM

[](#using-the-upload-images-feature-with-lfm)

Now if you need to upload images from the text editor, we need to install [UniSharp Laravel Filemanager](https://unisharp.github.io/laravel-filemanager/installation), and pass the `use_lfm => true` option to your options array:

```
NovaTinyMCE::make('body')->options([
                'plugins' => [
                    'lists','preview','anchor','pagebreak','image','wordcount','fullscreen','directionality'
                ],
                'toolbar' => 'undo redo | styles | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | image | bullist numlist outdent indent | link',
                'use_lfm' => true
            ]),
```

#### ONLY if you use laravel-filemanager v1

[](#only-if-you-use-laravel-filemanager-v1)

If you use LFM v1 , the last step is to run this command to fix some Filemanager files:

```
php artisan nova-tinymce:support-lfm
```

Finally you will need to update the `lfm_url` key to match the old url version like this `lfm_url' => 'laravel-filemanager`.

*IMPORTANT:* if you are in laravel 6 using laravel-filemanager v1, you will need to import the helper lib coz legacy Filemanager need them: `composer require laravel/helpers`.

Optional Configuration
----------------------

[](#optional-configuration)

### Laravel Filemanager URL

[](#laravel-filemanager-url)

Optional, in case you [change the laravel-filemanager URL](https://unisharp.github.io/laravel-filemanager/config) in the package config file (`config/lmf.php`), you need to pass that info to this nova field with the `lfm_url` key in the options array.

```
// ...
    'use_lfm' => true,
    'lfm_url' => 'my-custom-filemanager-url'
// ...
```

### Override config file

[](#override-config-file)

In case you have in mind a default `options` array to load any time you instantiate the `NovaTinyMCE` field, you can optionally publish the config file and override the `default_options` array:

```
php artisan vendor:publish --provider="HillTech\NovaKeyValueTinyMCE\FieldServiceProvider" --tag="config"
```

This is the contents of the published config file:

```