00:00
大家好,这节课我们继续来。啊,处理这个编辑器啊,啊,上一节呢,虽然我们把这个验证处理完了,但是没来演示,那这个这节课来演示一下啊,不是这节课是现在先演示一下,那我们这节课的目的呢,还是处理它,那干什么呢,等会来说啊好。嗯,先把这个内容都填一填啊,包括这个商品的图片,如果不填的话,提交不了。嗯,那我们主要是看看我们提交之后。这个副文本提交的内容是什么?哎,可以看到一个details,我们内容是没问题的。对吧,好,嗯,那接下来说一说这节课要干啥。这节课我们来处理这个。副本编辑器,那处理什么呢,就是。图片的问题,嗯,我们来想一个问题,如果我们这边要上传一个图片。应该。怎么办?图片你要存到哪?
01:01
对吧,那我们当然肯定是想要把这个图片存储到这个oss,而且我们之前还封装好了这么一个上传的一个组件啊,可以传到这个呃,Oss。来,我们大胆的想一想,我们要干什么,哎,我们就是想要在这加个按钮啊,完了点击就选择文件上传之后就传到S,然后图片在这显示出来,对不对?先把我们的需求想出来,然后再想怎么做。其实像这个需求是很通用的,像这种。很通用的需求。一般的作者就是写这个编辑人啊,他就会去实现这个功能,哎,所以我们直接看手册嘛,对吧。手册呢,不太好找,那直接看例子,例子来找一找,往下看,嗯,诶这里边。已经有了对吧,有一个在这个表单中使用。好。嗯,这个他给我们,呃,这个其实是上节课我们做的一个内容啊,你看是呃把这个格式呃提交之前进行相互的一个转换,对吧,进行控制的校验,使用这个value the exampleity啊,这里也有说明啊,Value就是这个added system啊。
02:12
嗯,那我们要干什么要。做这个事情啊,这里可是集成这个它的上传组件,对不对,你看它这里就是集成NTD的一个上传组件,而且呃。我们的上传组件呢?在之前处理这块的时候,已经把oss集成到了这个上传组件,对不对,所以是这么一个顺序,我们把oss啊集成到了这个上传组件,那现在我们要把上传组件集成到这个里面对不对?所以看他这个例子就完全符合我们的需求,那接着看看到底怎么做的嘛,啊呃,仔细分析啊,一像这些一样的代码我们就不管它了啊,一样代码就不管它了,你真正看到不一样的地方是在哪呢?是在这啊,那这个我们就不定义了啊,不定义的话呢,这个就会有很多。
03:02
好吧,嗯。呃,主要看这它是不是多了这么一个东西对不对,然后这么一个东西,然后他给到了谁给的这个属性,对吧,这时候你再去组件属性里面看它到底干啥的啊,这么去啊,这这么去用大家然后。往上先看看他介绍自定义空间列表,看到了吧,也就可以让我们自己去定义这边显示一个空间的列表,那怎么怎么个自定义法呢?再去看它怎么去用呗,对不对,点开看看,告诉我们目前支持button,然后做不到啊,模态框等等这四种类型,然后还有例子告诉你怎么用,对吧?哎,实际上啊,不用那么麻烦,那我们反正要的就是这个效果嘛,来直接就复制他这块的内容就完了呗。我不建议大家整个直接就全部复制过来啊,因为我们现在已经。啊,做了一些调整了,加了一些这个表单验证啥的,那我们就需要啥复制啥呗。啊,那肯定是需要这个东西啊。那我们把它定义到这里吧。
04:05
嗯,定义到。看一下它是在哪定义的,在这个之前啊,也就是。这个render里面啊,那我们也放到这个render里面,在这来定义这个。放到这儿啊。把注释写一下啊,自定义空间。嗯,上传插入图片嘛,那我们现在制定的就是一个插入图片的一个功能嘛,好吧,那最终这个要给到谁呢?给到啊它的一个属性。看一下啊。哎,是怎么写的啊啊,这个控件我们不要。啊,还有这个其实不要不要就删掉吧。这两个。我先留着吧。
05:01
啊,虽然这个方法不用,那为什么我要留着这个它呢?其实你看我们从这里看到了,呃,这个转成H格式的内容对吧,那从上面呢,看到了就是啊把H他的内容转成就是说显示到编辑里面,嗯,所以先留着这个代码,我们后面做编辑有用,接着接着说,嗯,那这个。已经有了对吧,而且放到这里面,我们先来看效果啊。然后缺少这个upload,还有这个这两这两个东西啊。嗯,包括还有这个事件啊,这些其实。我都不打算要。我为什么要用?NTD里面的,那为什么不用我们自己封装好的阿里阿里云的这个oss的,是不是就类似于这个表单里面,那我为什么不直接用这个上传组件呢啊。来,我为什么不不直接这么用呢?啊,那这个没有的东西就先注释掉呗。
06:00
是不是,当然你看看我们这个是上传图片,当然也是接收这个图片类型啊。好,那你要用它是不是得引入啊,这里刚才粘贴的时候已经引入了。啊,那这个是没用的啊。来,我们来看看效果。嗯,等会儿等会儿。这边需要一个button,我看button引入了吗?啊引入了,Button也从N里面引入了。不按钮也用了。嗯,如果没有这些,像他给你标红没有引入的话,你都自己手动引入一下。看效果。诶是不是有这个效果了,嗯,来点击还谁也能选图片对不对,然后我们来选择一个图片,诶就发现这里还多一个这个。然后这个set不存在还报错,也就是。呃,我们的上传组件这里。找到我们封装的上传组件这里啊调这个方法,因为没有传嘛,他还报错。
07:01
好吧,啊。那接下来我们就把这些问题一个一个解决,一个一个解决。首先啊,再刷新一下,先解决什么问题呢?来看看啊。先解决样式的问题吧,啊,这个明显就就比较丑。对吧,还好还好,我们这个组件它是支持自己去,哎传这些东西的。啊,那我们不传。嗯,这个图标我想要,但是我不想要,这个八太丑了。哎,我就是插入图片把这个字改一改,要一个图标加一个插入图片来看看效果。不是特别好看啊。看到有点。来看,那我们看看它是怎么用的吧。嗯,它这里呢,用的是普通的button,然后加了这些样式啊。啊,那这些样式呢,可能是。就是这个编辑器里面的这个样式已经写好了,所以我们也直接啊,就复制这个吧。
08:03
啊啊不用,呃,NTD里面的这个。这个东西了。图标。啊,图标没有没有不要了,放个文字进来,就是插入图片,哎,就那么着。那接下来。再看看效果。哎,是不是就可以了啊。尽可能的用他官方提供的例子,因为他写的这些样式肯定是他整个UI的风格是是统一的啊,当然你自己写也行。嗯,接下来这个问题解决了,再来解决下一个问题,什么问题呢?就是我选择完图片之后。它下面会有一个下载列表,就上传的一个列表,进度表,其实我不想要这个东西。清楚了吧,啊,那我先把它给出来,大家应该知道什么东西了啊,那我为了让他不报错呢,我就呃点这个上传啊。其实意思大家应该明白了,就是上传之后的这个五年内表,那我商品主图这里我需要。
09:05
但是这里我不需要,这里我想要,我我选择完图片,我上传之后在这底下显示,但是我不需要这个东西,对吧,这个东西肯定是有地方可以控制的啊那。找一找啊,那既然是上传组件相关的,那我们得去这个an TD文档里面找到上传那块的那个组件啊。找到upload。啊,上传。直接去看API,它有一个什么什么list。看到了吗?已上传的这个。文件列表。嗯,接着再来。哎,找一找,应该还有一个。属性可以直接控制。
10:02
这里啊,这呢,是否。展示文件列表。啊,那我们来试一下,如果我把它设置成这个false,是不是文件列表就没了啊,注意现在要改的是谁,是我们的上传组件啊。那。要给谁设置呢?就是设置它的这个purpose。我先给成我们看看我们的文件列表还有没有,好吧。就是上传后的这个文件列表来点击上传,用它做尝试也可以。是不是没有了,对不对,好。嗯,没有了,正合我们的心意啊。但是他。不要他得要,那这里肯定就不能写死了嘛,那你就只能,呃,从这个。嗯,Purpose里面去。结构对吧,那就是我们直接就用这个名字吧,啊简单易懂啊,那就直接这么写,这就可以就是prop里面你得给我啊传上一个它。
11:03
嗯,船上一个他。的话。嗯,我不不简写了,不简写了。为什么呢?因为这样我可以判断啊,就是默认就是出,就默认是显示。默认显示就是你传了就是。按你传的算,你不传那个purpose,我就默认按这个出,这样好一点啊,那我哪里不需要呢,这个上传那边啊。啊,商品那个就不用管它了,默认默认的话就是出码啊,那呃,编辑器这里,编辑器这里调用的时候肯定。就得传这玩意儿了啊,让它等于这个false,就我不要列表,嗯,现在再看一下。看列表是不是就没了啊。两个都试一下吧,他的应该是好使的对不对,那他的话不出意外应该是没有的。
12:01
可以看到啊,还是有列表啊,所以我们的代码还在改,那这么写有问题啊,那我就不加这个判断了,直接就是你必须得给我这个,你给我这个,我就直接用这个好吧,那这个可以简写那。嗯,这里我们是给了,但是。就是表单这里使用的时候。是不是也得给一个。哎,也给一个,那这个我们给成出他需要。好吧。再来测试一下啊。那。呃,先看商品煮熟的。没问题啊,来再看插入图片的。不显示了是吧,那这个问题解决了,接着来解决这个报错的这个问题啊。包出这个问题很明显,那为什么呢?那我们选择商品组图的时候,我们传的这个方法对吧。而在编辑器里面没有传这个方法,没有传这个方法,但是呢,呃,在我们封装的这个oss这里呢。
13:06
嗯,网上看网上看啊。封装的才是这里。就是上传完成的时候。这呢,哎,又用到了这个方法,所以他就会报错。看到了吧。啊,所以这个方法我们不能随便的去使用,你至少得做一个判断啊。来衣服。嗯。如果你存在。才使用好吧,那这个应该就不会报错了,来看看。这个我们就不试了啊,直接是这个文本编辑器的。来选择。是不报,而且上传成功,那接下来就来解决这个问题,我上传成功之后,我图片我得显示到这里啊。对吧?那负责显示图片又是谁的事?
14:01
又是编辑器的事儿了,哎,所以说一会儿是oss啊,一会儿是上传组件编辑器。嗯,大家别绕懵了啊,就说你看看问题发生在谁身上,咱就去解决谁。那我现在是要显示这个图片,让谁来显示图片,是不是这个让编辑器来显示图片对吧?那所以要去找编辑的内容。不要。把这个问题都掺和到一起,Oss他很单纯啊,这个上传按钮很单纯,他就负责把这个图片给你传到阿里云的oss,然后给你的图片的地址。清楚吧,他就负责负责这么多事儿。对不对。那我们也清楚了,那编辑器要显示图片,它图片哪来,它是不是得从这个上传组件里面获取到文件的这个地址,然后拿这个地址在这里做一显示就完了。啊,我们来看看他这个例子啊,你先试一试他的例子好不好使啊,我来试试,诶好使啊,我们来看看他这个例子,呃,他既然好使,那我们肯定能找到他这个代码,就是选择完图片,图片之后怎么图片是怎么显示到这里的。
15:04
啊,来往下找。慢慢看啊。嗯。好。因为他是直接在这使用的阿六的组件,所以说他给这个阿六的组件。呃,一个事件啊,就是。Upload就是执行上传的一个事件啊。嗯,我们接着分析这个事件。在这个事件里面,也就是说他如果选择完文件。它会就是说更新这个编辑器的状态,但是它更新编辑器状态的时候呢,诶是这么去更新的insert使用的insert啊,并且呃,查出的类型是image URL是呃。啊,就是说create object就是创建的一个自己创建的一个L,看到了吧。看到了没有啊,这才是核心的蛋白。对不对,那我们无非是把这个UR换成oss的URL就完了呗。
16:08
嗯,但是大家得想一个问题,它需要一个这个东西,对吧,这个东西是哪来的呢?往上找你会发现它是从这个里面去引入的,对吧?它是这个编辑器的一个工具集,里面提供了很多的一些访用的API,那比如说这个啊,插入一个。呃,这个资源用的就是它。那我们一点点来复制啊。嗯,先把这个工具集给引进来。啊,不是是这个编辑器这里啊,不要大家不要把位置搞错了啊,那刚好顺便这两个也不用了,直接删掉。嗯。然后工具集引进来了之后看一看。最关键的是,这个代码我们得放到哪。大家想一想。它的触发时机是什么?因为它这个例子跟我们不一样,他这个例子是呃只是呃本地上传嘛,它上传文件之后直接就显示了,但是我们还要结合这个阿里的这个oss去使用。
17:11
清楚了吧?啊,大家来想想时机,是不是我选择图片,图片上传完成之后,我在更新这个。呃,编辑器的状态,把图片插进来对不对。是这样的吧,那所以说。应该是在这个时机,那肯定是在图片上传完成之后啊,在这呢,哎,我们再来写一个啊。和上面分开。上传完成之后。如果。呃,需要。URL,那么那么返回URL给谁给父组件对吧,你想想子组件你要返回URL,就是返回数据给父组件,肯定得跟这个一样啊,你得调负组件方法是不是。
18:04
看到了吧。嗯,那我们这边。编辑器你去调这个上传的这个组件的时候,是不是得传就不传这个方法了,我们我们只是要URL而已啊。那为什么呢?为什么要这么做呢?你你自己想一想啊,你要更新谁的状态,你要更新编辑器的状态,你编辑器在哪,你编辑器在这。啊,我们之前一直也在说组件的状态在哪,那跟操作组件状态方法就在哪。是不是这样的,你看它图片是怎么设置的,是不是在设置这个编辑器的这个状态。对不对。啊。那我们来定义一个方法啊。嗯。这个注释好像都没有补啊。不用补了,大家能能能看到就行了,我来定义一个方法。想想定个什么方法啊?
19:03
Inert。你来几个啊,我们就啊就叫这个方法,就是插入图片的方法,看名字就知道什么意思啊。嗯,也接收一个这个状态。啊,他不应该接受一个状态。呃,他应该是接受一个URL对吧,那。接着呢,就是调用这个方法去进行状态的一个更新,哎,把这个ul。给设置一下就可以了啊,那他俩一样就可以简写了是不是。啊啊,那这个呢,其实啊,就相当于一行代码吧,一行代码的话,你这个。这个大括号也是可以不要的啊,也是可以不要的,清楚了啊,那还是包包裹上好。嗯,也就是说我们这边定义那个插入图片的方法,那这个方法什么时候调用呢。
20:01
哎,就是在图片上传完成之后调用对吧,所以我得把这个方法传给这个上传这个组件啊,来直接改一改。嗯,这个是类似组件啊,得用this点。来,这时候组件就能收到,就是oss组件就能收到这个方法。对吧,我们调用的时候把这个URL传过就可以了啊,因为呃,上面这个传的是K嘛,我们对吧,表单提交只要K就可以,但是图片显示的需要URL。是这样的吧,啊,但是呃,你还是得做判断,你并不能保证。嗯,其他人使用的时候就传了这个方法,是不是加一层判断吧啊purpose这样看来如果你存在,那么嗯。后来调用你把谁UR有点UR传过去啊。这个费的格式我比较清楚,所以我能确定确定它有R,你如果不确定打一下费,我这就不是了啊好呃,先看效果,等会我们再把代码给稍微优化一下。
21:09
来新建。现在我来插入图片啊,就选这个书。没有显示。嗯。没有显示呢。也没有输出,那这个时候有问题啊,我再回忆编辑器里面打印一下这个UR2,我确保这个URL,看有没有拿过来哦,这时候得打印一下看看吧。来插入图片。哦,这次就可以了,那上一次可能是没刷新,没刷新过来吗?你看没有改代码先没动是吧,我就在这打印来看看,好那说明刚才我们的其实写的就是对的。啊,咱来试一试吧。多测试几次。没问题啊,你看图片是不是有了,而且你去复制这个图片的地址。
22:01
复制。图片地址呢,这个。我们随便开一个新标签,你去打开你会发现。嗯,算了,他这个还是因为我们没有解析阿里的这个OS域名,它会变成这个下载,但是你看这个域名是不是就是阿里oss。对不对啊,就是OS3于米,那没问题啊,我们这个。图片就处理好了,好。我们不仅把。呃,这个。NTD的组件可以集成进来,还有而且我们这个上传组件还是使用的我们自己封装的,那图片是上传到了阿里oss,这是一个比较。啊,好的一个习惯。嗯,接下来呢,把代码稍微精简一下啊。可以看到。2SS这个组件啊。这里面从这个purpose里面来回的去用。不是很方便对吧。嗯,所以呢。
23:00
我们把那个东西呢,给。结构出来。一个是它对吧,再一个是这个方法对吧,等于this.purpose从哪里面去结构?嗯,这时候就不用加这些东西了,直接就用就完了。但是该判断还是得判断啊,要不然他会报错。嗯,你要是不传的话,他会报错。好啊,又因为这些判断呢,都是一行,所以那这个也就这样吧。这样看起来呢。整洁一点对不对。啊,最后就是一个统一的这个上传成功啊,那不管你传不传,这两个方法呢,我该提示成功就成功。是吧?嗯,再确保一下啊,再来测试一下,确保万无一失,先从这个商品主图测试。哎,没问题啊,列表什么都正常,接着是你。
24:03
那也没什么问题。来看看还有其他能精简的地方没有啊?嗯,先把这个阿里云oss的这个上传组件给过一遍啊,从上到下稍微过一遍。确保没有什么东西。遗漏的。OK,这个没有什么问题,那主要看看我们新写的这个编辑器的这个这个呢。嗯。这个应该是。用不到了。这个删这个删这个也用不到了,其实那我们需要的时候再去手册上去看吧,好吧。啊先留着吧,那编辑的时候可能会用啊,会看会用到它。从上面来看。这个东西,然后是。啊,注释也是完整的。
25:00
方法的知识评点。图片。上传完成后。执行此方法啊,用来在编辑器中。显示图片。啊,它这个其实是显示这个资源啊,这里有一个type,那我们这里就设置的是这个啊隐半,所以它显示就是一个图片。啊,这个方法是。啊,就是那个编辑器的星级事件嘛。嗯。编辑器内容改变的时候执行好其他的。嗯,这个。
26:02
这个题给大家加上吧。这些状态。好,那没有什么了啊,那我们的这个。编辑器这块基本上就封装的差不多了,大家虽然看看这几节课,嗯,要么是在处理这个。上传的问题,要么是在处理编辑器的问题。确实一个项目开始的时候,这些都是你要去准备的,但是一旦当你准备好之后,你其他用到的地方就轻松了呀,那就直接拿来用了嘛。对吧,就哪怕有一些呃不兼容的地方,你就就是说或者说有自己一些特殊的需求,你就不断的再去呃优化这两个公共的组件就可以了啊,一定要用这种封装的一个一个思想,会为你后面写东西节省很多的一个时间。好,那这小件先到这儿。
我来说两句