本文介绍如何在 Angular 中使用 ng2-ckeditor 控件，示例代码基于 angular 6.0.2，node 8.11.2,  ng2-ckeditor 4.9.2 环境
 
1. 安装组件
 
npm install ng2-ckeditor
 
 2. 创建 ckeditor.component.ts 
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({

  selector: 'my-ckeditor',

  templateUrl: './ckeditor.component.html'

})

export class MyCKEditorComponent implements OnInit {

  name = 'ng2-ckeditor';

  ckeConfig: any;

  mycontent: string;

  log: string = '';

  @ViewChild("myckeditor") ckeditor: any;

  constructor() {

    this.mycontent = `<p>My html content</p>`;

  }

  ngOnInit() {

    this.ckeConfig = {

      allowedContent: true,

      extraPlugins: 'divarea'

    };

  }

  onChange($event: any): void {

    console.log("onChange");

    //this.log += new Date() + "<br />";

  }

}

3. 创建 ckeditor.component.html

<div>

    <ckeditor [(ngModel)]="mycontent" #myckeditor [config]="ckeConfig" debounce="500" (change)="onChange($event)">

    </ckeditor>

</div>

<div [innerHTML]="mycontent"></div>
4. 修改 app.module.ts，引入 CKEditorModule, CKEditorComponent，及自己定义的组件 MyCKEditorComponent
import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { CKEditorModule, CKEditorComponent } from 'ng2-ckeditor';

import { MyCKEditorComponent } from './ckeditor.component';

@NgModule({

  imports:      [ BrowserModule, FormsModule, CKEditorModule ],

  declarations: [ AppComponent, MyCKEditorComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

5. 在 index.html 文件头部标签 <head> 中加入 <script src="https://cdn.ckeditor.com/4.9.2/full-all/ckeditor.js"></script>， 其中 URL中 4.9.2 是你安装的 ckeditor 版本号，根据自己的实际情况修改

 
6. 在页面中使用 MyCKEditor 组件，<my-ckeditor></my-ckeditor>
 

7. 最终效果

8. 总结：也可以不用自己定义一个 MyCKEditor 组件，将 MyCKEditor 组件（ckeditor.component.ts， ckeditor.component.html）的代码直接应用到你要使用的相应组件中即可
 
9. 文中代码结构
 

Angular2 富文本编辑器 ng2-ckeditor 的使用的更多相关文章

  1. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

  2. 富文本编辑器CKEDITOR的使用配置(问题注解)

    CKEDITOR是一款非常轻便的富文本编辑器,如上图:参考网上的使用方法,我以.net为例,在aspx页面使用, 准备工作:首先要下载控件包,将解压后的整个文件夹添加到项目根目录. 第一步:引用js, ...

  3. MVC5富文本编辑器CKEditor配置CKFinder

    富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  4. 富文本编辑器CKEditor的使用

    由于最近在架构一个pc端b/s结构的项目,项目中有个论坛模块,当用户发帖时,需要用到富文本编辑器,考虑了一下,决定使用CKEditor富文本编辑器,虽然现在问世的富文本编辑器很丰富,比如还有百度的UE ...

  5. 富文本编辑器 CKeditor 配置使用 （带附件）

    Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...

  6. CKEditor富文本编辑器

    CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...

  7. bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片

    bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片   bootstrap-wysihtml5实际使用内核为ckeditor     故这里修改ckeditor即可 ...

  8. 搭建自己的博客（十三）：为博客后台添加ckeditor富文本编辑器

    使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...

  9. ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

随机推荐

  1. python修改文件中字符串并写入

    python实际工作中,做一些小工具,很方便.最近在做一个格式转换工具时候,用到了替换文件中特定字符串的 功能.当初没直接想出来,就在网上查了一下,做个记录,方便后续使用. # -*- coding: ...

  2. iOS-SVProgressHUDMaskType

    SVProgressHUDMaskTypeNone:默认图层样式,当HUD显示的时候,允许用户交互.   SVProgressHUDMaskTypeClear:当HUD显示的时候,不允许用户交互.   ...

  3. 超级详细使用Webpack4.X 搭建H5开发环境

    超级详细使用Webpack4.X 搭建H5开发环境 会撸码的小马 关注 2018.05.29 17:17* 字数 603 阅读 6453评论 0喜欢 5 很久没弄博客了,这两天有点时间来搞一下最近在弄 ...

  4. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  5. C# TableLayoutPanel使用方法

    一.利用TableLayoutPanel类展示表格,以10行5列为例 第1步:在前台创建一个panel,使TableLayoutPanel对象填充其内部. 第2步:创建TableLayoutPanel ...

  6. 基于redis的分布式ID生成器

    基于redis的分布式ID生成器  

  7. 如何自定义CSS滚动条的样式？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...

  8. 让BIND9对任意域名查询都返回固定的IP地址

    如何配置BIND9,使得向它发起的所有DNS请求都返回固定的IP地址?通过一些小技巧,可以实现. 下面是一个配置示例: 首先是主配置文件named.conf的配置: zone "." ...

  9. JAVA 注解的基本原理

    以前,『XML』是各大框架的青睐者,它以松耦合的方式完成了框架中几乎所有的配置,但是随着项目越来越庞大,『XML』的内容也越来越复杂,维护成本变高. 于是就有人提出来一种标记式高耦合的配置方式,『注解 ...

  10. [转]npm、 cnpm、yarn

    本文转自:https://blog.csdn.net/sinat_34682450/article/details/79473658 终于搞懂了三者之间的关系- 要知道三者之间的关系首先要了解三个包管 ...