Discuz教程网

[代码修改] discuz X2编辑器中添加google静态地图

[复制链接]
authicon dly 发表于 2011-11-15 07:31:23 | 显示全部楼层 |阅读模式
在帖子里直接添加地图,可能很多站长需要。从“关于我们”插件得到启发,通过修改相关文件在编辑器中实现了这个功能(本人不太懂js,本文所陈述的修改的部分代码,可能有所冗余,希望高手指点),希望能给需要此功能的站长启发和帮助。先看截图:
下图为在编辑器中嵌入的按钮以及弹出的操作框。
013904np08xb3hggipaz5h.jpg.thumb.jpg

选定地图后,点提交,自动插入到输入框中。
013905yys8yv0eyt8z6szx.jpg.thumb.jpg



下面是文件的一些说明,大家也可以直接下载附件,上传覆盖即可!本文中相关文件的使用,如有疑问,可与我联系,yongbing@ichangning.com,如果大家觉得实用,就顶一个,谢啦!

1、修改的相关文件
staticjseditor.js
emplatedefaultcommoneditor.css
emplatedefault orumpost_editor_body.htm
2、添加的相关文件
googlemap文件夹
staticimagecommonmap.gif
3、修改步骤
1)打开editor.js
搜索“function discuzcode(cmd, arg) ”函数;
在以下代码
  1. if(in_array(cmd, ['sml', 'url', 'quote', 'code', 'free', 'hide', 'aud', 'vid', 'fls', 'attach', 'image', 'pasteword',
复制代码

后添加'googlemap',变为
  1. if(in_array(cmd, ['sml', 'url', 'quote', 'code', 'free', 'hide', 'aud', 'vid', 'fls', 'attach', 'image', 'pasteword', 'googlemap']) || cmd == 'tbl' || in_array(cmd, ['fontname', 'fontsize', 'forecolor', 'backcolor']) && !arg) {
复制代码

在“function showEditorMenu(tag, params)”函数的第一个“case 'pasteword':......break”后增加以下代码
  1. case 'googlemap'://此case画出googlemap对话框by yongbing@ichangning.com
  2. stitle = '插入google地图';
  3. str = '<p class="px" style="height:390px"><iframe id="' + ctrlid + '_param_1" frameborder="0" style="width:100%;height:100%" onload="this.contentWindow.document.body.style.width=\'530px\';this.onload=null" src="./googlemap/googlemap.html"></iframe></p><p class="xg2 pbn">通过搜索插入google地图(暂只支持单点标注)!</p>';
  4. menuwidth = 600;
  5. menupos = '00';
  6. menutype = 'win';
  7. //var mapurl=this.frames[ctrlid+'_param_1'].document.getElementById("addMap").click(pasteMap);
  8. break;
复制代码

在第二个“case 'pasteword':......break”后增加以下代码
  1. case 'googlemap':////此case执行googlemap对话框与输入框的传值by yongbing@ichangning.com
  2. var mapsrc = window.frames[ctrlid + '_param_1'].document.getElementById("mapurl").value;
  3. var str = '<img src=' + mapsrc + ' border=0 />';
  4. //alert(str);
  5. if(wysiwyg) {
  6. insertText(str, str.length, 0, false, sel);
  7. }else {
  8. insertText('[img]' + mapsrc + '[/img]', 0, 0, false, sel);
  9. }
  10. hideMenu('', 'win');
  11. break;
复制代码

该文件修改完成。

2)打开editor.css文件

在头部添加以下代码
  1. #e_googlemap { background:transparent url({STATICURL}image/common/map.gif) no-repeat 0 0; overflow: hidden;background-position: 5px 1px;}
复制代码

此文件修改完成
3)打开post_editor_body.htm文件
找到“<a id="{$editorid}_fls" title="{lang e_flash_title}">{lang e_flash}</a>”,在其后添加以下代码
  1. <a id="{$editorid}_googlemap" title="插入google地图">地图</a><!--添加googlemap按钮-->
复制代码

此文件修改完毕。
注:添加在这里的话,该功能的使用权限与多媒体代码相同,也可放到其他地方。

4)将googlemap文件包上传到网站根目录。
5)即可。
效果如下:
untitled.bmp

googlemap_ichangning.rar (44.48 KB, 下载次数: 17)



上一篇:特效广告代码ForDZ7|X1.5|X2
下一篇:Discuz不需要任何插件,巧用“论坛任务” 彻底防止注册机广告。(作者:茗香客)
authicon 乙人墨 发表于 2011-11-15 12:11:03 | 显示全部楼层
我的神啊...救救我吧
QQ截图20111115121034.png
authicon 乙人墨 发表于 2011-11-15 12:12:33 | 显示全部楼层
本帖最后由 乙人墨 于 2011-11-15 12:21 编辑

DIY老大,编辑器图片显示不对,不知道调用了什么图片啊,直接覆盖的......另外,插入以后,变英文版地图了....
authicon  楼主| dly 发表于 2011-11-15 13:22:20 | 显示全部楼层
乙人墨 发表于 2011-11-15 12:12
DIY老大,编辑器图片显示不对,不知道调用了什么图片啊,直接覆盖的......另外,插入以后 ...

联系yongbing@ichangning.com说明详细问题
authicon 乙人墨 发表于 2011-11-15 13:29:30 | 显示全部楼层
dly 发表于 2011-11-15 13:22
联系说明详细问题

也对..
authicon 山外人¥机器 发表于 2011-11-16 10:22:02 | 显示全部楼层
我以为是网页收录的那样的地图呢。
authicon Aluby 发表于 2011-12-2 23:34:00 | 显示全部楼层
我刚下,看看这个功能如何?期待已久。
authicon PEI_CHING 发表于 2012-2-21 06:57:46 | 显示全部楼层
謝謝!謝謝!謝謝!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 08:48

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表