我们使用 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);
最佳答案
我认为您不能在 ckeditor 中插入 angular js 代码，ckeditor 是在 iframe 中执行的，而 angular 脚本未在此 iframe 中加载。
但是在 ckeditor 小部件中，您可以使用 ajax 请求与您的服务器进行交互
关于angularjs - 如何使用包裹在 CKEditor 小部件中的 Angular 指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29021193/