我尝试将以下代码添加到index.html中,如
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularCkeditor</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="assets/ckeditor/dist/bundle.js"></script>
</body>
</html>
但是它不起作用。我还尝试将它导入到组件中,像这样
`import CKEDITOR from '../assets/ckeditor/dist/bundle.js';
',但它没有工作,因为Angular使用传统的方式使用虚拟DOM(为Angular安装ckeditor组件)。似乎没有关于自定义表插件的文档或教程请帮忙!
你应该使用CKeditor可用的NPM包。
NPM包:https://www.npmjs.com/package/@ckeditor/ckeditor5-angular
文档:https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/angular.html
这将是使用CKeditor更好的方法。
我在angular组件中添加了以下代码
<h1>an angular component to test Ckeditor</h1>
<ckeditor [editor]="editor" data="<p>Bonjour Ckeditor</p>"></ckeditor>
和我添加我的自定义构建到资产项目架构
我用webpack编译了我的ckeditor:
webpack --mode production
最后和
我使用
将编译好的ckeditor导入到angular组件中import * as ClassicEditor from '../assets/ckeditor5-build-classic/';