Add ckeditor widget to a custom toolbar

Question

I'm trying to add the placeholder widget to my custom toolbar- for the life of me I can't figure out how:

<script src="https://cdn.ckeditor.com/4.5.2/standard-all/ckeditor.js"></script>

It works with the default toolbar:

<textarea cols="80" id="editor1" name="editor1" rows="10">test1</textarea>

CKEDITOR.replace( 'editor1', {
  extraPlugins: 'placeholder',
  height: 50
} );

But not with a custom toolbar:

<textarea cols="80" id="editor2" name="editor2" rows="10">test2</textarea>

CKEDITOR.replace( 'editor2', {
  extraPlugins: 'placeholder',
  height: 50,
  toolbar: [{ name: 'tools',group: 'tools', items: [ 'Bold','Placeholder', 'Redo' ], groups: [ 'tools'] }]
} );

As I understand it there are 2 ways to insert a button to toolbar: 1. use name in toolbar itself (editor 2 example) 2. using editor.ui.addButton function:

editor.ui.addButton && editor.ui.addButton( 'CreatePlaceholder', {
                label: lang.toolbar,
                command: 'placeholder',
            //  toolbar: 'insert,5',
                toolbar: 'clipboard,0',
                icon: 'placeholder'
            } );

I created a fiddle to show:

a default toolbar with a Placeholder button
a custom toolbar that I can't add Placeholder button to

Can you please show/tell me how to add Placeholder to a custom made toolbar? Thank you

Kajetan W.Li · Accepted Answer · 2018-07-26 09:52:27Z

0

You have named your button 'CreatePlaceholder', so you should use this name in toolbar.

editor.ui.addButton && editor.ui.addButton( 'CreatePlaceholder', ...

CKEDITOR.replace( 'editor3', {
    ...
    toolbar: [{ name: 'tools',group: 'tools', items: [ 'Bold','CreatePlaceholder', ...

Full code: http://jsfiddle.net/nw3o4gy5/

Also take a look at CKEDITOR.ui.addButton.

answered Jul 26, 2018 at 9:52

Kajetan W.Li

1611 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add ckeditor widget to a custom toolbar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related