<div id="jcsdl"></div>

<a href="#" id="load-jcsdl">Load query</a>

<textarea id="jcsdl-code">// JCSDL_MASTER b04591342ee71a2baa468d9d2a340ec8 AND
// JCSDL_VERSION 1.0
// JCSDL_START 0980a5f2ef935c4ed153bf975879eac0 twitter.text,contains_any,27-52
twitter.text contains_any "obama, santorum, gingrich, romney, ronpaul, ron paul"
// JCSDL_END
AND
// JCSDL_START f7c18a6fedd90c6b4d77acc14a3a8e5c interaction.type,in,21-29
interaction.type in "twitter,facebook,digg,youtube"
// JCSDL_END
// JCSDL_MASTER_END</textarea>

<script type="text/javascript">
  var editor = new JCSDLGui($("#jcsdl"), {
    save : function(code) {
    // perform custom saving of the output code
    // for example sending it in AJAX
    }
  });

  $('#load-jcsdl').click(function() {
    var code = $('#jcsdl-code').val();
    editor.loadJCSDL(code);
  });
</script>