Summernote in Vue

One way data input, from summernote via callback.

by Eugene Manager

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <summernote :summernote="summernote"></summernote>
  <pre>{{ $data }}</pre>
</div>


<script type="text/x-template" id="summernote-template">
  <div id="summernote">Default Summernote text is here!!!</div>
</script>

CSS

body { padding:40px; }

JavaScript

Vue.component('summernote', {
  props: ['summernote'],
	template: '#summernote-template',
  created: function() {
    this.$root.$on('content_changed', (contents) => {
    	this.summernote.code = contents;
    })
  },
  mounted: function() {
         let component = this;
         let config = {};
         config.minHeight = null;
         config.maxHeight = null;
         config.toolbar =  [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']]
            ]; 
         // init the editor
         let $el = $(this.$el);
         $el.summernote(config);
         // set code
         $el.summernote('code', component.summernote.code);
         // set callback to pass event back to parent 
         $el.on('summernote.change', 
         		function(we, contents) {
              component.$root.$emit('content_changed', contents)
         		}
         );
  }
});


var vm = new Vue({
  el: "#app",
  data: {
    summernote: {code : "Hello World!"}
  }
});