Skyline Terra Explorer6.6弹出窗口实现复制功能

前段时间继续下来的基于Skyline的B/S项目,是基于Terra Explorer6.6实现的。项目中涉及到基于三维模型查询设备编码等操作,从用户友好角度来讲,查询到的设备编码应该要支持复制,方便用户基于编码的二次查询和操作。

1. Terra Explorer弹出窗口限制

通常来说,在浏览器中复制页面内容,是由浏览器右键支持的,虽然格式和内容我们不能定制,但是也能满足要求。但是在TE弹出不支持右键复制,右键菜单有,但是内容复制不出来。

2. clipboard.js轻量级实现剪切板js插件

clipboard.js 是一个不需要flash,将文本复制到剪贴板的js插件。用法很简单,这里使用其中的一种方法:

    <!--html代码-->
    <button id="mapclipboard_btn" data-clipboard-action="copy" data-clipboard-text="">复制</button>
    //实例化剪切板对象
    var clip = new Clipboard('#mapclipboard_btn');

这种形式的使用思路是,触发mapclipboard_btn按钮的click事件后,clipboardJS插件将data-clipboard-text属性的内容复制到剪切板。这样我们可以在触发按钮click事件前,设置好要复制到剪切板的内容。

3. 结合cliboard.js的Terra Explorer弹出窗口剪切板功能实现

这里我们使用clipboardJS插件,结合TE的消息机制实现弹出窗口剪切板功能。

首先,在主页面中加入2中代码,实例化剪切板对象;

其次,在TE弹出窗口,增加复制按钮,并在触发复制按钮时,使用TE接口发送复制文本消息;

<!--弹出窗口复制按钮-->
<input id="text" style="width: 55%; height: 20px;"/>
<button id="copy" style="width: 35%; height: 25px;">
        复制
</button>

//复制按钮单击事件
$("#copy").click(function () {
    var text = $("#text");
    sgworld.Window.ShowMessageBarText(text);
});

最后,在主页面中添加消息处理代码,添加剪切板内容

sgworld.AttachEvent("OnSGWorldMessage", function (messageId, sourceObjectId) {
        var clipboardText = messageId;
        $("#mapclipboard_btn").attr("data-clipboard-text", clipboardText);
        $("#mapclipboard_btn").trigger("click");
        return true;
    }

如果OnSGWorldMessage已经在使用,可以通过条件消息类型的方式与其他消息进行区分。至此,就实现了TE6.6中弹出窗口简单的剪切板功能。

4. 7.0.1已经支持弹出窗口内容的复制

在写这篇博客时由于要使用TE7.0.1的新特性和功能,系统已经升级到TE7.0.1。顺手一点右键复制,发现是有效的。看来老外也注意到了这个问题,已经解决了。虽然右键复制不是那么友好,无法定制格式和内容,但是毕竟可以选什么复制什么,也算是很实用的。

写在最后

最近早上上班总要把博客园首页感兴趣的最多推荐、最多评论、新闻头条、推荐新闻看一下。一方面是因为手头项目越来越让人头疼,陷入了孤军奋战、推进困难的窘境。另一方面也在想转眼自己已经工作将近五年了,也要迈入30岁了,有点焦虑。总觉得自己技术还可以,学习能力还不错,但是第一次跳槽后,总感觉再也找不到适合自己的工作了。一年有大半年在外出差,现场开发、调试,租的房子好像就是用来放行李的。每每回到自己base地,躺在床上,总不想再出差了。

出差与不出差的交织,也使本来就定力不好的我,变得懒惰,形不成好的习惯。每每是刚刚习惯了跑步,刚刚学个新东西到了一半,就会被出差或者回公司打断。回头看看在园子里转了5年,也没有留下些什么,自己也不知道自己沉淀了什么,积累了什么。于是,总想写点什么,不知道是担心,还是想发泄。

真的不想一个人,很怀念刚工作的时候。6、7个人住在北京的两室一厅,一起上下班,一起玩游戏,一起学习,玩的快乐,工作有劲,相互学习,相互进步。

猜你喜欢

转载自www.cnblogs.com/zhangdk/p/skyline-clipboard.html