Copy & Paste custom tags in CKEDITOR 4.0

1
votes

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.?

2
javascripthtmlckeditorcopy-paste
This seems to be my solution to everything, but one possibility would be pre- and post-procesisng the tag. Maybe you could listen to the paste event and convert it into a DIV, like <mytag...> --> <div class="atr converted-mytag"...>. Haven't ever hooked into the copy&paste functionality so not adding as answer (unless it works :D) - Joel Peltonen
The problem is i have multiple custom tags.. - Ramesh
How is that a problem? Even if you have a completely random amount of random tags, you can use that method; just convert <XXX> to <div class="convertedTag original-XXX"> I'd imagine that hooking into the copy&paste would be a bigger issue. Would that work for you? Is there something I'm not understanding? I'll add an answer if it is possible. - Joel Peltonen
yes i misunderstand everything. Can you explain little bit about your suggestion. - Ramesh

2 Answers

1
votes

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.

1
votes

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'
            }
        },
        ...