discuz! X2富文本编辑器之手把手（S8S）录像机插件开发

基于Discuz X2.0版本开发的富文本编辑器插件，安装此版本可以直接下载包解压并上传覆盖即可，兼容Discuz! X1.5版本需要手动修改。

附件下载（下载之前，请仔细阅读下文）：


    在编辑器中添加手把手录像机按钮并添加其代码，只需要修改相关文件在编辑器就可以中实现此功能，下面先看看实例截图：下图是嵌入的按钮S8S即是手把手的缩写，后边所看到的S8S将都会表示手把手，手把手按钮的弹出操作框：

点击提交后，自动插入S8S代码，此代码不可修改，如图所示：

下图是最终生成的帖子，示例中以一张图片为帖子内容，截图最下边的工具条就是S8S录像机，如图所示：

下面是具体的解决方案及步骤：

1．    如果您之前没有修改过discuz的源码，那么为了尽可能的节省您的时间，可以直接把压缩包里的文件直接解压并上传覆盖即可。

2．    修改相关文件：

a) 首先打开static/js/editor.js文件，搜索

function discuzcode(cmd, arg)，

在其方法里找到

1. if(in_array(cmd, ['sml', 'url', 'quote', 'code', 'free', 'hide', 'aud', 'vid', 'fls', 'attach', 'image', 'pasteword'])

复制代码

此行代码（兼容X1.5：

1. if(in_array(cmd, ['sml', 'url', 'quote', 'code', 'free', 'hide', 'aud', 'vid', 'fls', 'attach', 'image'])

复制代码

此行代码），在其后添加‘s8s’，即为：

1. if(in_array(cmd, ['sml', 'url', 'quote', 'code', 'free', 'hide', 'aud', 'vid', 'fls', 'attach', 'image', 'pasteword', 's8s'])；

复制代码

其次在当前文件中搜索functionshowEditorMenu(tag, params)，在其方法里找到第一个case 'pasteword'（兼容X1.5为: case 'fls'），在结束之后添加下面代码：

1. case 's8s'://此case是s8s按钮
   
2. stitle = '手把手录像机代码';
   
3. str = '<p class="pbn">手把手录像机代码：</p>
   
4. <p class="pbn"><inputtype="text"value="[s8s]http://www.51s8s.com.cn/fbs/client/fbsToolBar[/s8s]"id="' + ctrlid + '_param_1"style="width: 250px;" class="px" readonly=""/>
   
5. </p></p>';  
   
6. menuwidth = 300;
   
7. break;

复制代码

然后在找到第二个case 'pasteword'（Discuz! X1.5为: case 'fls'） ，在结束之后添加下面代码：

1. case 's8s': //此case执行s8s弹出操作框的传值
   
2. var s8sCode = document.getElementById(ctrlid + '_param_1').value;
   
3. if(wysiwyg) {
   
4. insertText(s8sCode, s8sCode.length, 0, false, sel);
   
5. }else {
   
6. insertText(s8sCode, 0, 0, false, sel);
   
7. }
   
8. break;

复制代码

a)  打开文件templete/default/common/editor.css文件，在文件末尾添加下面代码：

1. /* 添加编辑器中的s8s按钮 */
   
2. #e_s8s { background: url("static/image/common/s8s.gif") no-repeat scroll 6px 5px transparent;overflow:hidden;} .b2r #e_s8s { background: url("static/image/common/s8s.gif") no-repeat scroll 0 0 transparent;overflow:hidden;}

复制代码

b)  打开文件template/default/forum/ post_editor_body.htm文件（Discuz! X1.5为: template/default/forum/post.htm），搜索

1. <a id="{$editorid}_fls"title="{lang e_flash_title}">{lang e_flash}</a>，

复制代码

在此行之后添加下面代码：

1. <!-- 手把手（S8S）录像机 -->
   
2. <a id="{$editorid}_s8s" title="{lang e_s8s_title}">{lang e_s8s}</a>

复制代码

c)  打开文件source/language/forum/lang_template.php，搜索$lang = array ( ，在此行后边添加下面代码：

1. 'e_s8s' => 'S8S',
   
2. 'e_s8s_title' => '添加手把手录像机',

复制代码

d)  把包里面的static/image/common/s8s.gif图片放入到相同目录里（static/image/common）文件夹里边。

e)  最后需要网站管理员在后台管理自定义Discuz!代码:

论坛后台 => 界面 => 编辑器设置=>Discuz!代码，如图：

点击新增 Discuz! 代码后面的“详情”，进行详细设置该代码的各项参数，如下图所示：

其中替换内容完整代码为：

1. <objectid="fbsToolBar" name="fbsToolBar" height="250px"width="300px" data="{1}"type="application/x-shockwave-flash" allowscriptaccess="always" style="position:fixed;">
   
2. <paramname="src" value="{1}" />
   
3. <paramname="wmode" value="transparent" />
   
4. <paramname="allowscriptaccess" value="always" />
   
5. </object>

复制代码

最后是：论坛后台 => 工具 => 更新缓存  最后确定更新缓存就可以正常使用了。

以上为Discuz!X2.0富文本编辑器之手把手（S8S）录像机插件开发完成。

手把手网：www.51s8s.com.cn

这个可以现场直播啊

哇，我一会试试啊。呵呵{:soso_e142:}{:soso_e142:}{:soso_e142:}{:soso_e142:}{:soso_e142:}{:soso_e142:}{:soso_e142:}{:soso_e142:}{:soso_e142:}

有问题者，所问必所答，希望大家多多支持。

绝对支持

meng123qq 发表于 2012-3-9 21:27
绝对支持

不错啊,下载了

支持了呢 呵呵

录像机???