Text placeholders in CKEDITOR (angular context)

Question

I'm not very familiar with the CKEDITOR API yet, and now I'm stuck trying to find a way to create placeholders inside the CKEDITOR editable area. The expected behavior for the placeholder is to disappear when interacting with the user, which allows you to edit the content.

I know that there is already a placeholder plugin ( http://ckeditor.com/addon/placeholder ), but its behavior is not what I'm looking for.

To be more specific, the question arises: is it possible to subscribe to some events on a specific element inside CKEDITOR?

Working in an angular context I can compile my html before it is passed to the CKEDITOR ng model

$scope.html = $compile('<div><span text-placeholder >Placeholder</span></div>')($scope).html();

But then I am not trying to set click events inside the directive:

.directive('textPlaceholder', [ function () {
    return {
        restrict: 'A',
        link: function ($scope, $element) {
            //THIS DOES NOT WORK UNFORTUNATELY
            $element.on('click', function () {
                console.log('clicked');
            })
        }
    }
}])

Any thoughts?

UPDATE:. , CKEDITOR:

(function () {
CKEDITOR.plugins.add('text-placeholder', {
    init: function (editor) {

        editor.on('key', function (evt) {
            var el = $(CKEDITOR.instances.editor1.getSelection().getNative().baseNode.parentElement);
            if (el.hasClass('text-placeholder')) {
                el.remove();
            }
        });

    }
});

})();

. .

Answer 1

, , :

CKEDITOR.plugins.add('text-placeholder', {
    init: function (editor) {
        editor.on('contentDom', function () {
            var editable = editor.editable();
            editable.attachListener(editable, 'click', function (event) {
                var $placeholder = $(event.data.$.target).closest('.text-placeholder');
                if ($placeholder.length > 0) {
                    var selection = editor.getSelection();
                    selection.selectElement(selection.getStartElement());
                }
            });
        });
    }
});

"text-placeholder",

Update: .

Answer 2

, . - - place-place-place . , . - , - . , -, , , CSS, . :

CKEDITOR.plugins.add('text-placeholder', {
  init: function (editor) {
    var placeholder = editor.element.getAttribute('data-placeholder');
    editor.on('contentDom', function () {
      if (placeholder) {
        editor.setData(placeholder);
        editor.element.setAttribute('data-placeholder-showing', true);
      }
    });
    editor.on('focus', function() {
      if (editor.getData() === placeholder) {
        editor.element.setAttribute('data-placeholder-showing', false);
        editor.setData('');
      }
    });
    editor.on('blur', function() {
      if (placeholder && editor.getData().length === 0) {
        editor.element.setAttribute('data-placeholder-showing', true);
        editor.setData(placeholder);
      }
    });
  }
});