emilianotisato / nova-tinymce Goto Github PK

I want to add help with my field like this :

NovaTinyMCE::make(__('Description'), 'description')
                    ->rules('required')
                    ->options([
                        'height' => '500',
                    ])
                ->help('Here is my help'),

Can you give me suggestions that how can I add help text?

Thx for your work!

Autoresize is not working.
This has no effect:

(config/nova-tinymce.php)

'plugins' => [
	'autoresize',
],

'autoresize_bottom_margin'		=> 0,
'autoresize_min_height'			=> 120,
'autoresize_max_height'			=> 1000,
'autoresize_overflow_padding'	=> 0,

simple 'resize' => true is also not working

I'm struggling with the editor in inline mode. If I set the errors prop after initializing the .mce-content-body class disappears from the tag:

Before:

<div id="t98896t-0-e3d62039-b55d-4cef-b13f-cb5b1d5254ce" placeholder="t98896t" class="mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false"><p>jb</p></div>

After setting the errors prop:

<div id="t98896t-0-e3d62039-b55d-4cef-b13f-cb5b1d5254ce" placeholder="t98896t" class="border-danger" contenteditable="true" style="position: relative;" spellcheck="false"><p><br></p></div>

As you can see the .mce-content-body class has been replaced by the .border-danger class.

Reproducible scenario:

1. Add a field with inline set to true and required added as a rule:

NovaTinyMCE::make('test')->options([
                'inline' => true,
                'height'=> '500',
            ])->rules('required'),

2. Save without content.

The editor removes empty span element. I want to prevent this.
Is it possible to set extended_valid_elements?
At the moment I add this option:
NovaTinyMCE::make('Body')->options(['valid_elements' => '+*[*]']),
which works.

But I think setting
extended_valid_elements => 'span[*]'
would be more precise.

How to upgrade tinymce to version 5? Thanks

When changing the LFM route I'm getting a 404 in backend.

I followed the basic steps for its installation and I receive the following error, after executing.

php artisan vendor:publish --provider="Emilianotisato\NovaTinyMCE\FieldServiceProvider" --tag="config"

Unable to locate publishable resources.

Hi @emilianotisato, please note, this solves many issues.

Open source plugins at tinymce: https://www.tiny.cloud/docs/plugins/opensource/

Nova-tinymce only supports https://github.com/emilianotisato/nova-tinymce/blob/master/resources/js/tinymce.js#L8-L37

Thus, there is no support: Autoresize, Autosave, Noneditable and others (11 in total). If this is done on purpose, then the readme.md must indicate a list of not supported.

Hello,

Is this package could be used with spatie/nova-translatable?
Does anybody have an example?

First off, great plugin. Thank you so much for making it!

I noticed a warning in Vue where it was complaining about the <excerpt> tag on the DetailField.vue file and how it is not a registered component type

Is <excerpt> built into Laravel Nova or was this simply a custom HTML5 tag intended to display like a <div>?

For the sake of keeping the console warning free, does it make sense to define a custom attribute type or simply change this to something else?

In my case, i'd just like to see the text without any special text formatting or what have you.

Thanks again!

M

The config file is missing from the package and cannot be published:

`php artisan vendor:publish --provider="Emilianotisato\NovaTinyMCE\FieldServiceProvider" --tag="config"

Unable to locate publishable resources.
`

I just noticed #27

It's L7 I use and I've tried reinstalling but to no avail, has this not yet been resolved?

When deploying via Laravel Vapor, the CSS / skin files don't reference the assets URL, and return a 404 (breaking the editor).

I believe it would be resolved if you run those assets through the "asset" function.

Hi, thanks for the package.
The TinyMCE doesn't initialize if JSON syntax is used on attribute property.
Example:
NovaTinyMCE::make('Value', 'text->en');

I think the reason is "text->en" is an invalid attribute id.
To fix I made a pull request #18 that allows customizing the HTML id of the field.

@emilianotisato I have the following code as mentioned in the example

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

but for some reason, the button to add a link doesn't show on the toolbar or the menu.
The link on the toolbar is supposed to add the button if I am right.
Any idea what may be the issue?

When deployed to a live production site, a warning is shown in place of the editor that the Tiny MCE key is missing, but there is no way to enter a key for this package to use.

why the field does not work with spatie/nova-translatable ?
just empty field

Translatable::make([
        NovaTinyMCE::make('translatable_value'),
]),

but if i write

Translatable::make([
        NovaTinyMCE::make('translatable_value_fr'),
]),

The field will appear, but I will not be able to make changes, because I do not have such a field

Can't get this to work with LFM and S3 storage. I always get an error Invalid upload request

Hey, Do you know how can I use it with Laravel vapor?

Currently, this is failing

I know is it an option "language"=> 'sv_SE' in config file
But how can I install sv_SE.js language file?

Hi,

Awesome package!

I can't get the image upload with LFM to work (I don't see an image upload icon in the TinyMCE toolbars). This is in my Nova Resource:

NovaTinyMCE::make('Content')
                ->options([
                    'use_lfm' => true,
                ])

The LFM package is installed via composer.

Am I missing something?

It appears that the vue component does not work when you add a label with a space. For example:

NovaTinyMCE::make('page content', 'test')->options([
                'plugins' => [
                    'advlist autolink lists link image charmap print preview hr anchor pagebreak media'
                ],
                'toolbar' => 'insertfile undo redo | styleselect | bold italic'
            ]),

The vue component takes the field.name to set the id of the textarea where TinyMCE is loaded on. See:

<editor :api-key="tinymce_api_key"
                    :id="field.name" 
                    v-model="value" 
                    :class="errorClasses"
                    :placeholder="field.name"
                    :init="options"
            ></editor>

Since this field.name has a space, TinyMCE tries to resolve '#page content', which is not a correct query selector.

You see that TinyMCE tries to create such a query selector if you set the label to something that unacceptable for the query selector, e.g. 'page content (en)'. This gives a javascript error of tinymce.js:

tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8 Uncaught Error: Syntax error, unrecognized expression: #page content (en)
    at Function.St.error (tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8)
    at St.tokenize (tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8)
    at St.select (tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8)
    at St (tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8)
    at Object.select (tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8)
    at tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8
    at e (tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8)
    at Se.b.bind (tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8)
    at Object.F [as bind] (tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8)
    at Object.init (tinymce.min.js?apiKey=v2v3tvfwycckcnjhtirpixp9vbsdi1uh3lv87somidksxtjh:8)

Maybe it is better to make a slug of the field.name or something to avoid spaces and bad characters for the query selector. Or would this have some disadvantages?

Thanks for the nice component!

Hi,

Is it possible to show the content by default on the detail view of a resource?

and no js-error shown ...

Is there something you can do to solve this issue?
whitecube/nova-flexible-content#156

The problem:
if you move components of nova-flexible-content up/down the content of nova-tinymce disappears and is not editable anymore. This is so anoying. I use it in production and my client is really upset about this.

So maybe you can help or anlyze the problem?

Hi, I think these 2 improvements should be useful:

• hide field by default in grid view (as textarea fileld are)
• use the "Show content" trigger, to show field value in detail view

Thanks

Hello there! Any idea how get translatable field use nova-tinymce?

I found that https://github.com/barnacode/nova-translatable its perfect solution for me, but than package not supporte and have conflicts when composer install from git source.

spatie/nova-translatable not intresting, because i need one field with choice language

Thanks in advance

Correct me if I am wrong, but doesn't the API version of TinyMCE limit you to one domain per account? I suppose I could set up an account for every one of my clients but wouldn't it be better if we could use the community edition of TinyMCE? I believe that it's not limited like this.

Does this package support v2 of the laravel-filemanager?

I am attempting to use with laravel 6.13.1, laravel-filemanager 2.0.0 and nova-tinymce 1.1.1 but I'm getting all sorts of errors.

The config values that resources/views/vendor/laravel-filemanager/index.blade.php is requiring are nothing like what is currently produced by laravel filemanager in lfm.php...

Am I missing something?

Hi, @emilianotisato

When saving source code with embedded <script>, an error appears in the console. A screenshot is attached.
The config contains the settings 'extended_valid_elements' => 'a [id | class | href | target | title | uk-toggle], script [src | async | defer | type | charset | class]'

Hey, a possibility to set the default TinyMCE configuration would be nice!

`
Class "Laravel\Nova\Nova" not found

at vendor/emilianotisato/nova-tinymce/src/FieldServiceProvider.php:27
23▕ $this->publishes([
24▕ DIR.'/../config/nova-tinymce.php' => config_path('nova-tinymce.php'),
25▕ ], 'config');
26▕
➜ 27▕ Nova::serving(function (ServingNova $event) {
28▕ Nova::script('Nova-TinyMCE-tinymce', DIR.'/../dist/js/tinymce.js');
29▕ Nova::script('Nova-TinyMCE', DIR.'/../dist/js/field.js');
30▕ Nova::style('Nova-TinyMCE', DIR.'/../dist/css/field.css');
31▕ });

  +7 vendor frames 

8 [internal]:0
Illuminate\Foundation\Application::Illuminate\Foundation{closure}(Object(Emilianotisato\NovaTinyMCE\FieldServiceProvider))

  +5 vendor frames 

14 artisan:37
Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1

Installation failed, reverting ./composer.json and ./composer.lock to their original content.
`

How can I set a tinymce apikey?

Since last tags, some upgrades has been committed (first of all :full-width-content="true").

Could you please create 0.5.2 tag?

Need to add custom plugins or localization, how can I do this?

I don't understand, my field works perfectly on my page 'About'

NovaTinyMCE::make('Contenu', 'wysiwyg')

I use the same method, but the result is not the same on other pages.

NovaTinyMCE::make('Intro - Vidéo', 'test'),

Thanks for your help !

To reproduce, follow the installation instructions up until

The last step is to run this command to fix some Filemanager files: php artisan nova-tinymcs:suport-lfm

Looking through the code, I cannot find any declaration of this command either.

I'm porting a Laravel app from Voyager (https://github.com/the-control-group/voyager) to Nova. I have a custom javascript function tinymce_setup_callback(editor) in my Voyager app that creates a toolbar button for TinyMCE, but I'm having some trouble replicating it in Nova.

I've tried editing the FormField.vue component to run this.loaded method onInit, but the button doesn't appear.
In my options array I have:

'toolbar' => 'mybutton | undo redo | styleselect | bold italic',

I know the loaded method runs because if I use editor.addButton I get an error in the console:

Error: editor.addButton has been removed in tinymce 5x, use editor.ui.registry.addButton

I expect the loaded method is running the tinymce component is initialised so it's too late to add the button but I can't figure out how to get it in there during init/setup.

<template>
    <default-field :field="field" :full-width-content="true" :show-help-text="showHelpText">
        <template slot="field">
            <editor :id="field.id || field.attribute"
                    v-model="value"
                    :class="errorClasses"
                    :placeholder="field.name"
                    :init="options"
                    v-on:onInit="this.loaded"
            ></editor>
            <p v-if="hasError" class="my-2 text-danger">
                {{ firstError }}
            </p>
        </template>
    </default-field>
</template>

    methods: {

        loaded: function (event, editor) {
            // tiny has loaded, now say we are loaded
            // update the editor
            this.editor = editor;
            editor.ui.registry.addButton('mybutton', {
                text: "Insert Text",
                type: "menubutton",
                icon: false,
                menu: [{
                    text: 'Some text',
                    onclick: function() { editor.insertContent('Some text'); }
                }]
            })
        },

When I edit the <> source code in the editor, the wysiwyg editor gets updated. Though, when I click Update, the old code gets saved. However, if I edit the source code and continue editing in the wysiwyg editor it works. Since, not all our editors will remember this workaround, I would like to see this issue resolved.

Is there a known way to include callback functions in the config?

I am asking because several plugins have options which allow a callback to be provided. One example is the media plugin which has the options 'media_url_resolver' and 'video_template_callback'.

Maybe I'm missing something simple here, but from what I can see the options are passed directly to the vue element as a json string via the init prop.

This might really be an issue for the tinymce-vue team, but since we'd also need to convert the function from PHP to json I figured I'd start here.

Hi
Is it possible to add custom button to toolbar?

First of all, thank you for this nice Nova package.
I tried to integrate File Manager but I got an error after I ran

php artisan nova-tinymcs:suport-lfm

`copy(/Users/Adem/mavi/exam/resources/views/vendor/laravel-filemanager/index.blade.php): failed to open stream: No such file or directory

at /Users/Mst/mavi/exam/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:250
246| * @return bool
247| */
248| public function copy($path, $target)
249| {

250| return copy($path, $target);
251| }
252|
253| /**
254| * Create a hard link to the target file or directory.

Exception trace:

1 copy("/Users/Adem/mavi/exam/vendor/emilianotisato/nova-tinymce/src/Console/stubs/laravel-filemanager/index.blade.php", "/Users/Adem/mavi/exam/resources/views/vendor/laravel-filemanager/index.blade.php")
/Users/Adem/mavi/exam/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php:250

2 Illuminate\Filesystem\Filesystem::copy("/Users/Adem/mavi/exam/vendor/emilianotisato/nova-tinymce/src/Console/stubs/laravel-filemanager/index.blade.php", "/Users/Adem/mavi/exam/resources/views/vendor/laravel-filemanager/index.blade.php")
/Users/Adem/mavi/exam/vendor/laravel/framework/src/Illuminate/Support/Facades/Facade.php:261

Please use the argument -v to see more details.`

And when I try to open the file manager from the TinyMCE I got a 404 error.
What I missed?

Thank you

are there any? these should have been declared as (anonymous) functions, but how can this be done fropm the confih (php)?
If not, any ideas how i can intercept the content before it get's into the editor?

I find docs on adding plugins to tinymce, but I was wondering what the process of adding plugins to this nova tinymce would be?

Hi, is it possible to make the editor vertically bigger?
Something similar to the rows() function for Textarea field.

Thanks

First off: great library! Works very well. Thanks!

I was wondering what would be the best way to implement the option to set the NovaTinyMCE Field to alwaysShow. I think adding the Expandable trait would be the best option. What do you think? Or are there any other ways to set alwaysShow?

Tinymce have upload imagens by default, you can just pass url for upload:

images_upload_url

reference:
https://www.tiny.cloud/docs/configure/file-image-upload

This makes the project cleaner

Starting today the editor asks for a registered domain. Strangely.

Also there's an error thrown in the console:

which refers to:

I think because of the error it tries to fall back to the cloud version?

Nevertheless: Any suggestions on how to fix this?
Am I the only one experiencing this issue?

I have version 1.2.1 of this package installed.

Hello,

could you please make another option to select the type for the lfm_url .. it always appends type=image

(in formfield.vue)

let url  = this.options.path_absolute + this.options.lfm_url + '?editor=tinymce5&type=' + type;

And thanks for the greate package

I have followed all steps in the setup guide with no problem, but the field doesn't render throwing an error in web console.

The Vue component

It seems weird to me if I pass an option to the field it gives me 500 error.
With Trix field works fine. It could be my fault, but don't know where.
I guess it's a config problem.

Laravel version is 6.20.22
Nova version is 2.12.0