Adding a Button in Code Snippet Areas

This task will get you started on how to add an action (such as a button or link) in code snippet areas that are displayed in WebHelp output. You can then attach your code that does the actual processing for the action.

Follow these steps:

  1. Open the DITA_OT_DIR\plugins\org.dita.xhtml\xsl\xslhtml\dita2htmlImpl.xsl file.
  2. Locate the <xsl:template match="*[contains(@class, ' topic/pre ')]" mode="pre-fmt"> template to check the default behavior of this template.
  3. Open the DITA_OT_DIR\plugins\com.oxygenxml.webhelp\xsl\dita\desktop\fixup.xsl file.
  4. Create a <xsl:template match="*[contains(@class, ' topic/pre ')]" mode="pre-fmt"> template to override the default processing.
  5. This new template will include your code for creating the button. It will have the action code that does the actual processing attached to it (this can be written in JavaScript, for example).
    Example of a Select all button:
    <xsl:template match="*[contains(@class, ' topic/pre ')]" mode="pre-fmt">
    <button onclick="SelectText(element)">Select all</button>
    <script>
      function SelectText(element) {
        var text = document.getElementById(element);
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      }
    </script>
  </xsl:template>