CKEDITOR中的文本占位符（角度上下文）

user2591056 发表于 Dev

用户名

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

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

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

在角度上下文中工作，我能够在将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();
            }
        });

    }
});

}）（）;

为我看起来很丑。任何反馈表示赞赏。

用户名

这似乎是最终的解决方案：

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

当用户将选择集中在可编辑区域内时，会将选择应用于“文本占位符”类的元素

更新： 请参见示例

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。