[Solved] How to add additional fields to the text editor?

Questions around the TYPO3 integration and plugins
Forum rules
Always add your TYPO3, Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
rowild

[Solved] How to add additional fields to the text editor?

Post by rowild » 12 Oct 2020, 23:18

Did anybody ever manage to configure the CKEditor with more fields? I found some posts here in the forum and tried to do, what they recommended:

```
// custom.js in the theme extension's jqadmin folder:

Aimeos.editorcfg = [
{ name: 'clipboard', items: [ 'Undo', 'Redo' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'insert', items: [ 'SpecialChar' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'document', items: [ 'Source' ] }
]
```
but to no avail. Actually, adding new field to the core definition of Aimeos.editorcfg does not change anything, not even after hard-deleting all caches.

Digging through jqadmin I find a reference to the CKEDITOR in a Vue component, but I do not find any files or references to CKEditor itself. How is it loaded? Where is it? Which version is used?

Also, I have troubles finding out, whether my "custom.js" is loaded at all. No luck so far with the documentation either, Agolioa finds nothing for "ckeditor" nor "editor" (well, nothing that would be richtext-editor related) nor "rte".

Could you point me to the proper location, where ckeditor is implemented? And where custom.js is defined? And maybe a working confguration that also offers align button like "JustifyLeft", JustifyRight", "JustifyCenter" ...

Thank you!


UPDATE:
For who it may concern:
This functionality wasn't really working so far, but will be with 2020.10-dev
Last edited by rowild on 16 Oct 2020, 08:02, edited 1 time in total.

rowild

Re: How to add additional fields to the text editor?

Post by rowild » 12 Oct 2020, 23:23

It seems the ckeditor of TYPO3 is used.

However, configuration override still does not work. Any hints would be most welcome!

User avatar
aimeos
Administrator
Posts: 7881
Joined: 01 Jan 1970, 00:00

Re: How to add additional fields to the text editor?

Post by aimeos » 13 Oct 2020, 16:50

The TYPO3 editor is NOT used and the CKEditor configuration for the Aimeos admin interface is defined here:
https://github.com/aimeos/ai-admin-jqad ... s/admin.js

Your extended configuration looks OK but you have to make sure you include the new config for the backend, NOT the frontend. The best way is to add your custom.js file to the ./admin/jqadm/manifest.jsb2 file of your own Aimeos extension.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

rowild

Re: How to add additional fields to the text editor?

Post by rowild » 13 Oct 2020, 17:22

Thank you for your reply!

Of course I do not include it in the frontend!
The manifest is exactly the way you described it: it points to "custom-ckeditor.js" (I renamed the file just to make sure sth different is to be loaded). But when inspecting the source code, the file is not linked anywhere...

No idea, what I am doing wrong here...

User avatar
aimeos
Administrator
Posts: 7881
Joined: 01 Jan 1970, 00:00

Re: How to add additional fields to the text editor?

Post by aimeos » 13 Oct 2020, 17:24

All CSS and all JS files are combined dynamically when the page is requested so you have to look at the URL serving the JS for the admin backend if your code is included at the end.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

rowild

Re: How to add additional fields to the text editor?

Post by rowild » 13 Oct 2020, 19:54

After trying some more, I dare to say that it is not possible to extend the CKeditor with more buttons. I can take away existing buttons, but that's it.

I did not only try in the "custom.js" of my extension, but also directly in the "admin-js" of the "ai-admin-jqadm". Add things like this:

```javascript
editorcfg : [
{ name: 'clipboard', items: [ 'Undo', 'Redo' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'insert', items: [ 'SpecialChar' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'document', items: [ 'Source' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' },
{ name: 'align' },
],
```
has no effect.

I also tried with a newer version from a different CDN:
<script src="https://cdn.ckeditor.com/4.15.0/full-al ... "></script>
but to no avail...

Did anybody get an extended configuration working already?

rowild

Re: How to add additional fields to the text editor?

Post by rowild » 13 Oct 2020, 20:18

... and of course... 10 minutes after posting a problem, the solution pops up...

I can now confirm that the additional configuration is recognized, when using the before mentioned newer (and "fuller") version of CKEditor. I still cannot add "styles" (but I might have to provide more configuration for that option).

I wonder if the currently implemented version is simply to restricted? (If that is, at all, a possibility...)

User avatar
aimeos
Administrator
Posts: 7881
Joined: 01 Jan 1970, 00:00

Re: How to add additional fields to the text editor?

Post by aimeos » 14 Oct 2020, 07:03

Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

rowild

Re: How to add additional fields to the text editor?

Post by rowild » 14 Oct 2020, 07:37

Unfortunately it throws several errors (skin moono not found, can't set dir[ection], a language related error).

Is it a requirement to include files from jsdelivr? No other CDN possible?

User avatar
aimeos
Administrator
Posts: 7881
Joined: 01 Jan 1970, 00:00

Re: How to add additional fields to the text editor?

Post by aimeos » 14 Oct 2020, 07:47

No, but jsdelivr is very fast and handy due to the version aliasing feature.
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

Post Reply