angular4 富文本编辑器
使用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 富文本编辑器的更多相关文章
- 富文本编辑器Simditor的简易使用
最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...
- 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范
昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- PHP Ueditor 富文本编辑器
2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...
- JavaScript 富文本编辑器
WEB项目中使用UEditor(富文本编辑器) UEditor - 完整示例 http://ueditor.baidu.com/website/onlinedemo.html UEditor注意事项: ...
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
- 富文本编辑器kindeditor配置
<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...
- web开发实战--弹出式富文本编辑器的实现思路和踩过的坑
前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...
- 富文本编辑器防止xss注入javascript版
富文本编辑器:ueditor 其实富文本编辑器已经有防止xss注入功能,但是你服务端程序在接收的时候在做一次转义,否则有可能然后前端验证直接提交数据导致被xss攻击. 为了节省后端程序开销则在前端 显 ...
随机推荐
- Jmeter 获取系统时间,和对系统时间进行增减时间
今天做了一个测试,比如发送短信验证码之后的, 验证90s被验证码有效的问题 那如何测试开发的代码,判断了90s内有效呢1. 验证码获取时间距离现在89秒,验证通过2. 验证码获取时间距离现在90秒,验 ...
- react项目中实现悬浮(hover)在按钮上时在旁边显示提示
<i className={classNames({ 'device-icon': true, 'camera-icon': true, 'camera-icon-hover-show-intr ...
- 在单机Docker上安装 Traefik 反向代理-负载均衡器
一.创建Traefik和容器应用的连接网络 sudo docker network create traefik-net 二.下载Traefik样本配置文件wget https://raw.githu ...
- 两两交换链表中的节点(java实现)
题目: 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3->4, 你应该返回 ...
- python 学习笔记 2 ----> dive into python 3
Python Shell idle的使用 >>> >>>help() ----> help> 可以在help这个工具中查找Python内置函数的文档等等 ...
- Java程序设计的第一次作业1
- 关于vue中this.attr代替this.data.attr访问的原理
请看如下例子: var obj = { name:"zhuwei", age:18 } function Person(data){ this.data = data; } var ...
- pip使用国内源
对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...
- Python —— 函数高级特性(切片、迭代、列表生成式、生成器、迭代器)
一.切片(Slice) 在很多编程语言中,针对字符串提供了很多截取函数(i.e. substring),目的就是对字符串切片.python中没有针对字符串的截取函数,需要通过“切片”来完成. 取一个 ...
- 《CoderXiaoban团队》第一次作业:团队亮相
实验五 这个作业属于哪个课程 软件工程任教教师 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/10687492.html 团队名称 CoderXiao ...