Copy & Paste custom tags in CKEDITOR 4.0

Question

I have some custom tags inside my HTML.

Like <mytag class="atr">text</mytag> . I want to copy this whole tag and paste the same. When i try to copy i am getting only the text, i know editor will support only valid html tags. Like copy and paste the bold,italic etc., Is there any other way to make my custom tag to copy?. Like using the DTD of CKEDITOR or htmlparser. Any suggestions.?

Answer 1

Too long to be a comment. I'm not sure that this method will work - depends on how the copy&paste events work. I suggestion that you listen to the "paste" event and during the paste you convert the incoming elements from <xxx> to for example <div class="converted" original="xxx" > . The xxx can be any tag name, such as mytag or iloveponies.

Then when before saving your content you examine the data from CKEditor and convert the elements back to their original statuses. The algorithm might look like this:

1. Get data from CKEditor
2. Loop through each DIV element from data
3. Check if element has the .converted class
4. If no, don't do anything to it
5. If yes, get the value of it's "original" attribute (xxx)
6. Convert the element from DIV back to XXX
7. Continue saving your data

You can do that in the fronted or the backend, most likely either will have tools available for this kind of operation. I'm guessing that fronted will be easier though.

Answer 2

You can create a Widget for each custom tag. Don't forget to specify the allowedContent- and requiredContent-Attributes. And modify the dtd to make the tag editable.

For example:

CKEDITOR.dtd.$editable['mytag'] = 1;    
editor.widgets.add('mytagWidget', {
        allowedContent: 'mytag(atr)',
        requiredContent: 'mytag',
        template: '<mytag class="atr">text</mytag>',
        editables: {
            text: {
                selector: '.atr'
            }
        },
        ...