Question

我们使用Angular指令将数据呈现到项目的CKEditor中。我创建了使用该指令作为模板的小部件，但它不会向该字段中呈现任何内容。请帮助！提前谢谢！

小部件来源：

CKEDITOR.plugins.add('grid', {
requires: 'widget',
init: function(editor) {

    editor.widgets.add('grid', {
        template: '<div class="widget"> <div table-Directive></div> </div>',
        upcast: function(element) {
            return (element.name == 'div' && element.hasClass('widget'));
        },
        allowedContent: 'div[*]'
    });

    editor.ui.addButton('grid', {
        label: 'Demo',
        command: 'grid',
    });
}

}）;

指令来源：

define(['angular','js/controller/table-controller'],
  function(angular) {
  'use strict';

  angular
   .module('todoApp.table-directive', ['todoApp.table-controller'])
   .directive('tableDirective', [tableDirective]);

 function tableDirective() {
   var directive = {
     controller: 'TableController',
     templateUrl: 'template/tableDirective.html',
   };
   return directive;
 }
});

编辑：实际上你可以在ckeditor中使用angular组件，你只需要使用$ compile自己编译它。在这里，我附上简单的代码说明

// temporarily remove data-widget attribute sets by CKEditor before $compile()
// because angular thinks that data-widget is the same directive as widget
// and applies the directive twice
var dataWidget = element.getAttribute('data-widget');
element.removeAttribute('data-widget');
// use the scope of the closest parent that has a scope
var editorScope = $(editor.container.$).closest('.idoc-editor').isolateScope();
var compiledElement = application.$compile(element)(editorScope);
// $compile replaces the compiled element (instead of only decorating it)
// and this breaks the base CKEditor widget (this.element doesn't point to the
// correct element after $compile
this.element = new CKEDITOR.dom.node(compiledElement[0]);
this.element.$.setAttribute('data-widget', dataWidget);

Answer 1

我认为你不能在ckeditor中插入角度js代码，ckeditor在iframe中执行，角度脚本不会加载到这个iframe中。

但是在ckeditor小部件中，您可以使用ajax请求与服务器进行交互

如何使用包装到CKEditor小部件中的Angular指令

1 个答案: