Angular4的ng2-ckeditor富文本编辑框的使用

最新推荐文章于 2024-01-28 22:31:32 发布

U世界的V梦想

最新推荐文章于 2024-01-28 22:31:32 发布

阅读量1w

点赞数

分类专栏： angular2 文章标签： angular2 angular4 富文本编辑框 ng2-ckeditor

本文链接：https://blog.csdn.net/qq_38321709/article/details/77045705

版权

8 篇文章 0 订阅

订阅专栏

在网上找了很多富文本编辑器,都没使用成功,很多教程只教一般,关键的代码也不说明,让你去猜,我很无奈,只好自己去找自己去亲测,而且有些样式和功能也不是很满意,千挑万选才选中这款编辑器,并且将他用起来了!贼多的坑!不过还是克服了!

样式如下:

使用方法如下:首先cli配置并且安装ng2-ckeditor:

"ng2-ckeditor": "^1.1.6"

然后再app.module中引入

import {CKEditorModule} from 'ng2-ckeditor';

imports: [
  CKEditorModule
]

在index.html中引入js

<script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>

最后就是用到富文本编辑器的标签:

<ckeditor [(ngModel)]="ckeditorContent" debounce="500"  [config]="config">
</ckeditor>

输入的内容：<br> {{ ckeditorContent }}

ts:

  ckeditorContent = '';

config = {
    filebrowserBrowseUrl: '&&&&&',
    filebrowserUploadUrl: '&&&'
  };

欢迎加入我的Angular4交流QQ群:560334140,大家互相学习互相进步!

个人微信公众号,欢迎大家关注下,支持下,谢谢!

微信公众号名称:U世界的V梦想

二维码:

关注