UCH群组功能增加编辑器（html+js详解）

发布时间：2020-12-14 01:44:43 所属栏目：Discuz 来源：网络整理

导读：群组功能发帖时候增加编辑器，其实并不是很复杂，只不过我们要理解，为什么要这样修改代码。 *可能有些听不懂，不过不会影响修改，多学点东西总是好的吧？首先，我们解析一下blog的编辑器。看模板文件夹下cp_blog.htm里面的这段代码：代码: div class="cn

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

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

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

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

代码:

第一步呢，我们先要读懂这两行代码：

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

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

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

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

代码:

代码:

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

但是提交的时候更有趣：

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

代码:

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

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

代码:

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

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

代码:

???????

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

这个东西什么意思呢？我们大概看看，我也作简要解释：

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

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

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

有这样的对象有啥用啊？

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

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

代码:

???????

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

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

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

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

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

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

再看看代码，发现这个：

代码:

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

好，开心吧，为什么呢？因为这个就是编辑器js的函数集文件了，马上打开看看吧，很快找到（第一个函数就是啊）：

代码:

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

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

代码:

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

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

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

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

代码:

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

代码:

代码:

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

代码:

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

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

代码:

?代码:

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

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

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

代码:

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

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

（编辑：李大同）

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