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);

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);

• javascript
• ckeditor

Share Improve this question Follow edited Dec 11, 2015 at 10:27 Lalit asked Dec 11, 2015 at 7:09 LalitLalit 1,36911 gold badge88 silver badges1313 bronze badges 1

• Appending the tags is working. But the output of below code is null. var current_selected_element=editor.getSelection().getSelectedElement(); console.log(current_selected_element); – Lalit Commented Dec 11, 2015 at 7:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.