Question

I am setting a Pilcrow character (does not matter) as after element to a paragraph using this css

body.p:after {
    content:'\00b6'; // the used char or image does not matter
}

When i click after the after element inside the body the cursor/caret gets placed at the end of the paragraph as wished. But when i click on the after element no cursor is shown and typing in some letters does not work.

Is there a workaround for this?

Answer 1

Here is my solution to the problem.
OnClick i check if the offset of the click event equals the maximum textnodelength in order to decide if the caret needs to get set or not.
Goal here was to set the cursor to the end of the actual paragraph when clicked on the after element.

ed.onClick.add(function(ed, evt){

  var node = ed.selection.getNode();

  // need to set Cursor onClick on after element?
  if (ed.controlManager.get('irhiddenchars') && ed.controlManager.get('irhiddenchars').isActive() &&
  evt.target.nodeName.toLowerCase() == 'p'){
    if (node != evt.target) {
        ed.selection.setCursorLocation(evt.target, 0);
    }
    else {
        if (evt.rangeParent.nodeType == 3 && evt.rangeParent.textContent.length == evt.rangeOffset)
        {
            ed.selection.setCursorLocation(evt.rangeParent, evt.rangeOffset);
        }
    }
    // show Caret
    ed.focus();
  }
});