本文介绍如何在 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. 首页背景图片在PC端有显示，在手机端不显示的解决方法

    今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...

  2. 从 moment -> nodejs -> sequelize -> postgres，你都得设置好时区

    背景 最近在做报表统计,因为 sequelize 的时区配置没加导致了统计数字对不上的问题. 问:大家都知道时区,但是你清楚 UTC 和 GMT 的区别吗? 答:UTC 是我们现在用的时间标准,GMT ...

  3. Linux下MySQL的简单操作

    Linux下MySQL的简单操作 更改mysql数据库root的密码 首次进入数据库是不用密码的: [root@localhost ~]# /usr/local/mysql/bin/mysql -ur ...

  4. Maven Optional & Exclusions 使用区别

    Optional和Exclusions都是用来排除jar包依赖使用的,两者在使用上却是相反. Optional定义后,该依赖只能在本项目中传递,不会传递到引用该项目的父项目中,父项目需要主动引用该依赖 ...

  5. 测试工具之RobotFramework界面基本功能使用

    安装好RobotFramework后,直接在运行或者命令行中执行ride.py即可启动RF 启动完成后的界面如下: 界面很简洁,然后我们开始点击file并创建project: 接下来右键project ...

  6. Mybatis-generator生成Service和Controller

    好久记录笔记,这段时间做政府的项目,数据录入系统基本都是通过excel导入,且数据量大,许多也是单表的录入,这就有很多可以通用的代码,如controller,service层的那一套都是可以代码生成, ...

  7. 第六章：声明式服务调用：Spring Cloud Feign

    Spring Cloud Feign 是基于 Netflix Feign 实现的,整合了 Spring Cloud Ribbon 和 Spring Cloud Hystrix,除了提供这两者的强大功能 ...

  8. IdentityServer4之SSO（基于OAuth2.0、OIDC）单点登录、登出

    IdentityServer4之SSO(基于OAuth2.0.OIDC)单点登录.登出 准备  五个Web站点: 1.localhost:5000 :                  认证服务器.2 ...

  9. 无源码调试smali

    0x01    工具①Android Studio最新版.(用的1.5)②apktool尽量使用最新版的.(反编译本人用baksmali-2.1.3.jar)③smalidea插件.下载地址https ...

  10. SpringBoot----跨域配置

    前言: 当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时,一个资源会发起一个跨域HTTP请求(Cross-site HTTP request).比如说,域名A ( http://dom ...