Hi

When I add image I can set "alt"
What about "title"? Is that possible?

Does it work with aws s3? I can't get it worked.
I changed the next in the filesystems.php file, but it doesn't do the trick
'image' => [
/'driver' => 'local',
'root' => storage_path('app/public/uploads/image'),
'url' => '/storage/uploads/image',/
'driver' => 's3',
'key' => env('AWS_ACCESS_KEY_ID'),
'secret' => env('AWS_SECRET_ACCESS_KEY'),
'region' => env('AWS_DEFAULT_REGION'),
'bucket' => env('AWS_BUCKET'),
'url' => env('AWS_URL'),
'endpoint' => env('AWS_ENDPOINT'),
'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
'throw' => false,
],

Perhaps I might fix this in another PR soon, but I wanted to point it out atleast.
Since CKEditor 5 is used within the new NOVA, their tailwind base.css is overwritting the ckeditor to display list dots and list numbers.

I'll explain it with some screenshots:

Disabling the tailwind ovverwrite solves the issue:

php 8.0.2
Laravel 9
Nova 4

When I want click to other resources, it shows some error in console and the page stop.

Need help, thx!!

Sorry for this asking, but for me is very discomfortable to use editor when it is overflowing and i need to get more clicks to get functuonality that i want. Can u do by default that this 3 dots is no more there and all functions just set in sepparate line of editor?

I tried to set shouldNotGroupWhenFull option somehow, but i failed

Hello,

paste-from-office is a verygood plugin .
I know only a little English.

https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-office.html

Thanks!

Description

I'm currently using the nova-ckeditor package (version 1.2.2) and I suggest enhancing the "insert media" button (insert image button and insert video button). After the writer clicks on it, we should add a new button in the pop-up that allows for direct media insertion, as well as the ability to upload new media if it's not available in the existing resources.

Expected Behavior

I expected that when I write a new blog or post and need to insert an image or video, I could add it directly without the need to open a new tab or navigate away from the editor.

Actual Behavior

Currently, when I write a new blog and need to insert a new image or video, I have to close or open a new tab to upload it, which disrupts the workflow.

Additional Information

• Package Version: nova-ckeditor version 1.2.2

Screenshot

Other Notes

I appreciate any assistance or insights into resolving this issue. If there's any additional information needed from my end, please let me know.

@mostafaznv Thank you for this chance!

Hello,

Excellent package intervention/image is now available in version v3. Will be perfect If nova-ckeditor support that version in upcoming v7.

Hello!
If I increase the height of the editor with my mouse, edit something and blur the editor, it restores its original height.
The same happens if I go to choose an image.
It's inconsistent that the height changes.
Is it possible to fix that?

Hi!
There's an annoying issue. If a page has several links and one of them has target="_blank" property the editor freezes.
My piece of code is:

test Exosomes

test Exosomes

Then, if you click on the first link, you will see the layer for editing the link. Then, if you click elsewhere in the editor, it stops working.

Try these steps and if you need any assistance, let me know.

It'd be grate to fix the issue.

Thank you very much for adding the html-support feature. But what happened with the ui-language feature and its script setting? I see the comment "Not available". I need to change the UI language, but it seems that I can't do it, can I? In the previous version it worked. My config is:
` 'content-lang' => 'ru',

        'ui-language' => [
            'name' => 'ru',

            /**
             * Example 1: asset('js/ckeditor-fa.js')
             * Example 2: 'https://cdn.ckeditor.com/ckeditor5/34.0.0/decoupled-document/translations/fa.js'
             */
            'script' => public_path('core/ckeditor-ru.js')
        ],

`

i choose center image but when rendering on html it wasn't centered

Hi, is there a guide on how to extend this to also handle audio?

Related to #77, are there any built-in support for non-media attachments?

HI. Can u did nova 4 compatibility? Have errors inside console

Hello! I came across with an issue. sys_get_temp_dir() returns a directory where my domain doesn't have access. It was /tmp
My hosting provider said that I needed using the full path /var/www/site/tmp
For this reason I had to add the variable in the config: 'tmpDir' => '/var/www/site/tmp', and process it in the resize function like so:
$tmpDir = $config['tmpDir'] ?? sys_get_temp_dir(); $filePath = $this->makeTargetFilePath($fileName, $tmpDir);
It'd be great if you add this feature in your basic installation

When I complete Installation
That can't display

This is my code

use Mostafaznv\NovaCkEditor\CkEditor;

public function fields(NovaRequest $request)
    {
        return [
            ID::make('id', 'announcement_id')
                ->sortable(),

            BelongsTo::make('announcement_types', 'announcement_types', AnnouncementType::class)
                ->rules('required'),

            Text::make('announcement_title', 'announcement_title')
                ->rules('required', 'max:255', 'min:1'),

            CkEditor::make('announcement_content', 'announcement_content')->stacked(),

            Boolean::make('announcement_is_top', 'announcement_is_top')
                ->default(false),

            Boolean::make('announcement_is_published', 'announcement_is_published')
                ->default(true),

        ];
    }

My Version:

• Laravel Framework 8.83.27
• Nova4
• PHP 8.2.5

I'm wondering if I'm doing something wrong.

Description

I'm currently using the nova-ckeditor package (version 1.2.2) in my Nuxt.js project to implement a rich text editor. I'm trying to utilize the mediaEmbed feature to embed media content such as YouTube videos directly within the editor. However, I've encountered an issue where the embedded media is not rendering as expected on my Nuxt.js website.

Steps to Reproduce

1. Install and set up the nova-ckeditor package (version 1.2.2) in a Nuxt.js project.
2. Configure the mediaEmbed feature in the CKEditor settings to support YouTube videos (I followed the instructions in the package documentation).
3. Open the CKEditor and use the insert media button to insert a YouTube video link (e.g., https://www.youtube.com/watch?v=ERKqYBTpUfk) in the editor.
4. The preview in the CKEditor shows the embedded YouTube video correctly.
5. However, when the content is rendered on the Nuxt.js website, the embedded video is not displayed.

Expected Behavior

I expected that when I add a YouTube video link in the CKEditor by insert media button, the embedded video would also be displayed correctly on the Nuxt.js website when the content is rendered.

Actual Behavior

The embedded YouTube video is not displaying as expected on the Nuxt.js website. Instead, only the link to the YouTube video is shown.

Additional Information

• Package Version: nova-ckeditor version 1.2.2

Possible Solutions (If Any)

I've tried rechecking the mediaEmbed configuration and ensuring that I've followed the steps correctly. However, I'm not sure what might be causing the issue on the Nuxt.js website.

Other Notes

I appreciate any assistance or insights into resolving this issue. If there's any additional information needed from my end, please let me know. Thank you!

Could you help me how to add rtl direction

It would be great to switch the url regex for mediaEmbed from the current one to first match extraProviders and afterwards the default ones. That way one could customize e.g. the embedding for Twitter posts without using the providers array and thereby removing all other default ones.

Hi
When I add new image and enter name it not saving (the name set as filename). But when I edit image then name saving.
Can it be fixed?

I can not see uploaded video in editor media explorer also i see this message error in js console:
Cannot read properties of undefined (reading 'cover')

If I edit something in a source and try to save without switching to the normal editing mode, Nova freezes.

Hello! It'd be great to have the GeneralHtmlSupport plugin included. Actually, I have added it myself, but don't want to spawn a new branch.

Hey,

I would like to add additional providers to the mediaEmbed plugin as described in https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html

This is the example from the website:

        mediaEmbed: {
            providers: [
                {
                    // A URL regexp or an array of URL regexps:
                    url: /^example\.com\/media\/(\w+)/,

                    // To be defined only if the media are previewable:
                    html: match => '...'
                },
                ...
            ]
        }

This is what I am trying to do in config/nova-ckeditor.php:

 'options' => [
            'mediaEmbed' => [
              /*
                'providers' => [
                    'url' => '/^example\.com\/media\/(\w+)/',
                ]
              */
            ],
  ...

This causes the editor to crash, e.g. not to be displayed in the Nova field.

1. Do you know how to correctly define additional providers?
2. How can I debug editor crashes? There is no related output in the console.
3. How would I write the match function from the example?

Thank you for creating this package!

Fun bug. Have 2 ckeditors on page, like that

Want to update all of them example

Pressing update. Fields looks like that

Want to update one more time. Example

Pressing update. Fields looks like that

Every time first editor gets value from second editor. Can u see why it is ?

This is a great plugin, thanks so much for creating it.

It would be super helpful to allow the developer to link to a custom CSS file because the default leaves much to be desired - Headings are small and bullets don't show up. I'll post a screenshot of my old (non Nova) admin that uses CKEditor and the new one as an example.

Here's a link to the documentation:
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

Ideally, the developer could edit the config file like so...

    /*
     |--------------------------------------------------------------------------
     | Custom CSS
     |--------------------------------------------------------------------------
     |
     | Specifies the path of your custom CSS
     |
     */
    'contentsCss' => '/css/app.css',

Legacy CKEditor (uses custom CSS)

Nova CKEditor (no custom CSS)

Hi,
Thanks this is a great package.

I noticed the method help is not implemented : https://nova.laravel.com/docs/4.0/resources/fields.html#field-help-text

Is there a way to add it ?

I'm trying to show a read-only CkEditor, and I've added the readonly props but it didn't work.
Any idea?
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-readOnly

I don't see any place to change the UI language in the config, is it supported?
if not, I can help with a PR to support it
CkEditor5 doc: https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html

Hi. Have very annoying issue)

Dependencies max updated.

Field inside nova resource
CkEditor::make('Информация', 'information')

Have information field

Content stored in database like that
<p>hfghfghfghfghfg</p>

And it do not displaying, like screenshot. And i cant update this field as well. There is no accessors on this field. If i switch to reqular Textarea field, everything works as expected. So, it is Ckeditor issue or something

Can u check what is it? Thanks!

In nova 3, everything works perfectly.

Here is your component

<textarea ref="editor" class="hidden" :id="field.attribute" :class="errorClasses" :value="value" />
.....
methods: {
        setInitialValue() {
            console.log(this.field.value, 22)
            this.value = this.field.value || ''
        },

console log is <p>hfghfghfghfghfg</p> 22

Why it is not there, have no clue) Waiting for your help

Hi!
It'd be great to have the basic "storeAs" feature as well as others. Right now, I have to change the ImageStorage class from the vendor folder that is not a good idea. =/
The deletable method doesn't work as well. Actually, it's inconvenient not to have al the basic nova features =(

I have followed the installation instructions but I don't see the field when I add it to a resource. There is an error in console when I load the resource with the field:

Hello! Is there a delete function in the image browser?
That would be fantastic if this feature is available.

Would it be hard to add the Browse button for choosing files? For some it's not convenient to drag and drop files. Thank you

Is there a way to add Ck Editor plugins to it?

How to integrate with File Manager like the package below?
https://novapackages.com/packages/oneduo/nova-file-manager
https://github.com/oneduo/nova-file-manager

hi,
can add image and gallery picker?
or explain how to add ?

I was trying to upload an image just by dragging one from my file explorer into the CkEditor, but was unable to and saw this response in the console:

I have already specified the disk on the App\Nova\Resources\Image.php file, as well as on on the config/filesystems.php as written in the installation instructions:

// App\Nova\Resources\Image.php

ImageUpload::make(trans('File'), 'image', 'image')
    ->rules('required', 'mimes:jpg,jpeg,png,gif', 'max:5000')
    ->help(trans(':size Megabyte Max FileSize.', ['size' => 5])),

// config/filesystems.php

'disks' => [
    'image' => [
        'driver'     => 'local',
        'root'       => public_path('uploads/image'),
        'url'        => env('APP_URL') . '/uploads/image',
    ]
]

However, when I tried using the Image Picker, the file was able to upload without any problems. Is there a way to upload just by drag-and-drop to the CkEditor instead?

My specs:

• PHP v8.2
• Laravel v10.28.0
• laravel/nova v4.27.14
• mostafaznv/nova-ckeditor v6.1.0

Anyone having the same issue as I have, when I click the source edit button and click it again to go back to visual mode, the editor textarea is reduce to 0? It seems the source editing plugin seems to have issue calculating the size that it should be when going back to visual:

Then:

Let me know, an interesting issue. Not sure if relates to Nova 4 being with vue and inertia.

Hi,

I am using you pluigin in my lastest laravel nova. and while using ckeditor library getting this error in console:

Uncaught SyntaxError: Invalid left-hand side in assignment (at field-ckeditor:2:215746)

Using Field like:
new Panel('Rich Content', [
CkEditor::make('Content', 'content')->stacked()
->rules('require')->hideFromIndex(),
]),

My Composer.json is like:

"require": {
"php": "^7.3|^8.0",
"artesaos/seotools": "^0.20.2",
"cviebrock/eloquent-sluggable": "^8.0",
"cyrildewit/eloquent-viewable": "^7.0",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.4",
"intervention/image": "^2.7",
"laravel/framework": "^8.65",
"laravel/nova": "^4.0",
"laravel/sanctum": "^2.11",
"laravel/telescope": "^4.15",
"laravel/tinker": "^2.5",
"laravel/ui": "^3.4",
"livewire/livewire": "^2.7",
"mostafaznv/nova-ckeditor": "^1.1",
"renatomarinho/laravel-page-speed": "^2.1",
"studio-42/elfinder": "^2.1"

When I use docker build image and run on local environment, that can work.

but when use GitHub Actions, will show this error.

<form-ckeditor index="4" errors="[object Object]" resource-id="26" resource-name="announcements" field="[object Object]" via-resource="" via-resource-id="" via-relationship="" shown-via-new-relation-modal="false" form-unique-id="4lmd4tmjo4s" mode="form" show-help-text="true"></form-ckeditor>

I've tested not using GitHub Actions and instead used the 'docker pull' command to fetch my image from Docker Hub. At this point, CKEditor is operational.

This is my Dockerfile

FROM php:8.2.0-cli

RUN apt-get update && \
    apt-get install -y \
    vim -y \
    libzip-dev \
    zip \
    libpng-dev \
    libjpeg62-turbo-dev \
    libfreetype6-dev \
    libwebp-dev \
    libssl-dev -y \
    openssl -y\
    wget -y \
    git -y \
    procps -y \
    htop -y \
    libcurl4-openssl-dev \
    && apt-get clean

# install Swoole
RUN cd /tmp && git clone https://github.com/openswoole/ext-openswoole.git && \
    cd ext-openswoole && \
    git checkout v22.0.0 && \
    phpize && \
    ./configure --enable-openssl --enable-hook-curl --enable-http2 --enable-mysqlnd && \
    make && make install

RUN touch /usr/local/etc/php/conf.d/openswoole.ini && \
    echo 'extension=openswoole.so' > /usr/local/etc/php/conf.d/zzz_openswoole.ini

RUN wget -O /usr/local/bin/dumb-init https://github.com/Yelp/dumb-init/releases/download/v1.2.2/dumb-init_1.2.2_amd64
RUN chmod +x /usr/local/bin/dumb-init

RUN apt-get autoremove -y && rm -rf /var/lib/apt/lists/*

RUN docker-php-ext-configure gd --with-freetype --with-jpeg --with-webp && \
    docker-php-ext-install pdo_mysql zip exif gd pcntl

COPY . /var/www/html

WORKDIR /var/www/html

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer \
    && composer install \
    && chown -R www-data:www-data /var/www/html/storage /var/www/html/bootstrap/cache \
    && php artisan storage:link

CMD ["php", "artisan", "octane:start", "--host=0.0.0.0", "--port=8000"]

Description

I'm currently using the nova-ckeditor package (version 1.2.2) and I suggest enhancing the preview content before publishing it.

Expected Behavior

I expected that when I write content and use any style I could see its actual preview (How people see this content)

Actual Behavior

Currently, when I write a new blog and need to use a number list or H tags I can't preview the content before publishing it

Additional Information

• Package Version: nova-ckeditor version 1.2.2

Screenshot

Other Notes

I appreciate any assistance or insights into resolving this issue. If there's any additional information needed from my end, please let me know.

@mostafaznv Thank you for this chance!

There is a compatibility problem with the lupennat/nova-nested-many package.
The nova-nested-many package allows creating/editing has-many resources from the parent resource.
Using this package, the page contains N fields with the same attribute for each nested resource.
Nova-ckeditor creates within the $options object the reference to the ckeditor via a key consisting only of field.attribute.
To solve the problem, the key should consist of the formUniqueId + field.attribute.

Hello! Thank you very much for all the last updates. It'd be great to add two features to the file manager: ability to delete files and ability to add and manage folders. It'd be almost the best file manager ever =)

It'd be great to have use of the "Show Blocks" first-party plugin
https://ckeditor.com/docs/ckeditor5/latest/features/show-blocks.html

Hello!
I need features from Ckeditor4 like "Paste as plain text", "Paste from word". If I'm not mistaken these features in the Clipboard plugin. Would you mind to implement this plugin? I think it's useful for everyone.

Good afternoon. Please tell me how can I change the size of the image in the editor. When I upload a new image, it takes up the entire text field.

Hello!
Why wouldn't you allow the webp format for the Image resource by default? Like so: rules('required', 'mimes:jpg,jpeg,png,gif,webp', 'max:5000')

Hi! It would really be great to be able to choose a photo/video by double click on it or some icon nearby. It'll boost the content filling process.