user2591056 user2591056 - 1 month ago 21
AngularJS Question

Text Placeholders in CKEDITOR (angular context)

I am not very familiar with the CKEDITOR API yet and now I got stuck trying to find the way to create placeholders inside of the CKEDITOR editable area.The expected behaviour for the placeholder - to dissappear on user interaction with it, allowing to edit the content instead.

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

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

Working in the angular context I am able to 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 fail trying to set click events inside of 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: For now I came up with the solution to implement simple plugin and then reference it in the CKEDITOR config:

(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();
}
});

}
});


})();

Looks ugly for me. Any feedback is appreciated.

Answer

This seems to be a final Solution:

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());
                }
            });
        });
    }
});

This applies the selection on the element with "text-placeholder" class when user focuses it inside of the editable area

Update: See example