example.html

<!--
Note that you'll need to install scribe's dependencies through
`bower install`. See http://bower.io/ if you are unfamiliar.
-->
<style>
  button {
    height: 3em;
  }

  .active {
    border-style: inset;
  }

  .rte {
    display: block;
  }

  p {
    margin-top: 0;
  }

  .rte {
    border: 1px solid gray;
    height: 300px;
    overflow: auto;
  }
  .rte-output {
    width: 100%;
    height: 10em;
  }
</style>
<script src="./bower_components/requirejs/require.js"></script>
<script>
/*global window, require*/
require({
  paths: {
    'scribe-common': './bower_components/scribe-common',
    'lodash-amd': './bower_components/lodash-amd'
  }
}, [
  './bower_components/scribe/src/scribe',
  './src/scribe-plugin-curly-quotes'
], function (
  Scribe,
  scribePluginCurlyQuotes
) {
  var scribe = new Scribe(window.document.querySelector('.rte'));
  window.scribe = scribe;

  scribe.setContent('<p>Hello, World!<\/p>');

  scribe.use(scribePluginCurlyQuotes());

  scribe.on('content-changed', updateHtml);

  function updateHtml() {
    window.document.querySelector('.rte-output').value = scribe.getHTML();
  }

  updateHtml();
});
</script>
<div class="rte"></div>
<section>
  <h1>Output</h1>
  <textarea class="rte-output" readonly></textarea>
</section>