发表于: 2020-03-19 23:05:10

1 1291


今天完成的事

1,解决安装的ngx-quill富文本编辑器无法使用的问题;

一开始认为是安装的quill版本不对,随后又找了许多教程重新安装,但是效果并不理想;紧接着分析控制台输出的错误,搜索文章排查错误:

(1)首先出现的错误:

多次搜索判断确定是某项配置错误的原因,随后又仔细查找了一下官网以及在StackOverflow上的提问回答时,确定是依赖注入不正确;

错误的:

修正后:

然后刷新页面,错误消失;

(2)随后是的quill编辑器样式表CDN加载失败;

找了许多文章分析连接超时的原因,林林总总尝试了下,但是依旧没有效果;随后又找了许多文章,最后找到一个:

quill编辑器的引导文档:

https://quilljs.com/docs/download/

找到了其中既可以通过CDN加载样式,也可以下载样式表源码,克隆github仓库;然后去下载了quill编辑器需要的默认样式表,然后放入项目文件中使用,随后刷新页面,富文本编辑器加载成功;

明天的计划

1,为编辑页面添加表单验证,提高数据质量;

2,完善添加页面逻辑;

遇到的问题

  已解决

收获

1,再此,做一个富文本编辑器安装使用简要步骤:

(1)npm安装ngx-quill

   安装过程中可能会出现依赖安装的警告,按照警告的内容安装需要的依赖即可

(2)按照图片中的第二步,将quill注入到根模块中,不过需要注意几点,如果只有一个根模块app.module.ts,按照步骤注入即可;但是因为页面多的原因,本任务项目使用了两个模块;所以在注入前,首先确定需要使用quill编辑器的组件在那个模块中被注入了;比如:

我在admin.module.ts中声明了需要使用编辑器的页面新增组件

然后将编辑器注入到该组件所在的模块(当然,也可以在组件中直接注入编辑器,但适用于页面比较单一时使用)

(3)在index.html中引入编辑器默认样式表:

但是因为加载的不稳定,自己选择直接下载该样式表源码压缩包解压使用;

https://github.com/quilljs/quill/releases/tag/v1.3.6

(4)根据需要添加相应的处理逻辑;


返回列表 返回列表
评论

    分享到