本文介绍如何在 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. Linux 系统资源管理-top-cpu

  2. Shell-14--awk

    awk ' 条件1{ 动作1} 条件2{动作2}...' 文件名 awk处理数据是 先读取第一行 然后再去处理 printf 不会加入换行符,需要手动加入 print 会自动加换行 begin 是在后 ...

  3. JavaScript中子类调用父类方法的实现

    一.前言 最近在项目中,前端框架使用JavaScript面向对象编程,遇到了诸多问题,其中最典型的问题就是子类调用父类(super class)同名方法,也就是如C#中子类中调用父类函数base.** ...

  4. request和response简介

    Tomcat收到客户端的http请求,会针对每一次请求,分别创建一个代表请求的request对象.和代表响应的response对象. 既然request对象代表http请求,那么我们获取浏览器提交过来 ...

  5. 机器视觉编程作业02（00）EM算法

    任务:对图像进行边缘检测 思路: )将图像的灰度数值进行0-255的维度统计: )EM算法分析出几个核心显示区块的灰度: )使用通用的边界检测算法(具体哪一种待定). 编辑于2017.12.24 15 ...

  6. 金三银四季来了！Java 面试题大放送，能答对70%就去BATJTMD试试~

    摘要: 2019,相对往年我们会发现今年猎头电话少了,大部分企业年终奖缩水,加薪幅度也不如往年,选择好offer就要趁早,现在开始准备吧,刷一波Java面试题,能回答70%就去BATJTMD大胆试试~ ...

  7. SOA和微服务架构的区别

    微服务架构强调的第一个重点就是业务系统需要彻底的组件化和服务化,原有的单个业务系统会拆分为多个可以独立开发,设计,运行和运维的小应用.这些小应用之间通过服务完成交互和集成.每个小应用从前端web ui ...

  8. Django--Auth 模块

    1 Auth模块是什么 Auth模块是Django自带的用户认证模块: 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码 ...

  9. JavaSE-关键字final

    final修饰数据: final修饰基本数据类型,使数值恒定不变,修饰对象引用,final使引用恒定不变 final修饰的成员变量必须要被初识化 final可以修饰方法中的参数列表,被修饰的参数无法在 ...

  10. Vue + Element UI 实现权限管理系统 前端篇（十）：动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...