1

Here is a nonstandard HTML element that I defined (AngularJS makes this easy):

<exercise id="Sample Exercise" language="Scala" lectureId="5437"> This is the text of the lecture </exercise>

If I use this element in an HTML document, each time I switch from CKEditor's rendered mode to source mode a new empty paragraph is added between each of the block elements in the document:

<p>&nbsp;</p>

The 2nd time I switch, I get two insertions:

<p>&nbsp;</p>

<p>&nbsp;</p>

The 3rd time I switch, I get three insertions between each block-level element, etc:

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

Can anyone suggest a workaround?

Arturs
  • 1,258
  • 5
  • 21
  • 28
Mike Slinn
  • 7,705
  • 5
  • 51
  • 85
  • 3
    Why is it necessary to make up a HTML element? What purpose does it serve, how is it rendered? Is using a normal element with a specific class not a workable alternative? – Pekka Aug 31 '13 at 21:47
  • 2
    I'm not going to get into that discussion – Mike Slinn Sep 01 '13 at 02:47
  • 2
    Shrug - it's your funeral I guess. I think it's going to cause more trouble with CKEditor than it's worth. I'd consider a placeholder element (that could easily be transformed into a `` element after editing) – Pekka Sep 01 '13 at 02:49

2 Answers2

0

It seemed easier to avoid custom elements and so I used HTML5 data attributes.

<div class="exercise" data-id="Challenge #42" data-language="Scala" data-lectureid="5437">
  <p>Create a program that outputs the meaning of life, the universe, and everything.</p></div>

This worked out. Maybe greater integration between CKEditor and AngularJS will evolve over time.

Mike Slinn
  • 7,705
  • 5
  • 51
  • 85
-1

Pekka's question is very good - why do you need to load a custom element into CKEditor? Neither browsers (which do one part of WYSIWYG editing) not CKEditor (which does another part) know how to handle this element, what it means, how to render it and how editing features should work around it. For example, if I understood your question, you wrote about <exercise> that it is a block element. How do CKEditor and browsers know that it is a block element? :|

Second thing you should understand is that CKEditor is not a WYSIWYG website builder, but a "documents" editor. Its content has to have a meaning for it and that tag won't have it.

Anyway, if you must go this way, there are some things you can do.

Here are two answers that can give you an idea what you can do: CKEditor strips <i> Tag.

If you'll decide not to protect source of your <exercise> tags, but to render them, then you should also know about the CKEDITOR.dtd object, which I described briefly here: ckeditor how to allow for .insertHtml("<customTag myAttr='value'"></customTag>").

Community
  • 1
  • 1
Reinmar
  • 21,729
  • 4
  • 67
  • 78