课堂课题：
如何使用富文本编辑器？
关联任务：
任务二
直播时间：
2020-08-15 17:00:00
课堂内容：
视频链接：
PPT链接：
提交按钮：
小课堂内容格式
标题：
【修真院xx（职业）小课堂】课题名称
开场语：
大家好，我是IT修真院XX分院第X期的学员XX，一枚正直纯洁善良的XX程序员，今天给大家分享一下，修真院官网XX（职业）任务X，深度思考中的知识点——XXX
（1）背景介绍：
背景介绍的时候，尽可能的要宽广，讲清楚来龙去脉，讲清楚为什么会需要这个技术。
（2）知识剖析：
讲知识点的时候，尽可能的成体系，学会成体系的去给别人介绍知识。现在很多做的都是零散的，没有分类。
（3）常见问题：
最少列出1个常见问题。
（4）解决方案：
写清楚常见问题的解决方案。
（5）编码实战：
尽可能的去寻找在真实项目中在用的。如果你能找到某个网站在用你说的知识点，这是最好的。学以致用，否则当成练习题就没有意义了。多准备一些demo，讲解过程中将知识点和demo结合，便于大家理解所讲解的知识点。
（6）拓展思考：
知识点之外的拓展思考，由分享人进行讲解，这些东西就是所谓的深度，也是一个人技术水准高低比较的表现。
（7）参考文献：
引入参加文献的时候，在引用的句子后面加上序号【1】。参考文献中列出详细来源。不要去抄别人的东西，这是一个基本的态度。
（8）更多讨论：
Q1：提问人：问题？
A1：回答人（可以是分享人，也可以是其他学员）：回答
Q2：提问人：问题？
A2：回答人（可以是分享人，也可以是其他学员）：回答
Q3：提问人：问题？
A3：回答人（可以是分享人，也可以是其他学员）：回答
（9）鸣谢：
感谢XX、XX师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
如何使用富文本编辑器？
辅导师兄 [真传弟子]JS-张林骞
标题：
【修真院web小课堂】如何使用富文本编辑器？
开场语：
大家好，我是IT修真院XX分院第X期的学员谢俊凯，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网js任务10，深度思考中的知识点——如何使用富文本编辑器
（1）背景介绍：
在做Web应用时，经常会进行富文本编辑，富文本编辑器可以编辑各式各样的样式，上传图片，视频，添加表情包emoji等。
比起普通文本，扩展了各式各样的功能。如同名称，是一个功能丰富的文本编辑器。
（2）知识剖析：
wangEditor，国人开发的，开发者原职业是个产品经理，对于用户需求的了解比较透彻。轻巧，页面简洁，易上手都是他的优点。功能满足我们任务与复盘项目中对于编辑器的需求。
作者14年创建该编辑器，18年更新完3.0版本后就停止更新了，但是近期官网又推出了未来会继续更新的说明，所以比较值得关注。对于任务过程中的使用也比较友好，毕竟都是中文文档。
开始使用前的安装--按照官方文档按照就行，在项目里一般使用npm按照，这里主要讲一下在框架里的应用
就以vue进行举例，首先根据官方文档npm安装后，先引入，然后在方法里面配置上传图片的请求链接，请求头，设置文件大小等。然后根据文档配置下菜单，加入上传的钩子事件，根据个人需求进行配置，最后使用this.editor.create()创建好编辑器，然后可以选择把编辑器菜单栏和文本框分离出来
<div class="editor">
<div ref="toolbar" class="toolbar">
</div>
<div ref="editor" class="text">
</div>
</div>
class方面就根据个人需求进行设置就好，设置min-height在文本框的时候有个坑，你扩展文本框的时候，他会定在那。内容超出框外。
（3）常见问题：
如何把富文本的内容渲染到页面？怎么修改富文本内容的class？
（4）解决方案：
在js中有inner-html进行渲染，vue里使用v-html进行渲染，正常取得服务器中返回的富文本内容使用这种方式就能展现富文本的内容了
（5）编码实战：
在vue组件化
（6）拓展思考：
（7）参考文献：
百度
（8）更多讨论：
（9）鸣谢：
感谢XX、XX师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
请您登录 后进行评论
