Page 1 of 1

Copying code fragments to the clipboard

Posted: Thu May 29, 2008 8:06 am
by rochfort
I vain I've searched Flare's Help and this forum for a method of copying code fragments from a WebHelp page to the operating system's clipboard. Maybe someone in the community knows how to do it.

Some WebHelp pages I've seen include fragments of code that a user is expected to input into, say, a command prompt. The page displays the lines of code that the user needs and provides a way of copying the code to the clipboard.

You can see an example of this on the following Microsoft page that I picked at random: http://msdn.microsoft.com/en-us/library/ms942980.aspx. If you look at step 2 under To configure the SPN, you'll see that the technical writer has set out some lines of code inside a window. If you click the Copy Code link at the top of the window, the code is copied to the clipboard.

Does anybody know how I can do this in my 3.1.0. version of Flare?

Re: Copying code fragments to the clipboard

Posted: Thu May 29, 2008 8:35 am
by KevinDAmery
Does just selecting the text and hitting Ctrl+C not work? (i.e. the Windows convention for copy / paste.)

Basically, once you build a help system, the output is a standard web page or (in the case of CHM) a web page inside a Windows viewer. Copying and pasting text from them is no different than it is from web pages that were not developed in Flare.

Re: Copying code fragments to the clipboard

Posted: Thu May 29, 2008 8:53 am
by rochfort
Kevin,

Thanks for taking an interest.
Does just selecting the text and hitting Ctrl+C not work?
It does work. But with many lines of code, especially when the text extends off the screen, making sure that you copy everything becomes problematic. The Copy Code link is just another way of making the user's experience easier. Maybe I should have tried to find a more horrendous example.

Regards

Re: Copying code fragments to the clipboard

Posted: Thu May 29, 2008 12:33 pm
by Pete Lees
Hi, rochfort,

If it's any help to you, here is a simple script to copy the contents of the nominated element to the Clipboard.

Code: Select all

<script type="text/JavaScript">
<!--

function copyToClipboard(id) {

   window.clipboardData.setData("Text",document.all(id).innerText);

   // Omit the following line to stop a confirmation message from
   // appearing after the code is copied to the Clipboard.

   alert("Copied to Clipboard.");

}

//-->
</script>

<a href="JavaScript:copyToClipboard('code1')">Copy the code</a>

<pre id="code1" onClick="copyToClipboard(id)" title="Click to copy this code to the Clipboard">
<path> setspn.exe -A MSSQLSvc/StagingSQL.Domain2.corp.com:1433 runtimeuser
if SQL Cluster
<path> setspn.exe -A MSSQLSvc/SQLVRTL.Domain2.corp.com:1433 runtimeuser</pre>
If you intend to add multiple code blocks to the same topic, each must have a unique ID. Both the onClick and title attributes on the <pre> element are optional. The onClick attribute permits the user to copy the code block by clicking the code itself, whereas the title attribute displays a tooltip when the user hovers the mouse pointer over the code.

I've only ever used this script in Internet Explorer, so it may need more rigorous testing if you need to support other browsers.

Pete

Re: Copying code fragments to the clipboard

Posted: Fri May 30, 2008 8:35 am
by rochfort
Pete,

Thank you for sharing your most excellent script. I did get it to work but I had to hand-code the WebHelp page that Flare produced.

I had assumed that one would simply type your code into Flare's script editor. (I'm an optimist and a Flare novice). When I did this, Flare put the <script> </script> bits into the <body> </body> section of the XHTML, added spurious tags and labelled the element in a curious way. The script did not run and the browser reported page errors.

After I put your script into what I understand to be the right places and changed Flare's element label syntax from <div MadCap:targetName="element_1"> to <div id="element_1">, the script ran and the clipboard was filled.

Have you found a way of inserting scripts into a project from within Flare or is it your practice to fix up the XHTML after compiling?

Regards