title: Listening for click event within CKEditor 4
body: <p>I've been reading about how to listen for click events within the CKEditor, specifically: <a href="https://stackoverflow.com/questions/24989766/ckeditors-click-event-not-firing">CKEditor&#39;s click event not firing</a> which was answered by Reinmar, but I still can't get this working.</p>
  
  <p>My scenario is I have a CKEditor instance. Paragraphs are enclosed with <code>&lt;p&gt;</code> tags, but I enclose parts of the text within <code>&lt;span&gt;</code> tags, the content looks like:</p>
  
  <pre><code>&lt;p&gt;This is the first paragraph&lt;/p&gt;
  &lt;p&gt;This is &lt;span&gt;The second paragraph&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>I want to add a click event, so whenever a user clicks on the text within a span tag, it performs an action, I'm happy with just getting an alert to display for the time being.</p>
  
  <p>This is my code that I've been trying. I've been <a href="http://docs.ckeditor.com/#!/api/CKEDITOR.editable" rel="nofollow noreferrer">working through the documentation</a> on the <code>editable()</code> <code>element</code>, <code>editor</code> and <code>document</code> properties / methods.</p>
  
  <pre><code>_instance.on('contentDom', function () {
  
      let editable = _instance.editable();
      let elements = new CKEDITOR.dom.element(editable.getElementsByTag('span'));
      console.log(elements);
  
      editable.attachListener(elements, 'click', function () {
          alert('test');
          console.log("click event");
      });
  });
  </code></pre>
  
  <p>The results of the <code>console.log(elements)</code> correctly logs the following:</p>
  
  <p><a href="https://i.stack.imgur.com/tWNtX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tWNtX.png" alt="console log result"></a></p>
  
  <p>and from reading the documentation, the <code>attachListener()</code> method requires the first argument to be an instance of <code>CKEDITOR.dom.element</code>, so I'm passing the correct arguments, but nothing is alerted or logged when I click on the span tags.</p>
  
  <p>I'm not sure how to proceed to any help would be appreciated.</p>
  
  <h2>Edit</h2>
  
  <p>If I replace <code>editable.attachListener(elements...)</code> with <code>editable.attachListener(editable...)</code> it works as expected, but works whenever I click anywhere within the editor, not specifically span tags, which doesn't really help me that much.</p>