PHPackages                             bythepixel/nova-tinymce-field - 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. bythepixel/nova-tinymce-field

ActiveLibrary

bythepixel/nova-tinymce-field
=============================

A Laravel Nova field.

3.0.1(2y ago)034.5k↑64.3%MITPHPPHP ^7.3|^8.0

Since Feb 25Pushed 2y agoCompare

[ Source](https://github.com/bythepixel/nova-tinymce-field)[ Packagist](https://packagist.org/packages/bythepixel/nova-tinymce-field)[ RSS](/packages/bythepixel-nova-tinymce-field/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)DependenciesVersions (16)Used By (0)

nova-tinymce-field
==================

[](#nova-tinymce-field)

This package is a Nova WYSIWIG Field that uses TinyMCE, which has an extensive set of configuration/plugins.

- [Installation](#installation)
- [Local Development](#local-development)
    - [Creating the submodule](#creating-the-submodule)
    - [Updating composer.json](#updating-composerjson)
    - [Updating the Vue components](#updating-the-vue-components)
- [TinyMCE](#tinymce)
    - [Configuration](#configuration)
    - [Shortcodes](#shortcodes)
    - [Enabling the shortcode plugin](#enabling-the-shortcode-plugin)
    - [Registering a shortcode](#registering-a-shortcode)

### Installation

[](#installation)

- `composer require bythepixel/nova-tinymce-field`
- `php artisan vendor:publish --provider="Bythepixel\\NovaTinymceField\\FieldServiceProvider"`

### Local development

[](#local-development)

Developing this package on your local environment might be tricky, especially if using Laravel Sail to containerize the app. Ordinarily when developing a local package, you'd be able to create a symlink to an external directory, and reference that symlink in the `composer.json` file. However, that's a no-go with Sail, since the containers won't have access to that symlinked directory.

To be able to work on the package, see the changes reflected during development, while also isolating this repo while inside your project's repo, we use Git submodules and update the project's `composer.json` to point to the local directory.

#### Creating the submodule

[](#creating-the-submodule)

In the root of your project, run `git submodule add https://github.com/bythepixel/nova-tinymce-field`. This is effectively cloning this repo into your project, while also creating a new `.gitmodules` file, which should look like this:

```
[submodule "nova-tinymce-field"]
    path = nova-tinymce-field
    url = https://github.com/bythepixel/nova-tinymce-field

```

If necessary, this file can be deleted once development is complete. This effectively notifies git to keep this repo, and your project repo, separated. You may, however, want to update your project's root `.gitignore` to exclude this directory. Individual files within the submodule won't be tracked, but it will track the new directory.

#### Updating composer.json

[](#updating-composerjson)

Once the submodule has been created, you can update your project's `composer.json` to point to the new local directory.

First, you must create a new entry under `repositories`:

```
"repositories": [
    ...existing repositories,
    {
        "type": "path",
        "url": "./nova-tinymce-field"
    }
]

```

Second, you must update the `bythepixel/nova-tinymce-field` entry under `required`. If you're developing on this repo's `master` branch, pass in `@dev`.

```
"bythepixel/nova-tinymce-field": "@dev",

```

If you're working on a different branch, the declaration should look like `dev-NAME-OF-BRANCH`:

```
"bythepixel/nova-tinymce-field": "dev-hotfix-field",

```

If your project already has a `composer.lock` file that includes this package, run `composer update bythepixel/nova-tinymce-field`, otherwise just run `composer i`.

Once local development is complete, and your changes have been pushed up to `origin`, you can remove the `.gitmodules` file, and remove the `nova-tinymce-field` directory from your project. Should you choose to commit the `.gitmodules` file to the repo, all future `git clone`s on your project will include empty folders for each declared submodule. Each folder can be populated by `cd`ing into the folder, and running two commands:

1. `git submodule init`
2. `git submodule update`

For more info on submodules, feel free to [read the official documentation](https://git-scm.com/book/en/v2/Git-Tools-Submodules).

#### Updating the Vue components

[](#updating-the-vue-components)

First, you'll need to update the two nova-related paths in this repo's `nova.mix.js` and `package.json`.

In `package.json`, for the `nova:install` command:

```
From:
"nova:install": "npm --prefix='../../vendor/laravel/nova' ci"

To:
"nova:install": "npm --prefix='../vendor/laravel/nova' ci"

```

In `nova.mix.js`, on `line 30`:

```
From:
'../../vendor/laravel/nova/resources/js/mixins/packages.js'

To:
'../vendor/laravel/nova/resources/js/mixins/packages.js'

```

Then, inside the `nova-tinymce-field` directory, run `npm i` and `npm run nova:install` to install the field dependencies. For live updates, run `npm run watch`.

Once development is complete, be sure to `npm run prod` to rebuild the assets.

**IMPORTANT:** When the assets are successfully built, revert the `package.json` and `nova.mix.js` changes. The original paths are correct for a production install, but must be updated for local development.

### TinyMCE

[](#tinymce)

#### Configuration

[](#configuration)

See  for configuration details about the core TinyMCE package. This custom field uses a Vue wrapper to inject the field; documentation for which [can be found here](https://www.tiny.cloud/docs/integrations/vue/).

#### Shortcodes

[](#shortcodes)

This TinyMCE implementation includes a custom plugin to streamline shortcode insertion inside the editor. A caveat, as of writing, opening/closing shortcode tags are *not* supported.

#### Enabling the shortcode plugin

[](#enabling-the-shortcode-plugin)

To enable the shortcode plugin, which adds a new "Shortcodes" button to the WYSIWYG toolbar, you must update `plugins` and `toolbar` in the `nova-tinymce-field`:

```
'plugins' => [
    'plugin1 plugin2 shortcodes'
],
'toolbar' => [
    'button1 button2 | button3 button4 | shortcodes',
]

```

#### Registering a shortcode

[](#registering-a-shortcode)

Our primary driver for shortcodes on Laravel projects is `webwizo/laravel-shortcodes`, which uses the following syntax for shortcode snippets:

```
[shortcode-name attribute="value" another_attribute="value"]

```

The easiest way to prepare a shortcode class for registration in the `nova-tinymce-field` config is to use the `HasWysiwygShortcode` trait included in this package. There are three `public static` properties you need to include in the class to ensure the trait's helper methods can correctly build the required TinyMCE panels:

- `$name` - The display name for the shortcode
- `$slug` - The slug used for the shortcode snippet
- `$attributes` - A non-associative array of attributes used by the shortcode

An example class would look like this:

```
use Bythepixel\NovaTinymceField\Traits\HasWysiwygShortcode;

class AccentedHeadingShortcode
{
    use HasWysiwygShortcode;

    public static string $name = "Accented Heading";
    public static string $slug = "accented-heading";
    public static array $attributes = [
        'heading',
        'subheading'
    ];

    // required for webwizo/laravel-shortcodes registration
    public function register() {}
}

```

Once the class is ready to register into the plugin, add it to the `nova-tinymce-field` config's `shortcodes` array:

```
use App\Shortcodes\AccentedHeadingShortcode;

return [
    ... other config options,
    'shortcodes' => [
        AccentedHeadingShortcode::class
    ]
]

```

You may also have to clear Laravel's config cache with `artisan config:clear`.

Once the config has been properly updated, you should be able to see a tab for it after clicking the `Shortcodes` button in the WYSIWYG toolbar!

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity28

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 72.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~87 days

Recently: every ~158 days

Total

14

Last Release

774d ago

Major Versions

1.0.9 → 2.0.02022-08-19

2.0.1 → 3.0.02024-04-02

PHP version history (2 changes)1.0.0PHP >=7.1.0

3.0.0PHP ^7.3|^8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/ae6775a129141e327cd4a1b4efbef9d4b19b4a6bbb70d1742f628d8946e220b6?d=identicon)[rreynier](/maintainers/rreynier)

---

Top Contributors

[![mej504](https://avatars.githubusercontent.com/u/34963248?v=4)](https://github.com/mej504 "mej504 (26 commits)")[![cameronRz](https://avatars.githubusercontent.com/u/48387528?v=4)](https://github.com/cameronRz "cameronRz (4 commits)")[![schwindy](https://avatars.githubusercontent.com/u/11136250?v=4)](https://github.com/schwindy "schwindy (3 commits)")[![rreynier](https://avatars.githubusercontent.com/u/1953114?v=4)](https://github.com/rreynier "rreynier (2 commits)")[![trevormiles](https://avatars.githubusercontent.com/u/62710231?v=4)](https://github.com/trevormiles "trevormiles (1 commits)")

---

Tags

laravelnova

### Embed Badge

![Health badge](/badges/bythepixel-nova-tinymce-field/health.svg)

```
[![Health](https://phpackages.com/badges/bythepixel-nova-tinymce-field/health.svg)](https://phpackages.com/packages/bythepixel-nova-tinymce-field)
```

###  Alternatives

[optimistdigital/nova-multiselect-field

A multiple select field for Laravel Nova.

3403.5M7](/packages/optimistdigital-nova-multiselect-field)[coreproc/nova-notification-feed

A Laravel Nova package that adds a notification feed in your Nova app.

10149.1k](/packages/coreproc-nova-notification-feed)[inspheric/nova-defaultable

Default values for Nova fields when creating resources and running resource actions.

51174.8k1](/packages/inspheric-nova-defaultable)[cybercog/laravel-nova-ban

A Laravel Nova banning functionality for your application.

40199.8k](/packages/cybercog-laravel-nova-ban)[insenseanalytics/nova-server-monitor

A Laravel Nova tool for Spatie's Server Monitor library.

6546.9k](/packages/insenseanalytics-nova-server-monitor)[datomatic/nova-detached-actions

A Laravel Nova tool to allow for placing actions in the Nova toolbar detached from the checkbox selection mechanism.

11229.2k](/packages/datomatic-nova-detached-actions)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)