Summernote in Vue

both direction text edit, but with full text comparing

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>
  <button @click="setDefaultText">
      Set Default
  </button>
</div>


<script type="text/x-template" id="summernote-template" >
  <div class="summernote-wrapper">
    <div class="summernote-div"></div>
    <textarea class="summernote-text" v-model="summernote.code"></textarea>
  </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;
   // })
  //},
  watch: {
    summernote: {
      handler(val){
        //if (this.summernote.watch) {
          console.log('watch');
          //console.log(this.summernote.watch);
          console.log(val.code);
          if (this.getFromSummernote() != val.code) {
            console.log('watch - changed');
          	this.setText(val.code);
          } else {
            console.log('watch - NOT changed');
          }
        //}
      },
      deep: true
    }
  },
  methods: {
  	setText: function (text) {
    	let $summernoterElement = $(this.$el).find('.summernote-div').first();
      $summernoterElement.summernote('code', text);
    },
    getFromSummernote: function (){
      let $summernoterElement = $(this.$el).find('.summernote-div').first();
      return $summernoterElement.summernote('code');
    }
  },
  mounted: function() {
         let component = this;
         let config = {};
         let $summernoterElement = $(this.$el).find('.summernote-div').first();
         config.minHeight = null;
         config.maxHeight = null;
         config.toolbar =  [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']]
            ]; 
         // init the editor
         $summernoterElement.summernote(config);
         // set code
         $summernoterElement.summernote('code', component.summernote.code);
         // set callback to pass event back to parent 
         $summernoterElement.on('summernote.change', 
         		function(we, contents) {
              console.log('summernote.change');
              //$(we.currentTarget).parent().find('.summernote-text').html(contents);
             ...