Placeholder Select Plugin

[accorinti]

In CKeditor4 there is this beautiful Plugin that lets me choose fields via a combo box (select box) dropdown located in the toolbar and insert it into the editor.

See it in action here: https://isg-uni-mainz.de/ckeditor/index.php

It is of great help. I wanted to ask the same solution for CKeditor 5. Thank you.

[xinglie]

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/tutorials/implementing-an-inline-widget.html#demo

[accorinti]

Thank you very much, this is exactly what I was looking for. But how do I insert it in my Editor? I have a custom build with only one file, ckeditor.js - there is no app.js and src folder.

This is my code:

    DecoupledDocumentEditor.create( document.querySelector( '#editor' ), {
         toolbar:['undo', 'redo', '|', 'fontFamily', 'fontSize','fontColor', 'fontBackgroundColor', '|',
                 'bold', 'italic', 'underline', 'strikethrough', 'removeFormat', '|', 'alignment', 'selectAll', '|',
                'link', '|', 'insertTable', '|', 'numberedList', 'bulletedList' ]
    })
    .then( editor => {
        const toolbarContainer = document.querySelector( '#toolbar-container' );
        toolbarContainer.appendChild( editor.ui.view.toolbar.element );
    })
    .catch( error => {
        console.error( error );
    }); 

Thanks for helping.

[Mgsy]

But how do I insert it in my Editor? I have a custom build with only one file, ckeditor.js - there is no app.js and src folder.

If you use a build, you should add the plugin to it and rebuild the editor. See our guide about adding plugins to the build to learn more.

[accorinti]

I have been reading those pages for hours but they are waaay too complicated. I don't even know what npn means or how to download this plugin. I am not a programmer, I just would like to add the editor to my website. So I built a custom editor with the plugins I need, downloaded it, added the few lines of code to create it, and it works.

Would someone just be so nice and just tell me please step by step where I have to paste the code and what I have to change in my editor.create statement to make this plugin work?

Thank you <3

[Mgsy]

I believe you use CKEditor 5 online builder, so simple steps for adding a custom plugin to the downloaded build will be:

1. Open the build configuration file (src/ckeditor.js).
2. Copy the placeholder plugin code, starting from import Plugin (ignore the editor-related imports above and ClassicEditor.create() part below).
3. Paste it to your ckeditor.js file, below all imports.
4. Add Placeholder class to the Editor.builtinPlugins array.
5. Install packages by calling npm install.
6. Rebuild the editor by calling npm run build in the main project directory from your terminal.
7. Configure the plugin in your Editor#create() method:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // ...
        toolbar: [ 'placeholder' ],
        placeholderConfig: {
            types: [ 'date', 'color', 'first name', 'surname' ]
        }
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );

        // Expose for playing in the console.
        window.editor = editor;
    } )
    .catch( error => {
        console.error( error.stack );
    } );

[accorinti]

THANK YOU!!!! I had to first install node.js and npm, then run "npm install" before "npm run build", but now it works!

I hope this can help others. It would be great to have this plugin added to the list to choose from while building a custom build.

Thanks again and stay healthy! :-)

[Rae-Lin]

Hello, I just read this article and find it's really useful for me to follow up!!

Since our project may have a lot of placeholders, so I am just curious that if I could have groups of 'types', so that I can set sub-menu-placeholders. If so, please let me know how do I set.

Thanks.