CKEditor is one of the powerful WYSIWUG editors that allows you to do pretty much everything you need. But there can be cases in which you need to add a custom button to do those custom stuff.
In this post, you going to see how we can add the custom button in CKEditor that will allow to add custom HTML. Let’s get started
First of all, create a simple textarea field with the id in the HTML body. In my case, I am naming it with id editor1
<textarea id="editor1" name="text" rows="10" cols="80">
</textarea>Include the CKEditor script before the body closing tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.15.1/ckeditor.js"></script>After the script include, initialize the CKEditor.
let editor = CKEDITOR.replace("editor1", {
});Now add the following code
//it will allow all the html tags
editor.config.allowedContent = true;
//add the button
editor.ui.addButton('custom_button', {
label: 'Custom Button',
command: 'custom_command',
toolbar: "insert",
icon:"https://avatars1.githubusercontent.com/u/5501000"
});The config.allowedContent will allow you to add all the HTML tags with the classes and ids. Whereas ui.addButton will allow to add the button and custom_button is the button name.
In its the object, you can see label, command, toolbar and icon. label allows to show the name of the button when you hover, the command is what function which we want to run on click of the button. In my case, I have register custom_command which I will discuss in few minutes.
The toolbar is the place in CKEditor where we want to insert the button and icon is the icon of the button. You can add whatever size of icon you have, it will scale down to the size of other icons.
Now lets register the custom_command function, include the following code below
//custom_command function
editor.addCommand('custom_command', {
exec: function(edt) {
edt.insertHtml("<h3>Hello Welcome to <a href='https://impulsivecode.com/'>impulsivecode</a></h3>");
}So when the button is clicked exec the function will execute and I am returning “Hello Welcome to impulsivecode” in HTML.
Cool Right?
Here is the full page code as well
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea id="editor1" name="text" rows="10" cols="80"></textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.15.1/ckeditor.js"></script>
<script>
let editor = CKEDITOR.replace("editor1", {
height: 400,
});
editor.config.allowedContent = true;
editor.ui.addButton('custom_butto', {
label: 'Custom Button',
command: 'custom_command',
toolbar: "insert",
icon: "https://avatars1.githubusercontent.com/u/5501000"
});
editor.addCommand('custom_command', {
exec: function(edt) {
edt.insertHtml("<h3 id='okay'>Hello Welcome to <a href='https://impulsivecode.com/'>impulsivecode</a></h3>");
}
});
</script>
</body>
</html>
Write a Reply or Comment