Question

我使用了ng2-ckeditor，但我需要将其用作内联，那么我如何将其用作内联？

https://www.npmjs.com/package/ng2-ckeditor

我正在使用angular-cli进行角度2开发。

Answer 1

要在ng2-ckeditor中进行内联，在ng2-ckeditor / src中更改ckeditor.component.js

更改this.instance = CKEDITOR.replace（this.host.nativeElement，config）; to this.instance = CKEDITOR.inline（this.host.nativeElement，config）; 这在我的本地系统中有效但面临生产问题

但是在取代之后我得到了 “无法设置未定义的属性'dir'”

我尝试在index.html中设置base_path但没有帮助。

Answer 2

首先要了解经典 ckeditor和内嵌之间的区别。

经典ckeditor 使用IFrame，ng2-ckeditor包装并提供角度组件，如：

<ckeditor></ckeditor>

在模板内部创建一个角度2组件，内部是iFrame。这个iFrame加载自己的CSS（缺省情况下，ckeditor CDN的contents.css）。这意味着您的编辑器实例与您的网站css隔离。

内联ckeditor 在HTML元素上使用html contenteditable属性（例如div或textarea - 请注意，并非所有元素都是supported）。

由于现在这是您网页中的div，您的网站样式将应用于该编辑器内（例如，如果用户按Enter键，从而在编辑器中创建<p>元素，无论<p> css如何正在页面上应用的内容将适用于编辑器中的用户<p>。

因此，首先在模板中创建div：

<div id="inline-editor1" contenteditable="true">
</div

现在你需要告诉CKEDITOR关于那个div。

所以在@Component装饰器之前的组件顶部，添加以下行：

declare var CKEDITOR: any;

最后在你的ngOnInit中，告诉CKEDITOR你的div：

  ngOnInit() {
    this.setConfig();
    CKEDITOR.disableAutoInline = true;
    CKEDITOR.inline( 'inline-editor1' );    
  }

现在当您在该div中单击时，您将获得内联ckeditor工具栏。

文档here。

CAVEAT - 请注意

此方法意味着您将无法使用[（ngModel）]绑定到内联编辑器的内容（就像使用ng2-ckeditor一样）。您必须使用标准JavaScript来提取contents of the editor for saving。

Here is a plunkr显示ng2-ckeditor和内联编辑器。请注意内联编辑器如何不绑定任何模型。

如何使用ng2-ckeditor作为内联？

2 个答案: