Angluar 11集成CkEditor 5

选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。

CkEditor 5提供了5种即用型的编辑器,分别是

  • Classic editor
  • Inline editor
  • Balloon editor
  • Balloon block editor
  • Document editor

版本说明

CkeEditor 5也提供可Angular的Component,npm包是ckeditor5-angular,分为两个主版本:

  • 版本 1.x.x :适用于 Angular 5-8。Angular官方对这些版本已不再提供支持,所以CkEditor 5也不在对1.x.x进行维护。 
  • 版本 2.x.x :适用于 Angular 9.1+。

选择ckeditor5-angular 2.x.x的版本最好是依赖于相同的Angular主版本,此处是Angular11,而v2.0.2开始支持Angular11,示例版本为:

  • ckeditor5-angular:v2.0.2
  • angular:11.2.14

安装ckeditor5-angular

安装最新的ckeditor5-angular

npm install --save @ckeditor/ckeditor5-angular

安装指定版本的ckeditor5-angular

npm install --save @ckeditor/ckeditor5-angular@2.0.2

安装ckeditor5 build

安装完ckeditor5-angular组件后,选择一个ckeditor5的build,可以是ckeditor5官方提供的editor build,也可以是自定义的build,这里以官方@ckeditor/ckeditor5-build-classic为示例。

npm install --save @ckeditor/ckeditor5-build-classic

导入CKEditorModule

导入CKEditorModule到所使用编辑器组件的模块中:

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
@NgModule( {
    imports: [
        CKEditorModule,
        // ...
    ],
    // ...
} )

使用editor组件

导入CKEditorModule后,我们就可以使用editor组件了,这里是ClassicEditor。

在使用编辑器的Angular组件中导入ClassicEditor:

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component( {
    // ...
} )
export class MyComponent {
    Editor = ClassicEditor;
    // ...
}

注意:Editor不能设定为私有,需要被Angular模板能访问到。

在模板中使用ckeditor:

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

 

版权声明:著作权归作者所有。

相关推荐

Angular CLI 集成jQuery

Angular CLI有两种方式集成jQuery:以全局方式导入和以模块方式导入。安装在导入jQuery之前需要先安装:npm install jquery --save npm install @types/jquery --save 全局方式在.angular-cli.json的app.scripts引入jquery&quo

Spring Boot集成kafka

Spring Boot对kafka提供了自动配置(auto configuration)。使用用Spring Boot只需要做很少的配置即可集成对kafka的访问。pom配置1、继承spring-boot-starter-parent<parent>   <groupId>org.springframework.boot&l

Spring Boot 集成RabbitMQ

此处假设已经安装好了RabbitMQ,主要讲述使用Spring Boot如何集成RabbitMQ。添加依赖在Maven的pom.xml添加rabbitmq的starter依赖,内容如下:<?xml version="1.0" encoding="UTF-8"?> <project xmlns=&quo

Spring Cloud Stream集成Kafka

这里演示使用Spring Boot ,Spring Cloud集成Kafka来实现一个简单的实时流系统。添加依赖可以在https://start.spring.io创建一个基于spring boot的maven项目。需要添加的主要依赖:spring-cloud-stream以及spring-cloud-starter-stream-kafka,如下:<

Spring Boot集成JSP

Spring Boot是不推荐使用JSP作为模板文件。如果Spring Boot使用JSP是有一些限制,其中只能打包成可执行的war包或者可在外部容器(如tomcat)部署的war包。项目目录结构在普通的spring boot项目基础上,在src/main下新增目录webapp/WEB-INF/jsp用来存放jsp文件,静态文件存放在/src/resources/static。结构如图:

SpringCloud集成Zookeeper

Spring Cloud介绍Spring Cloud是一个基于SpringBoot实现的微服务架构开发工具。它为微服务架构中涉及的配置管理、服务治理、断路器、智能路由、微代理、控制总线、全局锁、决策竞选、分布式会话和集群状态管理等操作提供了一种简单的开发方式,基于http协议开发的开箱即用的微服务架构注册中心Spring Cloud 早期版本的注册中心主要使用Eureka,但在2.0过后,Netf

Angular集成moment.js使用

moment.js是一个专门用于处理时间的包。可以通过下面的方法把moment.js集成到Angular中使用。一、使用npm安装moment.jsnpm install --save moment二、在使用moment.js的.ts文件中导入import * as moment from 'moment'; 三、使用moment.jsmyDate = moment(someDate).

CKEditor 5设置编辑器高度

CKEditor 5提供的几种编辑器,它们的高度是随着内容变化的,官方没有提供设置编辑器高度的参数配置。如果要给编辑器固定高度有以下两种做法。对于经典版(classic editor build),可以通过CSS:.ck-editor__editable_inline {  height: 200px;}对于所有版本,可以通过js来设置:editor.editing.view.chang

理解CKEditor5的schema

我们知道,CKEditor5是一个用MVC架构设计的富文本编辑器。如上图所示,三层分别是:Model,Controller, View首先,第一个问题是schema属于那一层?经过官方文档的初步学习,我们可以看到:editor.model.schema; // -> The model's schema.因此,我们可以得出结论:schema属于模型层:其次我们需