create a custom button to insert a line of html code

[cnaught]

I have a custom button that I add to all of our posts.

Click Here

Is there an easy way to create a custom button that goes on the main toolbar that I can click and it inserts this code without having to use the HTML Embed or doing it through the Source code?

Another question would be is there a way to add the option to edit a class of a link to the link toolbar that comes up when you click on a link?

Thanks!

[godai78]

Have you checked out this tutorial? Seems like it might help.

https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/creating-simple-plugin-timestamp.html

[cnaught]

Have you checked out this tutorial? Seems like it might help.

https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/creating-simple-plugin-timestamp.html

Thank you. I got the button working to insert text. But how do I make it so that it inserted html code into the source, rather than as text?

I'm assuming this line of code needs to be modified?

          // Change the model using the model writer.
          editor.model.change( writer => {

              // Insert the text at the user's current position.
              editor.model.insertContent( writer.createText( '<a href="#">Button</a>' ) );
          } );

[pszczesniak]

Your suspicions are correct, however you can't pass HTML directly here. Take a look at this example:

editor.model.change( writer => {
	// Insert the text at the user's current position.
	const range = editor.model.insertContent( writer.createText( 'some text' ) );
	writer.setSelection( range );
	editor.execute( 'link', 'YOUR_URL' );
} );

this will create

<a href="YOUR_URL">some text</a>

This can be helpful to understand how CKEditor operates on View and Model: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/crash-course/model-and-schema.html

[cnaught]

this will create

<a href="YOUR_URL">some text</a>

This can be helpful to understand how CKEditor operates on View and Model: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/crash-course/model-and-schema.html

I got that to work inserting a simple a href tag, and read through the documentation.

I played around with a few options, but I couldn't get what I needed. I am trying to do is insert some HTML like the following:

<a class="btn btn-warning text-white" target="_blank" rel="noopener noreferrer" href="#"><strong>Get This Deal</strong></a>