title: CKEDITOR - how to add permanent onclick event?
body: <p>I am looking for a way to make the CKEDITOR wysiwyg content interactive. This means for example adding some onclick events to the specific elements. I can do something like this:</p>
  
  <pre><code>CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');
  </code></pre>
  
  <p>After processing this action it works nice. But consequently if I change the mode to source-mode and then return to wysiwyg-mode, the javascript won't run. The onclick action is still visible in the source-mode, but is not rendered inside the textarea element. </p>
  
  <p>However, it is interesting, that this works fine everytime:</p>
  
  <pre><code>CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');
  </code></pre>
  
  <p>And it is also not rendered inside the textarea element! How is it possible? What is the best way to work with onclick and onmouse events of CKEDITOR content elements?</p>
  
  <p>I tried manually write this by the source-mode:</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;
              This is some &lt;strong id="id1" onclick="alert('blabla');" style="cursor: pointer;"&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the Javascript (onclick action) does not work. Any ideas?</p>
  
  <p>Thanks a lot! </p>
  
  <p>My final solution:</p>
  
  <pre><code>               editor.on('contentDom', function() {
                  var elements = editor.document.getElementsByTag('span');
                  for (var i = 0, c = elements.count(); i &lt; c; i++) {
                      var e = new CKEDITOR.dom.element(elements.$.item(i));
                      if (hasSemanticAttribute(e)) {
                          // leve tlacitko mysi - obsluha
                          e.on('click', function() {
                              if (this.getAttribute('class') === marked) {
                                  if (editor.document.$.getElementsByClassName(marked_unique).length &gt; 0) {
                                      this.removeAttribute('class');
                                  } else {
                                      this.setAttribute('class', marked_unique);
                                  }
                              } else if (this.getAttribute('class') === marked_unique) {
                                  this.removeAttribute('class');
                              } else {
                                  this.setAttribute('class', marked);
                              }
                          });
                      }
                  }
              });
  </code></pre>