angular7中ngx-quill富文本编辑器的使用

朴灿烈づ我的快乐病毒、 2022-01-30 02:51 424阅读 0赞

#### 在angular中使用ngx-quill ####

在angular中使用ngx-quill富文本编辑器的入坑指南。

1.  如果在ng2<=>ng5版本中，根据网上的教程是没有问题的。
2.  如果在>=ng5版本，目前项目在ng7项目中使用ngx-quill出现错误。  
    ![在这里插入图片描述][20190517182700579.png]在ng6及以上的版本中使用ngx-quill，会出现如上错误，不能够解决quill,那是因为在ng6以上的版本中使用ngx-quill需要安装quill。

#### 正确使用姿势 ####

1.  安装依赖

// 安装 quill
    	npm install quill -save
    
    	// 安装 ngx-quill
    	npm install ngx-quill -save

1.  在对应的模块中引入QuillModule模块  
    例如：在app.module.ts中引入

import { QuillModule } from 'ngx-quill';
    	imports: [
    	    QuillModule
      	]

1.  在index.html中引入css

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

1.  使用

<quill-editor></quill-editor>

1.  效果图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[20190517182700579.png]: /images/20220130/86070fe0491f46ffa99b0d3a830ae5bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220130/18351a8cf76d46a39f75bbf1b40a7c26.png

发表评论取消回复

表情：

评论列表（有 0 条评论，424人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui中使用wangEditor富文本编辑器

<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min

た入场券/ 2022年12月21日 00:59/ 0 赞/ 264 阅读

相关富文本编辑器Quill的使用

需求来源于产品和UI 快速开始  <link href="https://cdn.quilljs.

今天药忘吃喽~/ 2022年10月07日 13:55/ 0 赞/ 200 阅读

相关 vue中使用富文本编辑器

> 前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器先敬上官网：[http://www.wangeditor.c

柔情只为你懂/ 2022年09月12日 07:56/ 0 赞/ 301 阅读

相关富文本编辑器的使用

富文本编辑器在系统中经常会用到，具体用法如下：一、引入css，js： <linkhref="/js/kindeditor-4.1.10/themes/defa

比眉伴天荒/ 2022年06月03日 03:42/ 0 赞/ 294 阅读

相关富文本编辑器NicEdit的使用

调用nicEdit.js和一张nicEdit所需要的icon图 <script type="text/javascript" src="/js/nicEdit.js"

你的名字/ 2022年05月21日 00:19/ 0 赞/ 308 阅读

相关 kindeditor富文本编辑器的使用

百度下载kindeditor 解压放至项目中可以删除一些不必要的文件夹然后在页面引入 <link href="kindeditor-4.1.10/themes/

深藏阁楼爱情的钟/ 2022年05月17日 09:40/ 0 赞/ 379 阅读

相关富文本编辑器

（1）[UEditor][] （2）[kindEditor][] （3）[summernote][] 另本篇文章有更多富文本编辑器推荐： [https://www

你的名字/ 2022年03月19日 05:52/ 0 赞/ 451 阅读

相关 angular7中ngx-quill富文本编辑器的使用

在angular中使用ngx-quill 在angular中使用ngx-quill富文本编辑器的入坑指南。 1. 如果在ng2<=>ng5版本中，根据网上的教程是没有

朴灿烈づ我的快乐病毒、/ 2022年01月30日 02:51/ 0 赞/ 425 阅读

相关富文本编辑器的使用

[https://cloud.tencent.com/developer/article/1141421][https_cloud.tencent.com_developer_

约定不等于承诺〃/ 2021年12月14日 12:13/ 0 赞/ 490 阅读

相关 Vue中使用wangEditor富文本编辑器

> 本文章向大家介绍Vue中使用wangEditor富文本编辑器，主要包括Vue中使用wangEditor富文本编辑器使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定

曾经终败给现在/ 2021年07月26日 11:38/ 0 赞/ 697 阅读