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

Question

我对 CKEDITOR API 还不是很熟悉，现在我被困在试图找到在 CKEDITOR 可编辑 area.The 占位符的预期行为中创建占位符的方法 - 消失在用户与其交互时，允许编辑内容。

我知道已经有一个占位符插件 (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" class 的元素

更新： See example

Answer 2

你启发我自己写一个，以上面的例子为起点。在我的用例中，我想从编辑器上的一个属性——数据占位符——中获取占位符文本，并将其显示在编辑器中。当编辑器获得焦点时，占位符文本消失。当编辑器模糊时——如果没有输入用户内容——占位符文本会再次显示。此外，我设置了一个 data-placeholder-showing 属性，这样我就可以使用 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);
      }
    });
  }
});

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

Text Placeholders in CKEDITOR (angular context)

ckeditor

angularjs