Angular2 富文本编辑器 ng2-ckeditor 的使用
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>
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 版本号，根据自己的实际情况修改
.png)
.png)
.png)
Angular2 富文本编辑器 ng2-ckeditor 的使用的更多相关文章
- Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
- 富文本编辑器CKEDITOR的使用配置(问题注解)
CKEDITOR是一款非常轻便的富文本编辑器,如上图:参考网上的使用方法,我以.net为例,在aspx页面使用, 准备工作:首先要下载控件包,将解压后的整个文件夹添加到项目根目录. 第一步:引用js, ...
- MVC5富文本编辑器CKEditor配置CKFinder
富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...
- 富文本编辑器CKEditor的使用
由于最近在架构一个pc端b/s结构的项目,项目中有个论坛模块,当用户发帖时,需要用到富文本编辑器,考虑了一下,决定使用CKEditor富文本编辑器,虽然现在问世的富文本编辑器很丰富,比如还有百度的UE ...
- 富文本编辑器 CKeditor 配置使用 （带附件）
Ckeditor下载地址:http://ckeditor.com/download 1.CKeditor的基本配置 var textval=CKEDITOR.instances.TextArea1.g ...
- CKEditor富文本编辑器
CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...
- bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片
bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片 bootstrap-wysihtml5实际使用内核为ckeditor 故这里修改ckeditor即可 ...
- 搭建自己的博客（十三）：为博客后台添加ckeditor富文本编辑器
使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...
- ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
随机推荐
- HttpClient实现HTTP文件通用下载类
import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import org.apache. ...
- spring boot log4j2配置
[传送门]:log4j官网配置文件详解 1. 排除 spring boot 自带的 spring-boot-starter-logging 依赖 <dependency> <gro ...
- app自动化测试中的相关api
这个说的api即python自动化测试中经常会使用到的一些api,具体如下: 1.find_element_by_id/find_elements_by_id 定位元素api,使用方法如下: driv ...
- 课程五(Sequence Models)，第一 周（Recurrent Neural Networks） —— 0.Practice questions：Recurrent Neural Networks
[解释] It is appropriate when every input should be matched to an output. [解释] in a language model we ...
- mysql修改数据路径
步凑: 1.关闭mysql服务 [root@localhost /]# service mysqld stop 2.移动mysql文件夹到自定义的目录 [root@localhost /]# mv / ...
- GNum试用体验
只需在GNum上注册一个用户名,填上自己的电话号码,它就会自动生成一个URL,你的朋友(可以不注册GNum)在浏览器上进入这个 URL,就可以给你的手机打电话,目前可以免费通话200分钟,而且如果你邀 ...
- jQuery校验文件格式及大小
一.html页面 <input type="file" name="file" id="uploadFileId" style=&qu ...
- 一款Timer倒计时器
http://files.cnblogs.com/Alandre/Time.zip自己做的哦 欢迎关注
- 高可用Hadoop平台－HBase集群搭建
1.概述 今天补充一篇HBase集群的搭建,这个是高可用系列遗漏的一篇博客,今天抽时间补上,今天给大家介绍的主要内容目录如下所示: 基础软件的准备 HBase介绍 HBase集群搭建 单点问题验证 截 ...
- 常见HTTP状态码及URL编码表
常见HTTP状态码 1xx: 信息 (用于表示临时响应并需要请求者执行操作才能继续的状态代码) 消息: 描述: 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有 ...