将 CKEditor 作为内联编辑器与 Angular 4 集成答案

【问题标题】：Integrate CKEditor as inline editor with Angular 4将 CKEditor 作为内联编辑器与 Angular 4 集成
【发布时间】：2018-11-29 23:04:56
【问题描述】：

帮助我如何将 CKEditor 作为内联编辑器与 angular2/4/6 集成。在下面的链接中，它只解释了直接集成。https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

【问题讨论】：

您需要什么集成？ direct integration 是什么意思？
通常编辑器工具栏会在每个 html 元素的页面加载时显示，我不希望这样。当我单击任何 html 元素时，应显示编辑器框。
请澄清问题是关于 CKEditor 4 还是 CKEditor 5。这是两个不同的编辑器。

标签： angular ckeditor

【解决方案1】：

角 4 积分

1- 使用 npm 安装“ng2-ckeditor”：“1.1.9”。

2- 在 index.html 中添加带有脚本标签的“https://cdn.ckeditor.com/4.11.1/full/ckeditor.js”

3- 在你想要ckeditor的页面的模块中导入CKEditorModule。

4- 随意设置配置

   ckEditorWithImageConfig = {
        "toolbarGroups": [
            {"name": "basicstyles", "groups": ["basicstyles"]},
            {"name": "links", "groups": ["links"]},
            {"name": "styles", "groups": ["heading"]},
            {"name": "paragraph", "groups": ["list", "blocks", "indent"]},
            {"name": "document", "groups": ["mode", "undo"]},
            {"name": "insert", "groups": [ "Image" ] }
        ],
        "removeButtons": "Save,Templates,Find,Replace,Scayt,SelectAll,Subscript,Superscript,CreateDiv,NewPage,Print,Preview," +
        "Anchor,Font,FontSize,Styles,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe",
        "removePlugins": "elementspath",
        "removeDialogTabs": "image:advanced",
        "extraPlugins": "uploadimage",
        "filebrowserImageUploadUrl": "url"
    };

5- 在 html 中添加这个并将配置传递给 [config]

<ckeditor name='intro'                                                                   
  [config]= ckEditorWithImageConfig formControlName="text">
</ckeditor>

6- 现在享受...

【讨论】：

这与通用编辑器集成相同，我想要内联编辑器的示例。即当我单击页面中的任何 html 元素时，应显示编辑器弹出窗口。