How to define custom html tags in ckeditor

Question

How can I define custom html tags in ckeditor.

• When user select a word e.g. Apple.
• Then I want to replace this with profileTag Apple /profileTag".
• But if the selected word already has a tag then it should append the profile tag.
• For example if anchorTag Apple /anchorTag then after user selection it will be profileTag anchorTag Apple /anchorTag /profileTag.

The above thing is working. But when I execute the below code the output is null in case of custom html tag like profile tag.

var current_selected_element = editor.getSelection().getSelectedElement(); console.log(current_selected_element);

Answer 1

The problem is that CKeditor's advanced content filter is filtering out your custom tags ... you're going to have to configure the ACF to accept the custom tags your plugin is creating and inserting into the DOM. There are a couple ways this can be done. The most basic would be to implement config.extraAllowedContent = 'profile' or whatever the name of your custom markup will be. Otherwise you can work with the global CKEditor.filter object. There's more documentation on the CKEDITOR.filter object here.