本文介绍如何在 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. 开源性能测试工具Locust使用篇（二）

    那如何理解Locust和TaskSet这两个类呢? class HttpLocust(Locust) 在Locust类中,具有一个client属性,它对应着虚拟用户作为客户端所具备的请求能力,也就是我 ...

  2. 数据库之SqlDataAdapter

    SqlDataAdapter 类 表示用于填充 DataSet 和更新 SQL Server 数据库的一组数据命令和一个数据库连接.无法继承此类. 命名空间:System.Data.SqlClient ...

  3. 凉凉了，Eureka 宣布闭源，Spring Cloud 何去何从？

    今年 Dubbo 活了,并且被 Apache 收了.同时很不幸,Spring Cloud 下的 Netflix Eureka 组件项目居然宣布闭源了.. 已经从 Dubbo 迁移至 Spring Cl ...

  4. 2-2 Todolist简单案例

     用v-on,v-for,v-model实现简单的Todolist案例

  5. JConsole观察分析Java程序的运行状态

    Java 自带性能监控工具:监视和管理控制台 jconsole,它可以提供 Java 某个进程的内存.线程.类加载.jvm 概要以及 MBean 等的实时信息. 通过Java SE Developme ...

  6. kubernetes入门之获取私有仓库镜像

    一般情况下,我们项目构建的镜像统一会推送至私有仓库,那么这里大家可以参考阿里云的私有仓库搭建教程.那么我们可以通过以下步骤拉取: 1.推送及拉取镜像 1.1. 登录阿里云Docker Registry ...

  7. Eclipse创建web项目目录结构

    效果图如下: 0 新建Web项目 1.右击项目MyProject进入Java Build Path 2. 点击Add Folder按钮,进入如下界面 3.选择src,点击Add New Folder按 ...

  8. 从零开始学 Web 之 BOM（二）定时器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. Kafka项目实战－用户日志上报实时统计之分析与设计

    1.概述 本课程的视频教程地址:<Kafka实战项目之分析与设计>  本课程我通过一个用户实时上报日志案例作为基础,带着大家去分析Kafka这样一个项目的各个环节,从而对项目的整体设计做比 ...

  10. MongoDB 备份与还原 mongodump、mongorestore

    目录 MongoDB 备份与还原 一. MongoDB 备份 1.mongodump 2 .cp 或者rsync 3.单节点意外关闭后,如何恢复数据 4.查看备份数据 二.MongoDB 还原 1.m ...