Summernote in Vue2

both direction text edit

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',
  data: function () {
    return {
      pushed: 0, // if content pushed from vue 
      changed: 0, // if content changed in summernote
      $summernoterElement : null,
    }
  },
  watch: {
    summernote: {
      handler(val){
          //console.log('watch');
          if (this.changed > 0) {
             this.changed--;
             //console.log('this.changed--');
          } else {
            this.pushed++;
            this.setText(val.code);
            //console.log('watch - changed');
          }
      },
      deep: true
    }
  },
  methods: {
  	setText: function (text) {
      this.$summernoterElement.summernote('code', text);
    },
    //getFromSummernote: function (){
    //  return this.$summernoterElement.summernote('code');
    //}
  },
  mounted: function() {
         let component = this;
         let config = {};
         component.$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
         component.$summernoterElement.summernote(config);
         // set code
         component.$summernoterElement.summernote('code', component.summernote.code);
         // set callback to pass event back to parent 
         component.$summernoterElement.on('summernote.change', 
         		function(we, contents) {
              //console.log('summernote.change');
              //$(we.currentTarget).parent().find('.summernote-text').html(contents);
              //component.$root.$emit('content_changed', contents)
              //component.summernote.watch = false;
              //console.log(this.summernote.watch);
   ...