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编辑器(富文本编辑器) ...
随机推荐
- Mybatis框架二：增删改查
这里是搭建框架和准备数据: http://www.cnblogs.com/xuyiqing/p/8600888.html 实现增删改查功能: 测试类: package junit; import ja ...
- 阿里开源项目arthas安装使用
文档地址 https://alibaba.github.io/arthas/install-detail.html 开始安装 我本地就装window版本了,下载zip包 按照快速入门,编译demo程序 ...
- LeetCode：145_Binary Tree Postorder Traversal | 二叉树后序遍历 | Hard
题目:Binary Tree Postorder Traversal 二叉树的后序遍历,题目要求是采用非递归的方式,这个在上数据结构的课时已经很清楚了,二叉树的非递归遍历不管采用何种方式,都需要用到栈 ...
- setting-mirrorO以及下载jar包流程简介
mirrorOf常见的几种配置如下 1.* 2.repo3 3.repo1,repo2,*,!repo3 4.external:* 第二个例子只配置了一个repo3,这个镜像只能匹配id是repo3的 ...
- table滑块
我们做table时,常常想做一个滑块的移动效果,来让app显得更加生动,原理很简单,废话不说,直接上code public class AnimationActivity extends AppCom ...
- postgres 更新数据表
新增非空列: alter table t_test add column user_id integer; update t_test set user_id=0; alter table t_tes ...
- iOS ipa包瘦身，iOS8及以下text段超60MB
前沿 很早之前写过一篇相关文章,不过博客主机上跑路了之后数据没了,凭着记忆补了下相关资料 ipa安装包瘦身 清理无用图片,图片压缩(PNG换WebP和JPG),处于某种不可抗拒的原因,导致有部分3X图 ...
- 解决 "Script Error" 的另类思路
本文由小芭乐发表 前端的同学如果用 window.onerror 事件做过监控,应该知道,跨域的脚本会给出 "Script Error." 提示,拿不到具体的错误信息和堆栈信息. ...
- 新手易犯的典型缺陷--C#
这段时间花了点时间整理了几个新手易犯的典型缺陷(专门针对C#的),但是个人的力量毕竟有限缺陷的覆盖面比较窄,有些缺陷的描述也不够准确,这里先贴出来看看能不能集思广益,收集整理出更多的典型缺陷.目标就是 ...
- Struts2学习（五）———— s标签和国际化
一.s标签 在struts-2.3.15.1/docs/WW/docs/tag-reference.html下,就有着struts2所有标签的参考文献,只能看看其中比较常用的标签.其他的以后遇到了在看 ...