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

发布时间:2020-03-22 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了UCH群组功能增加编辑器(html+js详解)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

群组功能发帖时候增加编辑器,其实并不是很复杂,只不过我们要理解,为什么要这样修改代码。

*可能有些听不懂,不过不会影响修改,多学点东西总是好的吧?

首先,我们解析一下blog的编辑器。

看模板文件夹下cp_blog.htm里面的这段代码:

代码:

<div class="cnblogs_code" onclick="cnblogs_code_show('837d6287-75d2-4500-93ca-2b1403839b88')">
<img class="code_img_closed" id="code_img_closed_837d6287-75d2-4500-93ca-2b1403839b88" style="display: none" alt="" src="https://cn.js-code.com/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif"&gt;<img class="code_img_opened" id="code_img_opened_837d6287-75d2-4500-93ca-2b1403839b88" onclick="cnblogs_code_hide('837d6287-75d2-4500-93ca-2b1403839b88',event)" src="https://cn.js-code.com/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
<div id="cnblogs_code_open_837d6287-75d2-4500-93ca-2b1403839b88">

第一步呢,我们先要读懂这两行代码:

这就是编辑器的比较核心的部分,用一个隐藏的textarea来提交信息,用js提取框架iframe里面的编辑内容,而iframe里面的部分是编辑器页面。

display:none 表示用css隐藏了textarea,看不到但是提交信息是可以发出去的。

我们会发现,textarea的iduchome-ttHtmlEditor和iframe里面的name和id都很像,对,这两个能合并在一起就是用这个挂钩的,当然,还要借助于js实现。

第二步,再看提交的时候,触发了什么,请看这两段代码,还是那个文件。

代码:

<div class="cnblogs_code">

代码:

<div class="cnblogs_code">

如果刚才认真听课的同学都发现了,“display: none”又一次使用到了隐藏。

但是提交的时候更有趣:

下面的按钮触发的是上面按钮的动作,怎么做到的呢?

代码:

<div class="cnblogs_code">

这行代码表示在点击的时候,触发一个js事件:document.getElementById(’blogbutton’).click();

而这个事件的js实际上就是点击第一个按钮的动作,等同于触发了第一个按钮的:

代码:

<div class="cnblogs_code">

这个部分,那么我们就找到了提交的时候,一定会包含处理编辑器的js函数:validate

搜索刚才那个文件中的代码,我们很容易找到这段:

代码:

       

这个东西什么意思呢?我们大概看看,我也作简要解释:

function是函数必须的部分,后面表示 validate(obj)函数名和所传递进来的参数。参数是一个对象,所以用obj来命名,不是语法必须,只是比较方便理解。

然后定义了另外一个对象,在函数内部: var subject = $(’subject’);

表示将id为’subject’的部分当作对象给前面的变量,听不懂这些术语没所谓,以后会明白,不会影响这次你学习哦。

有这样的对象有啥用啊?

这样的对象可以直接指向某个DOM的节点,更简单的说法是方便操作部分指定的html,哈哈,这样理解了吧?

再看这个js函数。我用注释来说明每一行做什么:

代码:

       

这样我们就找到要得部分了,估计现在有些朋友会晕了,“改一个编辑器这么麻烦啊?”

是啊,如果你熟练的话,其实也不会特别麻烦,所以提醒某些喜欢免费的朋友,无论大家分享什么东西,都要懂得感恩,很多细节的部分你是看不到的,但是很有可能人家用心坐了很久,扯远了,我们继续哦

找到刚才那个地方,也就是uploadEdit(obj);

这还不够,你并不了解他具体是怎么运行的,确认一下,看看他在那里呢?

找了这个文件没有发现声明这个函数的部分,也就是没有找到 function uploadEdit

再看看代码,发现这个:

代码:

<div class="cnblogs_code">

*html中包含js的一种方法,具体参考html相关书籍和资料

好,开心吧,为什么呢?因为这个就是编辑器js的函数集文件了,马上打开看看吧,很快找到(第一个函数就是啊):

代码:

<div class="cnblogs_code" onclick="cnblogs_code_show('9dd292c5-e7d6-4894-9874-0efc5dfd36ab')">
<img class="code_img_closed" id="code_img_closed_9dd292c5-e7d6-4894-9874-0efc5dfd36ab" style="display: none" alt="" src="https://cn.js-code.com/res/2019/02-07/12/1c53668bcee393edac0d7b3b3daff1ae.gif"&gt;<img class="code_img_opened" id="code_img_opened_9dd292c5-e7d6-4894-9874-0efc5dfd36ab" onclick="cnblogs_code_hide('9dd292c5-e7d6-4894-9874-0efc5dfd36ab',event)" src="https://cn.js-code.com/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
<div id="cnblogs_code_open_9dd292c5-e7d6-4894-9874-0efc5dfd36ab">

edit_save();???这个就是保存编辑器内容的东西吧,答对,加十分,哈哈

我们拿出来这个函数直接用,因为刚才那个文件已经引用过这个文件了,也就是刚才那句代码:

代码:

<div class="cnblogs_code">

怎么直接用,估计你也会了,复制,粘贴呗……

返回cp_blog.htm文件,我们再次理顺这个流程,我考虑将具体代码修改部分留给各位朋友,多测试,一定会有人做出来的,并不是很难。

编辑器运行的过程是这样的:

1、用户首先在这部分使用编辑器输入了想要的内容,编辑器直接呈现了效果,但是资料还是在iframe里面,没有传送到textarea部分:

代码:

<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://cn.js-code.com/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://cn.js-code.com/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://cn.js-code.com/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://cn.js-code.com/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://cn.js-code.com/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://cn.js-code.com/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://cn.js-code.com/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://cn.js-code.com/res/2019/02-07/12/405b18b4b6584ae338e0f6ecaf736533.gif"&gt;<span class="cnblogs_code_collapse">代码
<div id="cnblogs_code_open_85ecb34e-de63-4151-b8f4-e78c4e440553">

                                           

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

大佬总结

以上是大佬教程为你收集整理的UCH群组功能增加编辑器(html+js详解)全部内容,希望文章能够帮你解决UCH群组功能增加编辑器(html+js详解)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。
标签:
猜你在找的Discuz相关文章
其他相关热搜词更多
php如何使用2javascriptJavaPythoncocos编程问答c#csschtmlrubyjsd3cocos2d文件
全站导航更多
最新Discuz教程
热门Discuz教程