CODEWITHSUNDEEP
angularjsckeditor
user2591056
user2591056

Reputation: 103

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.

Upvotes: 4

Views: 1717

Answers (2)

David Silva
David Silva

Reputation: 1091

You inspired me to write one myself, using the above example as a starting point. In my use case I wanted to take placeholder text from an attribute on the editor -- data-placeholder -- and display it in the editor. When the editor gets focus, the placeholder text disappears. When the editor blurs -- if no user content has been entered -- the placeholder text is displayed again. Additionally, I set a data-placeholder-showing attribute so that I can, for example, use CSS to make the placeholder text gray. Here's my code:

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

Upvotes: 2

user2591056
user2591056

Reputation: 103

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

Upvotes: 2

Related Questions