使用quill富文本编辑器实现,angular项目中用到了ngx-quill插件。

quill的GitHub地址:https://github.com/quilljs/quill

ngx-quill的GitHub地址:https://github.com/KillerCodeMonkey/ngx-quill

ngx-quill适用于版本号在2以及以上的angular。

具体操作如下:

1、ngx-quill的安装

angular >= 5时ngx-quill的安装

npm install ngx-quill

angular < 5时

npm install ngx-quill@1.6.0

2、quill的配置

引入(ngx-quill的)QuillModule :
  import { QuillModule } from 'ngx-quill'
在你的NgModule中添加 QuillModule :

  @NgModule({
  imports: [
    ...,

    QuillModule
  ],
  ...
  })

在index.html中添加quill的样式 :

  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">

3、使用

在页面使用标签<quill-editor></quill-editor>进行使用,效果如下:

上图中的工具类是配置后的工具类,代码如下:

<quill-editor [modules]="config" [style]="{height: '200px'}" [(ngModel)]="data.content"></quill-editor>

config的内容如下:
{
toolbar: [
//['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
//[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
//[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
//[{ 'direction': 'rtl' }], // text direction //[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
//[{ 'header': [1, 2, 3, 4, 5, 6, false] }], //[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
//[{ 'font': [] }],
//[{ 'align': [] }], //['clean'], // remove formatting button ['link', 'image', 'video'] // link and image, video
]
};

-------------------------------------------------

2018-05-13 16:13:20

自定义工具栏

<quill-editor [style]="{height: '200px'}" [(ngModel)]="data.content" placeholder="在这里详细描述一个推荐原因,\n">
<div quill-editor-toolbar>
<span class="ql-formats">
<button type="button" class="ql-header" value=""></button>
<button type="button" class="ql-header" value=""></button>
<button type="button" class="ql-blockquote"></button>
<button type="button" class="ql-code-block ql-active"></button>
<button type="button" class="ql-list" value="ordered"></button>
</span>
<span class="ql-formats">
<button type="button" class="ql-link"></button>
<button type="button" style="outline:none">
<div class="upload_img">
<svg class="camera" viewBox="0 0 18 18"> <rect class="ql-stroke" height="" width="" x="" y=""></rect> <circle class="ql-fill" cx="" cy="" r=""></circle> <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg>
<input type="file" class="file_input" ng2FileSelect [uploader]="uploader2" />
</div>
</button>
</span>
<span class="ql-formats">
<p style="font-size: 9px;" *ngIf="uploader2?.queue.length > 0">图片已上传:{{ uploader2?.queue.length > ? uploader2?.queue[uploader2?.queue.length-]?.progress : }}%</p>
</span>
</div>
</quill-editor>

上传图片代码(使用了ng2-file-upload插件)

public uploader2: FileUploader;

this.uploader2 = new FileUploader({
url: this.URL
, method: "POST"
, itemAlias: "upfile"
, autoUpload: true
});
this.uploader2.onSuccessItem = function (item, response, status, headers) {
if(status == ){
let rsp = JSON.parse(response);
let img = '<img class="camera" src="'+"http://您的域名"+ rsp.url+'" alt="">';
that.data.content += img;
}
};

angular4 富文本编辑器的更多相关文章

  1. 富文本编辑器Simditor的简易使用

    最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...

  2. 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  3. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  4. PHP Ueditor 富文本编辑器

    2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...

  5. JavaScript 富文本编辑器

    WEB项目中使用UEditor(富文本编辑器) UEditor - 完整示例 http://ueditor.baidu.com/website/onlinedemo.html UEditor注意事项: ...

  6. MVC 使用 Ueditor富文本编辑器

    一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...

  7. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  8. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

  9. 富文本编辑器防止xss注入javascript版

    富文本编辑器:ueditor 其实富文本编辑器已经有防止xss注入功能,但是你服务端程序在接收的时候在做一次转义,否则有可能然后前端验证直接提交数据导致被xss攻击. 为了节省后端程序开销则在前端 显 ...

随机推荐

  1. Jmeter 获取系统时间,和对系统时间进行增减时间

    今天做了一个测试,比如发送短信验证码之后的, 验证90s被验证码有效的问题 那如何测试开发的代码,判断了90s内有效呢1. 验证码获取时间距离现在89秒,验证通过2. 验证码获取时间距离现在90秒,验 ...

  2. react项目中实现悬浮(hover)在按钮上时在旁边显示提示

    <i className={classNames({ 'device-icon': true, 'camera-icon': true, 'camera-icon-hover-show-intr ...

  3. 在单机Docker上安装 Traefik 反向代理-负载均衡器

    一.创建Traefik和容器应用的连接网络 sudo docker network create traefik-net 二.下载Traefik样本配置文件wget https://raw.githu ...

  4. 两两交换链表中的节点(java实现)

    题目: 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3->4, 你应该返回 ...

  5. python 学习笔记 2 ----> dive into python 3

    Python Shell idle的使用 >>> >>>help() ----> help> 可以在help这个工具中查找Python内置函数的文档等等 ...

  6. Java程序设计的第一次作业1

  7. 关于vue中this.attr代替this.data.attr访问的原理

    请看如下例子: var obj = { name:"zhuwei", age:18 } function Person(data){ this.data = data; } var ...

  8. pip使用国内源

    对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...

  9. Python —— 函数高级特性(切片、迭代、列表生成式、生成器、迭代器)

    一.切片(Slice) 在很多编程语言中,针对字符串提供了很多截取函数(i.e.  substring),目的就是对字符串切片.python中没有针对字符串的截取函数,需要通过“切片”来完成. 取一个 ...

  10. 《CoderXiaoban团队》第一次作业:团队亮相

    实验五 这个作业属于哪个课程 软件工程任教教师 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/10687492.html 团队名称 CoderXiao ...