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

Question

我正在嘗試在 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" 。

我能得到一些幫助嗎？

Answer 1

你應該使用它：

<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
}

Answer 2

如果要使用占位符或其他插件，則必須執行以下操作

1-轉到此頁面（ https://ckeditor.com/cke4/addons/plugins/all ）並下載您的插件（如占位符）並將其放在項目的資產文件夾中

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>