00:01
来,那下一个呢,我们来去继续的往下做啊,往下做下一个我们来做什么呢?做这一个。副文本编辑器。就是来用来去编辑商品什么详情的。这能听懂吧,好,我们来去做一把这个商品,详情是可以进行,嗯,就是副文本编辑的,所说副文本就是有一定的可以去生成一些网页格式的,一定样式效果的一些。文本啊,甚至可以生成一些链接都可以,都没有任何关系,甚至包含图片都可以生成啊,就这里面是一些啊,可以进行特定格式处理的一些东西。好,来。我们来做一下这个呢,也单独写成一个主页。这个也单独写成一个组件,我们取取个名字先。这是一个副文本编辑器,有一个统一的单词叫rich t的edit。
01:09
就是副文本编辑。能不能看到啊好,我们是小写的是吧,我们都是文件名不都小写的吗。来就是锐太,是的什么?里面写他写的是吧。啊,是用来指定什么啊商品详情的啊,副文本编辑吧。主页没问题是吧,好,那里面怎么写的,这个副本编辑你自己搞,那肯定是不太现实的,这个得用一些第三方的库,对吧,这里面会用到一个库来说一下。
02:12
用到一个库叫这个。React draft,好,后面这个单词。第一次看到我都蒙圈了。我感觉。嗯,WY SI wyg。我做的想啥呢?他在后来我搜索了一下,发现它是有意义的,它是很好几个单词组成的。啊,它是什么呢?啊,你所看到的就是啊,你所得到的。嗯,叫what?You see。Is what you get?这能听。是吧,啊。
03:02
OK,你所看到的,你将来你就马上能得到啊。好。来。这个文它还会用到相关的另外一个另外一个库啊,等会再说先看它。And you see。看C好了这一个啊,当然我们的,我们首先是不是要去下载这些包啊。能听懂不把包是不是下载下来,当然我们前面是不是已经下载过啊好啦,没问题,那下面我要去搜索一下这个包。因为我知道这个会后,我肯定是没法知道怎么用的,我得去看文档啊,对不对,看别人写的例子。来找一找。找了,去哪找了,关键是。是不是要去github上面去找一找啊。找一下啊。
04:01
哎,这是第一个3.3K应该可以吧。还可以,是不是好?打开。哎,这里面呢,就会有一个说明,诶,他还有一个专门的。一个官方的一个一个地地址,这里面也说有个效果在给你演示,实际上是一个动画啊,一个GIF动画在演示,这里面说它的一些特点等等啊,告诉你怎么样去安装,嗯,怎么样去简单的进行什么。使用对吧。诶。这里面是不是就是他提供了这个官方文档的一个地址啊,这里面是不是应该有DEMO呀。是吧,还有什么。文档吧,诶这个就是这点是你就可以进行操作啊,可以进行特定的操作,其实应该是都是可以的,对不对。
05:00
啊都可以没任何问题啊,都可以,不然可以,甚至可以去上传图片都可以啊,只是他的这个不知道能不能上传成功。因为这个肯定不是指定我的那个后台接口吧,啊,肯定他的一个地址啊,这个我测试掉好像不太行啊,功能应该是可以的,只是它的接口可能已经坏了啊。好。那。哎,这一上来是不就有一个例子。这个例子跟我们长这个是不是非常像的呀?那还想啥呢?啊,那就把先把这个例子拿过来呀,你说是吧,拿过来再说呀,看下C,嗯。拿跟昨天一样,你拿过来你要看不懂,你要你也最终实现不了我们最终的那个效果啊,它是需要你去看懂。
06:00
来,先给他什么exportport暴露出去,我们刚才这个名字不叫这个。叫什么来着?文本编记,Reach。很懂吧,这个不要,这个他多写了一点东西。好,来。我们来看一看啊,现在我我里面代我先不看,我直接先用上,看看是个什么样的效果,是不是来回到我们的爱的,我需要给他进行什么。引路吧。这没什么难度,引入就引入呗,Import reach text什么edit是吧?嗯,点斜杠。有吧,那接着我们需要去把它。给他写他的标签嘛。
07:05
现在我们写的是一个CE的一个标签,来把这个标签写上去,没吧,没问题,好了,那我们就来看。刚才说什么说react已经什么声明过了,什么意思呢?说白了就在说你进行了什么呢?重复的声明。不是这个这个。我们前面是不是已经有了呀。能看到吧,可以把它什么去掉一个是不是就可以。嗯,好,我们再来看一下。是不是有问题啊。是啊,你看看着看的好好的,我一怎么搞过来就不行了。
08:01
那是因为他的这个代码没写太好,写的有点小问题,需要去引入一个东西啊,引入一个样式,内置的样式他没引。嗯。引入哪个里面的呢?就是我刚才不是下载了这个这个包吗。能听到不这个包的下面。有一个Dis,它下面呢,有专门的一个什么呢。CSS。能懂吧,好,那接着你看。好多了吧,但是现在的问题就是我的宽度是不是有点太窄了?原因是什么?我那个三格系统,刚才我指定的,我原本在里面指定那个宽度是不八呀。这个不好吧。对于我们前面的下来说还可以是不是,但对于我的这一个。
09:01
我的这个商品详情的来说是不是。太瘦,局限了。那我是不是得指定自己的?哦,我在这里写可以吧,可以吧,可以需要有两个属性来指定啊,大家注意。来,我拿着拿着它。需要指定两个属性。我先我先复制在这里,首先第一个属性是这个。它的值是一个什么对象啊,这个对象这里指定用它这个不动。重点在于什么?右边的这个。能听到吧,那右边的这个我指定为多少呢。嗯,一共24是吧,我这边20。可以吧,还留两个别完全充满右边了,OK,不?有没有看到?能看懂,好,来,我们来看一看有没有变化。
10:01
有吗?有吧,有好没有问题,那没有问题之后,下面这一个下面这个输入框区吧。现在很难受,我看不出来哪里哪个部分是输入框。能听到不,那咋办呢?大家看看我这个地方是这么做的,看出来吧。能懂吧,这个时候得加点什么。什么样式给这个,给他的这个。给他的这个区域是不是加了20对吧。好加个边框,那这个时候就要说一个事情了啊,你看一下这个主页。他最终就写了一个组件,叫什么呢?其实下面这个效果,我暂时其实是不需要的。也就是说它会实时的根据你输入的东西啊,生成一个效果,大家注意观察,看到吗?我们最终是不是要去需要这个标签结构来存到我的商品里面去。
11:07
我的商品里面就有一个属性叫detail。而特的值是一个标签格式的字符串,听懂了吧?啊,而我一定一旦去加什么样式,那这个地方。大家看它是不是就生成一些对应的标签记录。这个效果我不需要,但这个功能到时候我是需要的,我先呢把这个给他注释一把啊。那如果一旦注射了,我这个div还需要吗?不需要了吧。能听到不?我这个D肯定不需要,我我现在只是需要有一个什么。点也可以了。啊,当然这个地方他不让我这么去,不让我这么去做啊,把它干掉干掉,到时候我们再来拿这个代码都行。也就是说,我们现在只需要一个,就是I。这个编辑器,当然这个编辑器它是分为两个部分,其实一个部分是它的这个上面的工具栏部分,对不对,一个部分是它下面的什么。
12:08
输入框部分,但是现在下面这个输入框,你根本就看不出来是不是。能看到吧,那我怎么样给它加样式呢?这个地方有两种加样式的方式,一种。是先指定类名,在这个类名里面。去定义样式。听懂了吧,还一种方式。来看一下文档,你就知道这东西是看文档看出来的。右边的这个呢,是文档部分,这个文档部分呢,其实就会去再说这里面还可以通过什么呢,大家看到上面的部分是通过特定的内里。来句可以写样式下面这个了,也就说白了,我一写大家也懂。我不通过类名,我就直接通过样写得了。
13:00
这里面就是样子。而且你看这个名字,你就知道这个样式是可以加在谁身上。是不是加到下面那个变器部分了。这能听懂不啊,OK,那加个编辑我得加什么呀。包的好,那我就加一个包呗,可以不?等于多少呢?这个时候就说得写个串的值是一个项数吧。Solid。还有什么黑色的了是吧?可以吗?来,我们来看一下。但是这个高度是不是有点太难受啊?能听到吧。嗯,来,来一个高度。哎,我要问大家,这个he和mean有没有差别?有有没有,如果我用hit,我的高度还能变吗?不能变了,那我最好指定为什么好一点。
14:11
啊,Me hit是吧?来我指定位200看看什么意思啊。大家注意观察一下,就能知道默认是这么一个高度吧,当我是不是有可能是不是增加高度。这能听懂不?但是如果我指定为hate,那有个问什么问题?那就指定死了,后面我再整它就不会变高了,当然这样你也不说不不好。主要是要区别这个事情能懂不能懂好。就是这样一个事情,还有一个事情。还有个就是它的输入,你看靠着挨着这个左边的对吧,我想啊,我想不挨着想隔开一点。
15:00
那怎么做?写M好呀,我们一起写M还有什么?是不是加一个盆啊,Penny left就可以了。对不啊,比如说10。其实有点距离就行是吧。这能看到吧,嗯,好,就这一个事情。说到这个高,最小高度,你会发现现在我们的界面有点小问题。我们本身应该有个他的。你看到了吧。但现在呢,没了。嗯。看到了吧,没了。为什么呢?我不知道大家有没有有没有去注意过。问题就在这里。问题就在这里,我们指定的是什么?高度是100%,而比较好的方式应该指定,为什么呢?
16:14
了吗?啊,你要指定高的100%就直接啊就把它覆盖掉了。啊,把它覆盖掉了,而我们现在指定厉害了,它就把它撑开了,把它撑开就往下往下顶,最后是不是看到了我们这个底部。最好还是能看到你们好一点吧,因为毕竟是我们的一个组成部分嘛,你不能因为这个高度大了,你就让他看不见,这样不太好啊好。这样我们就可以啊进行编辑输入了,下面的问题就是我们需要来看一下它。到底是怎么做到的?这里面会用到不少的语法啊,里面的语法呢,说实话啊,你想去看去1.1看内部实现,这是很费劲的,你只要看懂代码就行。
17:02
啊,这里面有一个它设计了一个状态叫ID的什么呢?State啊,这是它很关键的一个东西,大家看一下。非常非常关键的一个东西。就是它的显示,就是根据来去做显示的。他一上来相当于创建一个空的是吗。Create em什么意思?创建了一个空的啊,数据状态对象啊,编辑一下嘛,相当于。没有内容的。啊,编辑一下吧。好,这是这一个。接着往下往下啊,而这一个这个这个编辑对象需要去传给这个编辑器的组件,是不是需要去传给他,这个没什么,下面这个。
18:01
这一个你说这个应该看名字,首先得知道他肯定这在干个什么事。这在干了什么事?绑定监听对不对,绑定监听那。监听就得知道它什么时候会掉。能听到不,他什么时候掉,大家觉得他什么时候会掉啊,对这东西你只要能想想到就已经。成功一大半了。你看我来输入一下,大家看的能看到不输入过程中它是不是实时的去。回家是吧,啊好,没问题。接着每一次回调啊,大家看到这是输入过程中,注意输入过程中实时的什么回调对不对,传入的是不是最新的。
19:04
I state。这个要干嘛去了?要去重新什么,晒一下状态,要存储最新的状态怎么?它存储最新的状态值。现在写的代码就这么多。大家其实刚才看到了另外一个东西是什么。刚才不看到另外一个玩意吗?就这一个。最后有一个这个。这个功能我们其实是啊,暂时啊不用显示在界面上面,但是这个东西还是有可能需要的,如果这么做的话,那我就必须在外面包一个什么div啊,加上他是个什么意思,大家看到他这里在干什么事啊。啊,他是在去做一个事情叫drive to h天就得到一个什么呢?H天马数据。也就是说,嗯,来你看一下这种效果,你就大概就有这个感觉。
20:07
默认是生成这样一个标签结构。接着我这书看到了吗?我输入的,我是以这种副文本的方式去输的,对不对,但是最终是不是产生的是我的这个标签格式吧,在上面看到标签了吗。没有,这是他背后对应的标签吧,那这一个怎么样得到那个对应的标签呢?是不是需要执行这个代码。就套了好几层啊。这个里面,那最终的结果,你至少你得知道是根据谁来去生成那个标签结果。是不是根据这个d state。能听懂吗?是根据这个state来去获取最新的内容了。而这个内容最终。是要提供给谁的,大家说这个标签格式的字符串。
21:05
需要提供给谁呀?不是在这显示,不是在这显示,你要知道我们最终这一个组件是为我们的爱的update做服务的吧。是吧,为他做不,那也就是说最终我点击提交的时候,是不是要去保存我输入的数据。保存我输入哪个数据啊。大家需要去知道我们最终存储到那个数据库里面的那个商品详情是个什么格式的数据,是一个标签格式的字符串,其实存的就是谁呀。就这个下面这个内容。能听到吗?那这个时候就有一个事情啊,有一个事情什么事情呢?我们的子组件啊,我的父子件如何能够去得到那个数据呢。我是他每一次改变呢,就给我了,还是我到了一定时间我去拿呀。
22:06
你说去拿,我是去点,有两种做法,有两种实现方式,一种方式是我点击提交按钮去主动去拿。听懂了吧,另外的方式。是我这边啊,不是可以产生一个标签格式的字符串吗。那我一旦发生变化,那我每次都会将最新的那个标签格式的计算传给副组件。能听到不?那样的话,复制卷是不是不需要拿了?你说哪个效率高啊?那自己去拿,效率明显要高。因为我们自己去拿的话,只要拿几次啊一次,那如果说他是一旦改变就交给我的话,他要。也就是说我输入一个,输个A,他要给我交一次吧,输入一个B,他是不是又交给我一次,输了个C,他是不是又要交一次。
23:07
他是不是要实时的给我去传递数据,传给副组件。对不,这种方式咱以前是做过的,就是这种方式比较适合于什么呢?比如说我们现在有一个组件。成了一个数组,还大家回想一下我们前面说过一个comments的一个例子,还记得不?评论列表。评论列表管理,咱做学基础的时候,就做了一个评论列表管理。忘了。就是一个左边这个添加输入谁评论,评论内容是多少。啊,右侧显示评论的列表。是吧?那最终我们是不是要管理一个状态叫comments?是放在整个APP副组件里面的吧。那我们大家想看,我们再去这个每一项是不是都有一个删除来着,删除某一个平台对不对,那这个时候是不是要去更新副组件的数据。
24:08
对不对,那更新的时候是不是右下标啊。对吧,那当时我们是传一个函数过去,让他去调用的。这个区别在哪里?区别就在于它的事件触发是在子组件触发的,那我这个事件触发实际上在什么时候出发,我什么时候才需要,是不是在父组件里面点击的。啊,此时比较适合的方式是我主动去什么呢,去取。取的方式。就一次就够。对吧,只是说你要提供一个什么。你是不得提供一个方法,比如说叫get detail来给我返回你当前的文本吧?你老婆,你当前文本是多少?我怎么知道呢?
25:04
就这个吧。对不对。这能听懂不,那这个我就不需要了吧。本来这个功能是这个界面效果是不需要的,对不对,只是我是要利用他的这个代码来返回我输入的数据对应的标签格式的文本对不对。H天马格式的什么,我们也就字符串了。那我的这个还是改为它来,因为有它就够了。那个不需要是不是。这什么看到?那也就是说现在其实啊。这说的是什么?I state没有指令,是因为我没有去取它是哪个里面的this点。State里面的,因为在里面不已经取过了吗。
26:06
好,来看一下这个时候啊,这个时候啊,我们这里面输入啊,输入之后我怎么在点击提交按钮的时候去得到这个数据呢。还是我们昨天的做法,也就是说现在父组件是不是要叫子组件的方法。So easy的思啊,怎么做啊?来,回到我们的副主键。是不是if啊,If首先我们第一步是干嘛。创建一个容器,是不是接着另一个名字存起来,我们就叫它可以不?可以吧,名字签名字意就行,好,接着将这个容器对象交给对应的组件标签。哪个呢,不就他吗。哎,这个地方通过哪个属性交了if属性。
27:02
是吧,那接着当我需要找到它的时候,就可以通过this点去找它来。我们这里面应该是有一个有一个上面的对吧。一个萨米好是前面我是不是获取过I'm GS。现在我们可以获取另外一个了,叫什么detail。能听懂不?This点它点什么,它点我们是不是有一个方法叫点什么。Detail。诶,这里少了个R吧。能看到吧,好,那我可以把这个给他什么。是输出。这能听懂不好,那这样的话我们来看一看。看一下啊,看一下好。来注意啊,我们来去关注一下先,这里面要输点输点信息才行啊,输点信息才行啊,随便输一个。
28:09
好来我们那个不管了,输他啊,我有意的加点样式对吧。啊,我有意的加点样式啊,按理来说应该是有一定的标签结构的是吧,好接着我点击提交吧,看一下提交。来去看一下打印输出不就可以吗?有没有?有。是不是有啊。能不能看到。可以啊,没有什么问题。嗯,这是这个。那好了,但是有一个问题,还有一个功能问题。什么功能看好了,我一点添加吗。不一定,我可能点击的是什么修改。
29:02
什么意思?他原本的那个内容没有是吧。能听到不也就是说我的某一个商品,某一个商品来。好了啊,我去获取商品分啊,商品分页列表,随便获取个商品啊。给列表大家看一下,它是不是都有一个低的。它的detail是不是标签格式,HTML格式的字符串?我要给他,是不是用副文本编辑器的形式给他展现出来,我原就是原样展示行吗?我就这么展示行吗?不行,我得是不是让这一个大家看呢。得展现在哪个里面呢?修改得展现在这个副本编辑器里面吧。能听到不?哎,这个时候,这个时候得要做一件事情。
30:01
做些什么事了?回到我们这个编译器,它现在的初始状态是不是?创建了一个没有内容的一个空的。编辑对象。这样不行,这样的话我不可能有初始显示,应该创建一个什么呢。代呢?听懂了吧,嗯。要创新的,那当然我需要把那个内容传过来呀。要不要啊?大家看着我们这边,我们这边。要不要把这个detail数据给他传过来?需要的吧,需要的那我是不是得长detail,那detail是不是提前得什么。是不是取出来了,那取出来大家看一下我们去哪取了。我们是不是有一个产品对象,是不是产品里面有什么来着。是不是有低配啊?
31:01
这能听到不好,那此时我的这个组件是不是要去接收属性。什么名字叫什么?什么类型?这个标签格式的什么类型?对象啊。字符串嘛,标签格式。不是个文本吗?能看到它是必须的吗?不是,因为我有可能是添加是不是,所以有可能没传大家注意啊好,那这个时候需要去指定一下。啊,引入是不是。好,把这些封号都干掉。嗯。啊,这里面呢,这所有的封号都给它去掉。
32:00
啊,因为我都没写,所以就把它去掉啊好。问题来了,我接收,如果我接受到了,那我的这个写法是不是就不对了?听懂不,我这个写法就不对,你说有可能创建空的,也可能创建一个带内的。那这个我怎么创建一个带呢?你要没有例子,那实际上我也很难做,那我就只。如果他就只能看到这个东西,那我下面可能也做不下去,我只能去百度别人写的代码。嗯,其实呢,这个地方它有很多好一些例子,好一些各种方面例子我就不一个看了,嗯。看最后一个。最后一个,最后一个好像还不是这边的这一个,这边的这一个是用来去说明图片怎么上传的啊,图片怎么的,来我们来说的是其实是这里面有很多这不是他的相关的API吗。啊,翻到最后当老师,你怎么知道最后有了那因为我翻过。
33:05
所以才知道这个有,那如果你没有翻过,那你可能就要大致的整体看一看,找一找,对吧,这个地方就有ST相关的。这个时候需要去下载一个新的包。这GS two htm啊这样一个包,那这个包里面来看一下啊,看一个事情,它这里面就在说如何根据一个已有的标签结构。来去做初始显示。那我就简单了,那我就直接把它干嘛呢。复制过来。这个地方啊,就是根据原本的,大家注意啊。根据原本的这样的方式啊,原本有一个我手里面有一个标签格式的字符串,我想显示到我们的里面去,该怎么做的问题。
34:02
啊。那这个时候我们的这一个值是多少啊。不能写死啊。是谁呀?是不是this.props点吗?Detail,但是一定有值吗?不一定啊,来一步,如果这个H下面有值。那我是不是按照这法这个做法去做。清楚不好,那而这个做法呢,它是先创建一个生成,根据这个ST生成一个它内部的一个什么内容的块啊,而且他判断这个快是创建产生的,它为什么会有一个判断呢?是因为你的格式法不一定对。你要格式不正确,它这个创建就会失败。就不会产生正常对象,当然我们这个安全来说,如果有的话应该是对的,因为我们是通过它生成的一个串啊,你要简单的做,你就可以直接给它去掉,都没关系。
35:06
没有任何影响。啊好,接着他又做了,其实这个生成啊。用到的语法还挺多的,这个里面你靠字记我也没记住啊,我也没没准备去记。是要去根据他现有代码怎么样去生成我们想要的效果啊,想要的效果这里面还用到一个我们还没有引入的一个东西,实际上在这个里面我记得没错的话。嗯,就在这里啊,没有问题,好没引入啊,接着是我们这个地方啊,最终就产生了一个什么呢?I state,那这个时候我们状态里面艾还是个空的吗。不是的,而是一步一步根据它的逻辑是不是根据我的这个H平方格式算来生成的,那L是。那是不是应该用它呀。
36:05
也就写一个this.s state等于它对不对,这是不是创建一个空的编辑对象?而这个时候啊,如果它有值,是不是根据我的HM格式是不算。创建一个对应的啊编辑对象,就包含这个内容的编辑对象。啊,这些语法都不用去记啊,它是固定的,好来我们现在来看一下,看看它行不行啊,按理来说应该是可以的。各位。可以了吧,当然我可不可以修改啊,可以,我一修改我的内容是不是发生了变化。我内容发生量,我对应的文本是不是也变了?接着我一点提交就能够去干嘛。嗯,去提交,当然我还没真正做提交是不是。
37:01
这两没领到。嗯,就这样一个事情。那当然,现在我应该已经收集到数据了,是吧?OK吧,OK,嗯,就这么回事。好。
我来说两句