Hi,

On my dev server installed the dev tools.
Created an application with the button create.

added a file: /dev/js/front/editor.js

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';

import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

class HelloWorldPlugin extends Plugin {

init() {

const editor = this.editor;

editor.ui.componentFactory.add('test', locale => {

const view = new ButtonView(locale);

view.set({

label: 'Insert Hello World',

tooltip: true

});

view.on('execute', () => {

editor.model.change(writer => {

writer.insertText('Hello World', editor.model.document.selection.getFirstPosition());

});

});

return view;

});

}

}

window.CKEDITOR_PLUGINS = window.CKEDITOR_PLUGINS || {};

window.CKEDITOR_PLUGINS['helloworld'] = HelloWorldPlugin;

added: extensions/core/EditorLocations.php to make it show up on forums/pages

<?php

namespace IPS\application\extensions\core;

class _EditorLocations

{

public static function contentLocations()

{

return [

'core' => ['cms', 'forums'],

];

}

}

created a hook: hooks/ckeditor5.php

<?php

namespace IPS\application\hooks;

class ckeditor5 extends \IPS\HOOKSCLASS

{

public function getPlugins()

{

return array_merge(parent::getPlugins(), [

'helloworld' => [

'src' => \IPS\Http\Url::internal('applications/mtfapplication/dev/js/ckeditor/plugins/helloworld/plugin.js', 'none'),

'class' => 'HelloWorldPlugin'

]

]);

}

public function getToolbar()

{

$toolbar = parent::getToolbar();

$toolbar[] = 'test';

return $toolbar;

}

}

With the Devolper: compile javascript in CP, i compile the js. Application is enabled. but no buttons are showing up in the Ckeditor.
Have tried lots of ways to figure this out the last couple of days, but cannot seem to figure out how to get a extra button in de ckeditor.

I assume you're using v4 since v5 replaced CKEditor with Tiptap and the hook system is gone.

I see your code includes ckeditor5, but v4.7.20 uses CKEditor 4.21.0. You're using the wrong editor version.

Edited May 7May 7 by teraßyte

Trying to migrate some buttons from 4.7 to 5 before we upgrade our live server, we need the buttons for templates/components for pages.
I tough invision community was using ckeditor5 in combination with Tiptap, but using tiptap to create buttons was not necessary.
This was one of the example codes i got from chatgtp, because all i was trying was not working.

The hook system for editor toolbar buttons is gone? Tought i just needed to rewrite my plugin to application...

Plugins and hooks are gone from v5. You must use extensions or listeners:

Here's also the blog entry that explains the new editor and the switch from CKEditor to Tiptap:

Ok so something like this? (does still not load the js after clearing cache and and compile js)

I might just need a working example on how to do this.

mtfapplicationv5\extensions\core\EditorExtensions\Mtfbutton.php

<?php

namespace IPS\mtfapplication\extensions\core\EditorExtensions;

class _Mtfbutton

{

public function js()

{

return [

'mtf-button',

];

}

}

mtfapplicationv5\dev\js\editor\mtf-button.js

import { Extension } from '@tiptap/core'

export const MtfButton = Extension.create({

name: 'mtfButton',

addCommands() {

return {

insertHelloWorld:

() =>

({ commands }) => {

return commands.insertContent('<p>Hello World</p>')

},

}

},

addToolbar() {

return [

{

name: 'testButton',

icon: 'magic',

title: 'Insert Hello World',

command: ({ editor }) => {

editor.commands.insertHelloWorld()

},

},

]

},

})

export default MtfButton

mtfapplicationv5\extensions\core\EditorExtensions\Mtfbutton.php

<?php

namespace IPS\mtfapplication\extensions\core\EditorExtensions;

class _Mtfbutton

{

public function js()

{

return [

'mtf-button',

];

}

}

Have a look at these docs. You cannot import tiptap or other node modules directly as tiptap is already bundled and compiled in the distributed install, so essentially you use ips.ui.editorv5.registerExtension() instead of Extension.create().

As for the file structure, you should just need a JS file inside /<your app dir>/dev/editor/ and it will automatically be loaded when the editor loads (assuming your community is in developer mode).

Thanks @Matt Finger That seems to be the documentation that i am looking for! Will get back to it later today.
I appreciate the help, when i have my test custom button working, i will post code here, so other can use it aswell.

Can one of the mods, rename this topic to "How to make custom application to add tiptap buttons?"

As for the file structure, you should just need a JS file inside /<your app dir>/dev/editor/ and it will automatically be loaded when the editor loads (assuming your community is in developer mode).

And where do i place it, for when i am not in developer mode? Or is that done autmaticly when i compile the javascript?

Edited May 8May 8 by Moestuin

27 minutes ago, Moestuin said:

And where do i place it, for when i am not in developer mode? Or is that done autmaticly when i compile the javascript?

Well, if you've already created an app you are probably already in developer mode, but you have to add define( "IN_DEV", true ) to a constants.php file and make sure that you added development files to the install.

Your test examples you gave helped alot.
I got a test button loaded in dev mode.

How do i load the buttons in production server? Where there is no dev mode.
I tried to compile javascript in dev tools, then turned off IN_DEV to false, and test button is gone.
What are the right steps to take for that?

Edit: also on the link you gave:

Note that, in this case of <kbd> elements, you'd also have to add a parser rule via the AdminCP Dev Center to allow them to be saved.

In version 4.7 this was automaticly done when uploading a plugin. I guess this is not anymore the case?

Edited May 8May 8 by Moestuin

Oh, for production you have to build the app itself and just install it in the production environment. The editor JS files are rolled up in the app's .tar file and loaded from the /data directory when it's installed on prod.

Thanks, i just figured it out, that i first had to build it first! That is working too now.

Any documentation on how i setup access rights for buttons for example only for Pages, not for forums, and when users are in certain user groups?

The technical side of permissions should be covered in the docs linked above, while a more high-level overview of the editor permission system exists in this blog post

For the specific case of Pages-specific access rights, it might be easier to do this in the JS... e.g. if (document.body.dataset.pageapp === 'cms') {/*...all the pages only stuff*/ }

Thanks for the link, that solves the issue i had, with not being able to find where the toolbar rights where setup.

For our case, we need for most of the toolbar buttons only in Pages, however only if the user is Advanged Editor.
So i edit the javascript with that line of code, for only Pages, and then give only a group of people the Advanged Editor rights. So then it that group of people will only see the buttons there.

Great i can start building, already converted some dropdown buttons from 4.7 to this, and works great.
I might have some questions later, but for now i can continue to build.

One more question. How do i register a extension for tiptop, that has no button, but only listen on key press # to activate it.

My use case:
For example, i have now # on 4.7 that works like the @, but then provides a list(dropdown) of Pages and Forum topics, so when i select one, it returns automaticly the name as the link to that page/topic. It makes linking to pages and topics so much easyer/faster, if i not have to use the search option and manual copy and paste it.

3 hours ago, Moestuin said:

One more question. How do i register a extension for tiptop, that has no button, but only listen on key press # to activate it.

This is not currently possible, but we intend to support an addSuggestions() method to the IPS Editor Extensions in the next few versions. It'll be based on the Suggestion Utility which is the exact functionality you've described (e.g. character was typed, show a dropdown next to the char of suggestions), however our implementation will be more streamlined than the raw utility in the Tiptap docs. Something very very roughly like this

ips.ui.editorv5.registerExtension('the name', {
	// ... other properties
	addSuggestions() {
		return {
			char: "#",
			items: (query) => return arrayOfAllItems.filter(item => item.innerText.startsWith(query)),
			command: (itemThatWasPicked, editor) => editor.commands.insertContent(itemThatWasPicked);
		}
	}
});

Thanks for you anwser. That would be a good idea to add.

You said: This is not currently possible.
After 3hours of diffrent chat ai's, what actually does not have any good info on building application for invision community 5 and tiptap i got the trigger working.
I dived back in the documentation. Saw the list stated at bottom of my post.

I came up with this;

ips.ui.editorv5.registerExtension('mentionPagesTopics', {

name: 'mentionPagesTopics',

addKeyboardShortcuts() {

return {

'#': function({ editor }) {

console.log('[mentionPagesTopics] # key pressed');

const { from } = editor.state.selection;

const coords = editor.view.coordsAtPos(from);

console.log('[mentionPagesTopics] # key pressed, opening dropdown at', coords);

// Insert the '#' symbol in the editor before opening the dropdown

editor.view.dispatch(editor.view.state.tr.insertText('#', from));

mentionDropdown.open(editor.view, coords);

return true; // Ensure this prevents the default behavior

},

This triggers when #is typed, then function mention is called, that calles my php file to fetch results. Still need to add the code to read the results back into the dropdown for selection. (I left out the mention function, as it is not done yet)
Is that the part that is not possible?

Because my biggest issue with trying to code in this new style is, that all functions i try to code, are getting removed. As seen in the browser console.

Debug.js?v=43ef86859c1746727295:187 Removing ipsPlugin definition property ipsCustomExtension__mentionPagesTopics.whateveritried because it is not allowed

Is this list all that can be used? (from https://invisioncommunity.com/forums/topic/480617-ic-5-editor-extension-javascript-framework/)

I ask this as AddButton is for example not in the list. Might be more as well?

[ 'name', 'group', 'isInline', 'isBlock', 'isText', 'selectable', 'exitable', 'atom', 'addOptions', 'addKeyboardShortcuts', 'addAttributes', 'addGlobalAttributes', 'renderHTML', 'parseHTML', 'onCreate', 'onUpdate', 'onBeforeCreate', 'onFocus', 'onBlur', 'onBeforeCreate', 'onSelectionUpdate', 'onDestroy', 'onTransaction', 'priority', 'defaultOptions', 'addInputRules', 'marks', 'addNodeView', 'whitespace', 'defining', 'isolating', 'renderText' ]

Edited May 9May 9 by Moestuin

That works too, glad to see you found a way around the current limitations!

4 hours ago, Moestuin said:

all functions i try to code, are getting removed. As seen in the browser console.

Debug.js?v=43ef86859c1746727295:187 Removing ipsPlugin definition property ipsCustomExtension__mentionPagesTopics.whateveritried because it is not allowed

Is this list all that can be used? (from https://invisioncommunity.com/forums/topic/480617-ic-5-editor-extension-javascript-framework/)

I ask this as AddButton is for example not in the list. Might be more as well?

That's a good question. So that list is all the properties of tiptap extensions, nodes and marks that can be directly used in the IC5 Editor Extensions. addButtons is therefore not in the list since it isn't a method inherited from tiptap but a custom one we provide. addSuggestions will also fall into this camp.

The reason you cannot add any old method or property directly to the extension is because commands and/or shortcuts are the preferred way to predefine functionality while storage and options and attributes (for nodes/marks) are preferred to store properties.

My next question ofcouse would be, what is the list of methods i could use? As that list was not provided on that link. Perhaps it is somewhere documented, but i have not found it.

2 minutes ago, Moestuin said:

My next question ofcouse would be, what is the list of methods i could use?

Perhaps it is somewhere documented, but i have not found it.

So that post is currently the only docs we have and was intended to be a basic guide, so the entire list doesn't exist yet.

However, we are working on getting proper v5 dev docs together. So far, since the release most of our time and focus has been on ensuring stability and reliability. Since we want to put together real docs with proper method/property/event/example documentation we're just waiting a little bit longer so we can give documentation the proper time, effort and consideration it deserves.

Thats ok.

I got my # working, and #typingtext, will show dropdown with results and once clicking them it inserts the link to the pages and topics page. Works good!

I did notice that double click on an URL did not work anymore in invision community 5, to open the edit option menu anymore. Now i have my cursur inside the link text and manual move mouse to the button to open the edit options.

Would that be an idea to bring back? Or was that removed intentionally?

Now the only thing i have to add back to toolbar, are the templates with {content} and {options}. Almost done converting! 😅

Also, when working in dev mode, the themes go back to default, and styles are removed. How do i turn that temporary off in dev mode?

18 minutes ago, Moestuin said:

Also, when working in dev mode, the themes go back to default, and styles are removed. How do i turn that temporary off in dev mode?

That’s not possible. Dev mode loads always the default IPS4/IC5 style

Got a few more questions;

1. In invision community 5, is this option fully gone? To see and adjust some html code for a group of users?

2. I have a list of 40+ of classes that i want to keep while editing, but after saving there gone for example:

   They have all css styles attached.
   Tried to add them in devmode, then parser settings, with <> and without:
   Builded the custom application, and is not working, can't save the page? Do i miss a step?
   Even when i try to edit a pages page, inside the editor the classes are not recognized. The .css file is loading correctly.

3. When Dev mode is on, all pages in pages won't load , i see a blank white screen, nothing on it, then after 30sec its a dark page? It's hard to dev pages, when pages not loading. Need to constantly edit constrants.php to disable dev mode to see my changes.

Well took some time, but i am able to load en render this html in the editor <hr class="dataframe table wiki_hr">
Also able to save it.

Do i need to do this for all of my 40+ classes i need, or can this be done simpler?

(sorry don't know how to indent propperly on this forum)

ips.ui.editorv5.registerNode('hrHelpDivider', {

group: 'block',

atom: true,

selectable: true,

parseHTML() {

return [

{

tag: 'hr',

getAttrs: el => {

const classList = el.classList;

if (

classList.contains('dataframe') &&

classList.contains('table') &&

classList.contains('wiki_hr')

) {

return {};

}

return false;

}

}

];

},

renderHTML() {

return ['hr', { class: 'dataframe table wiki_hr' }];

}

});

Edited May 13May 13 by Moestuin