Question

帮助我如何将CKEditor集成为angular2 / 4/6的嵌入式编辑器。在下面的链接中，仅说明了直接集成。https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/angular.html

Answer 1

角度4插入

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

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

3-将CKEditorModule导入到您想要ckeditor的页面模块中。

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-现在享受...

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

1 个答案: