angularjs - CKEDITOR 中的文本占位符( Angular 上下文)

Question

我对 CKEDITOR API 还不是很熟悉，现在我一直在尝试寻找在 CKEDITOR 可编辑区域内创建占位符的方法。占位符的预期行为 - 在用户与其交互时消失，从而允许改为编辑内容。

我知道已经有一个占位符插件( http://ckeditor.com/addon/placeholder )，但它的行为不是我想要的。

更具体地说，问题是:是否可以订阅 CKEDITOR 内特定元素上的某些事件？

在 Angular 上下文中工作，我能够在将 html 传递给 CKEDITOR ng-model 之前对其进行编译

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

但是我尝试在指令内设置点击事件失败:

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

有什么想法吗？

更新:现在我想出了实现简单插件的解决方案，然后在 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”类的元素的选择

更新: See example