加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 教程 > 正文

UCH群组功能增加编辑器(html+js详解)

发布时间:2021-03-30 11:36:25 所属栏目:教程 来源:网络整理
导读:群组功能发帖时候增加编辑器,其实并不是很复杂,只不过我们要理解,为什么要这样修改代码。 *可能有些听不懂,不过不会影响修改,多学点东西总是好的吧? 首先,我们解析一下blog的编辑器。 看模板文件夹下cp_blog.htm里面的这段代码: 代码: div class="cn

<div class="cnblogs_code" onclick="cnblogs_code_show('b0e0715d-817b-4248-85e5-b82c4d76371b')">
<img class="code_img_closed" id="code_img_closed_b0e0715d-817b-4248-85e5-b82c4d76371b" style="display: none" alt="" src="https://www.52php.cn/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif"&gt;<img class="code_img_opened" id="code_img_opened_b0e0715d-817b-4248-85e5-b82c4d76371b" onclick="cnblogs_code_hide('b0e0715d-817b-4248-85e5-b82c4d76371b',event)" src="https://www.52php.cn/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
<div id="cnblogs_code_open_b0e0715d-817b-4248-85e5-b82c4d76371b">

2、用户继续编辑其他的部分,当要提交的时候,用一个隐藏按钮提交内容:

代码:

<div class="cnblogs_code">

代码:

<div class="cnblogs_code">

3、触发了js函数validate,这个函数又一次触发了编辑器更新的函数uploadEdit。

代码:

<div class="cnblogs_code" onclick="cnblogs_code_show('d5238a0d-800e-4c18-929c-34f49a3944cf')">
<img class="code_img_closed" id="code_img_closed_d5238a0d-800e-4c18-929c-34f49a3944cf" style="display: none" alt="" src="https://www.52php.cn/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif"&gt;<img class="code_img_opened" id="code_img_opened_d5238a0d-800e-4c18-929c-34f49a3944cf" onclick="cnblogs_code_hide('d5238a0d-800e-4c18-929c-34f49a3944cf',event)" src="https://www.52php.cn/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
<div id="cnblogs_code_open_d5238a0d-800e-4c18-929c-34f49a3944cf">

????????????????????????????????????????????????????????????

4、我们追寻找到那个函数,终于了解,最终更新编辑器的中心函数是edit_save();

代码:

<div class="cnblogs_code">

?代码:

<div class="cnblogs_code" onclick="cnblogs_code_show('03ba8251-505a-4f17-b1d6-557530ef8a41')">
<img class="code_img_closed" id="code_img_closed_03ba8251-505a-4f17-b1d6-557530ef8a41" style="display: none" alt="" src="https://www.52php.cn/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif"&gt;<img class="code_img_opened" id="code_img_opened_03ba8251-505a-4f17-b1d6-557530ef8a41" onclick="cnblogs_code_hide('03ba8251-505a-4f17-b1d6-557530ef8a41',event)" src="https://www.52php.cn/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
<div id="cnblogs_code_open_03ba8251-505a-4f17-b1d6-557530ef8a41">

??????????????

我们知道了这些,就可以照猫画虎的制作出来任何地方的编辑器了。

附加解释一下edit_save()的内部结构,有朋友可能会问到,还是用注释来解释(之前讲过的部分就不说了,仔细看着个帖子就好):

代码:

<div class="cnblogs_code" onclick="cnblogs_code_show('85ecb34e-de63-4151-b8f4-e78c4e440553')">
<img class="code_img_closed" id="code_img_closed_85ecb34e-de63-4151-b8f4-e78c4e440553" style="display: none" alt="" src="https://www.52php.cn/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif"&gt;<img class="code_img_opened" id="code_img_opened_85ecb34e-de63-4151-b8f4-e78c4e440553" onclick="cnblogs_code_hide('85ecb34e-de63-4151-b8f4-e78c4e440553',event)" src="https://www.52php.cn/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
<div id="cnblogs_code_open_85ecb34e-de63-4151-b8f4-e78c4e440553">

???????????????????????????????????????????

好了,整理了半天,希望对各位有所帮助。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读