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个人住在北京的两室一厅，一起上下班，一起玩游戏，一起学习，玩的快乐，工作有劲，相互学习，相互进步。

巴特西