请选择 进入手机版 | 继续访问电脑版
查看: 10710|回复: 0

[店铺装修] 富文本快速编辑小技巧

[复制链接]

56

主题

58

帖子

259

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
259
发表于 2018-3-13 11:36:11 | 显示全部楼层 |阅读模式
苍鸟提供的富文本编辑器功能强大,可以制作很多展示效果。如果运用得当,会为你的商城装修带来意想不到的效果。

在学习编辑小技巧前,我们先来学习一些简单的html+css的标签,这些标签会在编辑富文本时经常遇到,如修改图片、连接等。


html+css的标签:
<p></p>:段落
<br/>:换行
<imgsrc="">: 一幅图片,src表示图片的路径。
Width: 图片的宽度
Height: 图片的高度
bgcolor:背景色
background:背景图,后接相对路径。背景图和背景色同时生效时,图会覆盖背景色
bordercolor:设置边框颜色


了解以上标签知识后,对于我们在富文本编辑源代码时,更能快速找到自己想要编辑的内容。


实例说明:

C1.jpg

以上组件相应的源代码为:

C2.jpg

把组件源代码粘贴到富文本编辑器的源代码区(点击“</>”即可进入源代码区), 再按“ </>”返回所见即所得页面,再按保存,然后才进入编辑修改。

组件图片更换步骤


A、用ctrl+f快速查找源代码中的图片,在查找时,只需键入“src=”这样的字符就可以查找这个组件中的图片。

C3.jpg

查找到图片路径后,我们可以把/images/238/20180228/e07af3f40b38a34ea263c9c02be45433_thumb_750_750.jpg拷贝出来,然后在路径前加上你的商城域名即可查看这张图片是否是你需要修改的图片,即http://shopXXX.cangniaowl.com/images/238/20180228/e07af3f40b38a34ea263c9c02be45433_thumb_750_750.jpg


如何查看商城域名呢?商城域名就在你进入商城时,就可以看到了。如图所示。

C4.jpg

当我们确定修改图片位置后,那可对图片进行更换。


B、 在组件源代码的最底部,复制此代码“<p>图片</p>”到最底部。如图所示。

C5.jpg

C、点击“</>”源代码返回所见即所得页面,把光标移至“图片”两字处(即A步骤)点击编辑框的图片上传功能上传所需图片。如图所示。

C6.jpg

C7.jpg

C8.jpg

C9.jpg

D、上传图片后,按保存后,再点击“</>”进入源代码编辑区,查看所上传图片的路径。


C10.jpg

代码“/images/251/20180306/8f659d071e5925be100fc5bf2928d4f1_thumb_379_249.jpg”就是你所上传图片路径了。


E、把上传图片的路径替换你所需要修改的图片路径即可。

C11.jpg

用快速查找法把确认修改的图片路径找出来后,把你上传的图片路径进行更换就好。


F、删除多余代码。上传完图片后,如图所示中的代码就无需要再存在了。因为那代码仅是为了好查看上传图片代码所需要写上去的,用完了就可删除了。
C13.jpg

G 点击“</>”源代码键返回所见即所得页面,然后按保存。否则你辛辛苦苦修改的东西就没了。

C14.jpg

更换图片数量多的时候,同样方法,先确认修改图片位置再修改。

颜色更换步骤


若套用的组件的背景颜色或文字颜色不喜欢,想替换成别的颜色,我们可以这样修改。

C15.jpg

一般我们看到组件里的源代码表示颜色的:rgb(28,28, 28) #ffffff,因此我们在用快捷查找(ctrl+f)方式查找颜色时,可以键入:rgbcolor等关键词查找,有时组件里颜色较多时,那你只能是一个个排查,类似之前我们确定修改图片位置一样,确定修改颜色位置后,把你想要的颜色代码替换即可。

如何获取想要颜色的代码呢?


最方便快捷的方式:用快捷截图方式(ctrl+alt+a)即可看到颜色的rgb三组数字。如下图所示。

C16.jpg
还可以借助其他一些颜色抓取工具,如photoshop,color lite等。

C17.jpg
这是photoshop的拾色器获取颜色代码



C1.jpg
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表