ng2-ckeditor 使用 typescript 和 angular 2.0 添加占位符插件

Posted 2023-03-13

【中文标题】ng2-ckeditor 使用 typescript 和 angular 2.0 添加占位符插件

【英文标题】：ng2-ckeditor Add Placeholder plugin using typescript and angular 2.0

【发布时间】：2017-01-05 15:11:54

【问题描述】：

我正在尝试在 CKEditor 工具栏中获取占位符插件，但在将 extraPlugins:'placeholder' 添加到 CKEditor 配置时出现以下错误 -

Error: [CKEDITOR.resourceManager.load] Resource name "placeholder" was not found at "//cdn.ckeditor.com/4.5.9/standard/plugins/placeholder/plugin.js?t=G6DD".

这是控制台日志截图 -

我还创建了一个plunker。

我已经通过 npm 安装了 "ng2-ckeditor": "^1.0.4"。

我能得到一些帮助吗？

【参考方案1】：

如果您想使用占位符或其他插件，您必须执行以下操作

1- 转到此页面 (https://ckeditor.com/cke4/addons/plugins/all) 并下载您的插件（如占位符）并将其放在项目的 assets 文件夹中

2- 包括来自 CDN 的 ckeditor（在 index.html 中）

  <script src="https://cdn.ckeditor.com/4.12.1/full-all/ckeditor.js"></script>

3-引用占位符插件（在index.html中）

  <script src="./assets/ckediotr/plugins/placeholder/plugin.js"></script>

现在，是时候使用它了

在 app.component 中：

export class AppComponent implements OnInit 
  ckeditorContent = 'angualrckeditor';
  ngOnInit(): void 
    CKEDITOR.on('instanceCreated', function (event, data) 
      var editor = event.editor,
        element = editor.element;
      editor.name = "content"
    );
  

在 app.component.html 中

<form #form="ngForm">
 <ckeditor #myEditor [(ngModel)]="ckeditorContent" name="ckeditorContent"
  [config]="uiColor: '#a4a4a4' , allowedContent: false,forcePasteAsPlainText: false , extraPlugins: 'placeholder'"
  debounce="500"> </ckeditor>
</form>

【参考方案2】：

你应该使用它：

<script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>

你应该在你的CKEdior标签中使用：

<ckeditor
  [(ngModel)]="sampleContent"
  [config]="uiColor: '#a0a0a0',extraPlugins:'placeholder'"
  debounce="500">
</ckeditor>

你可以使用：

(change)="onChange($event)"

但你必须在你的组件中定义：

onChange(body:any) 
 //your Code