本文介绍如何在 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. Could not load file or assembly Microsoft.SqlServer.management.sdk.sfc version 11.0.0.0

    I have installed MS SQL Server 2012 R2 and when I try to update model from database under EDMX file ...

  2. Tools - 一些代码阅读的方法

    1 初始能力 让阅读思路清晰连贯,保持在程序的流程架构和逻辑实现上,不被语法.编程技巧和业务流程等频繁地阻碍和打断. 语言基础:熟悉基础语法,常用的函数.库.编程技巧等: 了解设计模式.构建工具.代码 ...

  3. JavaScript 全屏展示

    浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...

  4. Mobility Model and Routing Model about the ONE

    ONE主要的功能是节点的移动,节点间的相遇情况,路由情况以及消息的处理机制.下面简要介绍下目前ONE自带的六种移动模型和六种路由模型. Mobility Model: 从大的方面,可以分为三种,1)随 ...

  5. postgresql-排序

    postgresql的排序. https://www.cnblogs.com/flying-tiger/p/8120046.html 1.是根据排序数据量的大小来判断,如果数据量少到能够整体放到内存的 ...

  6. 【LeetCode】14. 最长公共前缀

    题目 编写一个函数来查找字符串数组中的最长公共前缀.如果不存在公共前缀,返回空字符串 "". 示例 1:输入: ["flower","flow&quo ...

  7. python之斐波那契数列递归推导在性能方面的反思

    在各种语言中,谈到递归首当其冲的是斐波那契数列,太典型了,简直就是标杆 一开始本人在学习递归也是如此,因为太符合逻辑了 后台在工作和学习中,不断反思递归真的就好嘛? 首先递归需要从后往前推导,所有数据 ...

  8. pycharm中可以运行脚本但是不能debug脚本

    以前用的时候好好地,但是最近上班突然脚本就不能debug了,debug直接报错,如下所示 上网查过该有的原因: 1.在pycharm中两个地方设置成utf-8,页面右下角和File>settin ...

  9. mysql 开发进阶篇系列 23 应用层优化与查询缓存

    一.概述 前面章节介绍了很多数据库的优化措施,但在实际生产环境中,由于数据库服务器本身的性能局限,就必须要对前台的应用来进行优化,使得前台访问数据库的压力能够减到最小. 1. 使用连接池 对于访问数据 ...

  10. 从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

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