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://www.52php.cn/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://www.52php.cn/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

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

代码:

???????