使用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. IDLE清屏扩展

    新建ClearWindows.py,复制以下代码: class ClearWindow: menudefs = [ ('options', [None, ('Clear Shell Window', ...

  2. ElasticSearch 6.2 Mapping参数说明及text类型字段聚合查询配置

    背景: 由于本人使用的是6.0以上的版本es,在使用发现很多中文博客对于mapping参数的说明已过时.ES6.0以后有很多参数变化. 现我根据官网总结mapping最新的参数,希望能对大家有用处. ...

  3. scrapy框架使用笔记

    目前网上有很多关于scrapy的文章,这里我主要介绍一下我在开发中遇到问题及一些技巧: 1,以登录状态去爬取(带cookie) -安装内容: brew install phantomjs (MAC上) ...

  4. Confluence 6 针对合并完全失败的内容重新运行合并

    如果在系统合并的时候有任何内容的合并失败的话,一个 Confluence 的管理员可以再次重新启动内容合并(请参考前面页面的内容).只有内容还是使用 wiki 格式的才会被合并,因此重新合并所需要的时 ...

  5. 使用querybuilder做忽略大小写查询的例子

    自定义Predicate: import com.day.cq.search.Predicate; import com.day.cq.search.eval.AbstractPredicateEva ...

  6. winfrom导出DataGridView为Excel方法

    声明:此方法需要电脑安装Excel软件 需要类库:Microsoft.Office.Interop.Excel.dll 可百度自行下载 方法代码: /// <summary> /// 导出 ...

  7. CSS自定义多个字体引用

    在 HTML 中,提供给我们的默认字体有很多,但因为在电脑上安装的字体有限,所以很多时候不能呈现出和设计稿上一样的效果,这时候我们就需要使用 css3 提供的 @font-face 来实现个性化字体了 ...

  8. Envoy 源码分析--network

    目录 Envoy 源码分析--network address Instance DNS cidr socket Option Socket ListenSocket ConnectionSocket ...

  9. 使用jsdelivr访问github资源

    一.新建github库并使用git上传 首先访问https://github.com 新建自己的库 之后使用 git 上传到github 下载git : https://git-for-windows ...

  10. javascript高级程序设计第3版——第1Java章 DOM扩展

    虽然DOM 为与XML 及HTML 文档交互制定了一系列核心API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中有很多原来是浏览器专有的,但后来成为了事实标准,于是其他浏览器也都提供了相同的实 ...