HTML Sanitizer

HTML Sanitizer using Google Caja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://caja.appspot.com/html-css-sanitizer-minified.js"></script>
<div class="container" id="app">
  <h3>
Sample HTML Editor
</h3>
  <div class="row">
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Editor</h3>
        </div>
        <div class="panel-body">
          <textarea id="editor" v-model="text"></textarea>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">HTML Output</h3>
        </div>
        <div class="panel-body">
          <div class="outputPanel" v-html="sanitizeText"></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#editor {
  /** Setting height is also important, otherwise editor wont showup**/
  width: 100%;
  height: 400px;
}

.outputPanel {
  height: 400px;
  overflow-y: auto;
  border: 1px solid lightgrey;
  margin-bottom: 5px;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    text: ''
  },
  computed: {
    sanitizeText: function() {
      console.log(html_sanitize(this.text));
      return html_sanitize(this.text);
    }
  }
});