PHPackages                             mohamed7sameer/tincymicy-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. [Utility & Helpers](/categories/utility)
4. /
5. mohamed7sameer/tincymicy-field

ActiveLibrary[Utility & Helpers](/categories/utility)

mohamed7sameer/tincymicy-field
==============================

A Laravel Nova field.

v2(1y ago)06MITVuePHP ^7.3|^8.0

Since Nov 30Pushed 1y ago1 watchersCompare

[ Source](https://github.com/mohamed7sameer/tincymicy-field)[ Packagist](https://packagist.org/packages/mohamed7sameer/tincymicy-field)[ RSS](/packages/mohamed7sameer-tincymicy-field/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)DependenciesVersions (3)Used By (0)

Tincymice Editor For Laravel Nove
=================================

[](#tincymice-editor-for-laravel-nove)

composer require mohamed7sameer/tincymicy-field

```
php artisan nova:field mohammed2617/tincyeditor
cd nova-components/Tincyeditor
npm run watch
```

Edit resources/js/components/FromField.js

```

import { FormField, HandlesValidationErrors } from 'laravel-nova'

export default {
  mixins: [FormField, HandlesValidationErrors],

  props: ['resourceName', 'resourceId', 'field'],

  created () {},
  beforeMount () {},
  mounted () {
    this.$nextTick(()=>{
        this.setEditor();
    });
  },
  beforeUpdate () {},
  updated () {},
  beforeUnmount () {
    tinymce.remove("#" + this.field.attribute);
  },
  unmounted () {},

  errorCaptured () {},
  activated () {},
  deactivated () {},
  serverPrefetch () {},

  methods: {
    /*
     * Set the initial, internal value for the field.
     */
    setInitialValue() {
      this.value = this.field.value || ''
    },

    setEditor () {
        const useDarkMode = false ;
        tinymce.init({
          "selector": "#" + this.field.attribute,
          plugins: 'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion',
          menubar: 'file edit view insert format tools table help',
          toolbar: "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",
          autosave_ask_before_unload: true,
          autosave_interval: '30s',
          autosave_prefix: '{path}{query}-{id}-',
          autosave_restore_when_empty: false,
          autosave_retention: '2m',
          image_advtab: true,
          importcss_append: true,
          height: 600,
          image_caption: true,
          quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
          noneditable_class: 'mceNonEditable',
          toolbar_mode: 'sliding',
          contextmenu: 'link image table',
          skin: useDarkMode ? 'oxide-dark' : 'oxide',
          content_css: useDarkMode ? 'dark' : 'default',

          images_upload_url: '/api/upload_tinymce_image',
          automatic_uploads: true,

          setup: (editor)=> {
              editor.on('change', ()=> {
                // console.log(editor.getContent())
                editor.save();
                // this.value = editor.getContent();
                this.value = this.field.value = editor.getContent();
                // get the editor value and set it in this.value
              });
            }
      });
    },

    /**
     * Fill the given FormData object with the field's internal value.
     */
    fill(formData) {
      formData.append(this.fieldAttribute, this.value || '')
    },

  },
}

```

```
npm run prod
cd ..
cd ..
php artisan install:api
# cd ..
# cd ..
# cd public_html
cd public
mkdir admin
cd admin
git clone https://github.com/mohamed7sameer/tinymce
```

```
namespace App\Providers;
class NovaServiceProvider extends NovaApplicationServiceProvider
{
    public function boot()
    {
        parent::boot();
            Nova::remoteScript(asset('admin/tinymce/tinymce.min.js'));
    }
}
```

```