Can anyone explain me how to add new button to editor in pure JavaScript?

[samlovescoding]

I am building a web page. It looks like this.

The image card is indirectly just an image but it requires this HTML code.

I want to add this new "image card" button to the ContentTools editor so that we can add a new image card when required. Moreover I want to generate the required HTML with the JavaScript afterwards.

I took a look at the adding new tools page. For some reason they are using CoffeeScript. I don't understand the CoffeeScript nor Sass. Can anyone explain me how to add custom components to the editor in plain JavaScript and CSS probably [probably a new file]?

[cubiclesoft]

An alternative approach could be to use attributes in the inspector dialog for the caption bit and a custom class that declares an "image-card". Then you store the content as-is and transform it into a card when delivering it to the browser with a tool like TagFilter.

The way ContentTools handles DOM elements when consuming them means you can't bypass img tags for some cases. All img tags get handled the same way when starting the editor.

[samlovescoding]

I didn't use TagFilter but yes the approach I took was the same as you said. In fact I handled the rendering at the client side using jQuery. I let user add a CSS class using ContentTools and then when the page is actually rendered I replaced all instances of the image with a card template.

I guess this is the only way to implement it so I am also closing this issue.