title: How can i put content from tiptap text editor into a v-model?
body: <p>I tried to bind <code>editor.content</code> directly to <code>this.newTutorial.content</code>  but no luck yet..</p>
  <p>in console :</p>
  <p><a href="https://i.stack.imgur.com/BNRR4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BNRR4.png" alt="enter image description here" /></a></p>
  <p>here is my code :</p>
  <pre><code>&lt;style scoped&gt;
  img.preview {
    width:200px;
  }
  .v-btn {
      height: 50px !important;
      min-width: 50px !important;
  }
  
  &lt;/style&gt;
  
  &lt;template&gt;
  
  &lt;div id=&quot;app&quot;&gt;
      &lt;v-dialog v-model=&quot;dialog&quot; width=&quot;500&quot;&gt;
          &lt;template  v-slot:activator=&quot;{ on, attrs }&quot;&gt;
              &lt;v-btn style=&quot;z-index:9;&quot; color=&quot;blue lighten-1&quot; dark rounded v-bind=&quot;attrs&quot; v-on=&quot;on&quot; fixed left&gt;
                  &lt;v-tooltip right &gt;
                      &lt;template  v-slot:activator=&quot;{ on, attrs }&quot;&gt;
                          &lt;v-icon fab dark v-bind=&quot;attrs&quot; v-on=&quot;on&quot;&gt;
                              mdi-plus
                          &lt;/v-icon&gt;
                      &lt;/template&gt;
                      &lt;img class=&quot;monk-ico&quot; src=&quot;https://celfonica.s3-us-west-1.amazonaws.com/logos/monk-circle+50px.png&quot;&gt;
                      &lt;span style=&quot;display:inline;&quot;&gt;
                        Add Tutorial
                      &lt;/span&gt;
                  &lt;/v-tooltip&gt;
              &lt;/v-btn&gt;
          &lt;/template&gt;
          &lt;div class=&quot;left&quot;&gt;
              &lt;v-btn color=&quot;primary&quot; @click=&quot;dialog = false&quot; width=&quot;10px&quot;&gt;
                  &lt;v-icon&gt;
                      mdi-close
                  &lt;/v-icon&gt;
              &lt;/v-btn&gt;
          &lt;/div&gt;
          &lt;div class=&quot;panel-heading&quot;&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;h1&gt;Tutorial form&lt;/h1&gt;
              &lt;h3&gt; create one&lt;/h3&gt;
              &lt;form id=&quot;form&quot; class=&quot;form-inline&quot; v-on:submit.prevent=&quot;addTutorial&quot;&gt;
                  &lt;v-divider class=&quot;m-tb-20&quot;&gt;&lt;/v-divider&gt;
                  &lt;h4&gt;Author details&lt;/h4&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;v-text-field :rules=&quot;nameRules&quot; required label=&quot;First Name&quot; type=&quot;text&quot; id=&quot;tutorialFirst&quot; class=&quot;form-control&quot; v-model=&quot;newTutorial.first&quot;&gt;
                      &lt;/v-text-field&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;v-text-field :rules=&quot;nameRules&quot; required label=&quot;Last Name&quot; type=&quot;text&quot; id=&quot;tutorialLast&quot; class=&quot;form-control&quot; v-model=&quot;newTutorial.last&quot;&gt;
                      &lt;/v-text-field&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;v-text-field :rules=&quot;emailRules&quot; required label=&quot;Email&quot; type=&quot;text&quot; id=&quot;tutorialEmail&quot; class=&quot;form-control&quot; v-model=&quot;newTutorial.email&quot;&gt;
                      &lt;/v-text-field&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-goup&quot;&gt;
                    &lt;!-- Img upload input field--&gt;
                    &lt;div&gt;
                      &lt;h4 class=&quot;m-tb-20&quot;&gt;Upload tutorial picture:&lt;/h4&gt;
                    &lt;input class=&quot;form-control&quot;  type=&quot;file&quot; @change=&quot;previewImage&quot; accept=&quot;image/+&quot;&gt;
                    &lt;br&gt;&lt;v-btn class=&quot;m-tb-20&quot; @click=&quot; onUpload();&quot;&gt;&lt;v-icon&gt;mdi-upload&lt;/v-icon&gt;&lt;/v-btn&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                    &lt;p&gt; Progress: {{uploadValue.toFixed()+&quot;%&quot;}}
                      &lt;progress :value=&quot;uploadValue&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;
                    &lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                  &lt;v-divider class=&quot;m-tb-20&quot;&gt;&lt;/v-divider&gt;
                  &lt;h4&gt;Tutorial content&lt;/h4&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;v-select required label=&quot;Language&quot;
                      id=&quot;tutorialLanguage&quot; v-model=&quot;newTutorial.language&quot;
                      multiple type=&quot;text&quot; autocomplete tags :items=&quot;languages&quot; class=&quot;form-control&quot;&gt;
                          &lt;template slot=&quot;selection&quot; slot-scope=&quot;data&quot;&gt;
                              &lt;v-btn&gt;
                                  {{ data.item }}
                              &lt;/v-btn&gt;
                          &lt;/template&gt;
                      &lt;/v-select&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;v-text-field :rules=&quot;titleRules&quot; required label=&quot;Tutorial Title&quot; type=&quot;text&quot; id=&quot;tutorialTitle&quot; class=&quot;form-control&quot; v-model=&quot;newTutorial.title&quot;&gt;
                      &lt;/v-text-field&gt;
                  &lt;/div&gt;
    &lt;!--tiptap--&gt;   &lt;v-card &gt;
                    &lt;div &gt;
                      &lt;editor-menu-bar v-on:submit.prevent=&quot;addTutorial&quot; :editor=&quot;editor&quot; v-slot=&quot;{ commands, isActive }&quot;&gt;
                        &lt;div&gt;
                        &lt;v-btn :class=&quot;{ 'is-active': isActive.bold() }&quot; @click=&quot;commands.bold&quot;&gt;
                        &lt;v-icon class=&quot;mdi mdi-format-bold mdi-24px&quot;&gt; &lt;/v-icon&gt;
                      &lt;/v-btn&gt;
                        &lt;v-btn :class=&quot;{ 'is-active': isActive.italic() }&quot; @click=&quot;commands.italic&quot;&gt;
                          &lt;v-icon class=&quot;mdi mdi-format-italic mdi-24px &quot;&gt; &lt;/v-icon&gt;
                        &lt;/v-btn&gt;
                        &lt;v-btn :class=&quot;{ 'is-active': isActive.underline() }&quot; @click=&quot;commands.underline&quot;&gt;
                          &lt;v-icon class=&quot;mdi mdi-format-underline mdi-24px &quot;&gt; &lt;/v-icon&gt;
                        &lt;/v-btn&gt;
                        &lt;v-btn :class=&quot;{ 'is-active': isActive.code() }&quot; @click=&quot;commands.code&quot;&gt;
                          &lt;v-icon class=&quot;mdi mdi-code-tags mdi-24px &quot;&gt; &lt;/v-icon&gt;
                        &lt;/v-btn&gt;
                        &lt;v-btn :class=&quot;{ 'is-active': isActive.link() }&quot; @click=&quot;commands.link&quot;&gt;
                          &lt;v-icon class=&quot;mdi mdi-link mdi-24px&quot;&gt; &lt;/v-icon&gt;
                        &lt;/v-btn&gt;
  
                        &lt;v-divider&gt;&lt;/v-divider&gt;
                      &lt;/div&gt;
                      &lt;/editor-menu-bar&gt;
                      &lt;editor-content :editor=&quot;editor&quot; /&gt;
                    &lt;/div&gt;
                    &lt;/v-card&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;v-textarea :rules=&quot;contentRules&quot; required label=&quot;Tutorial content&quot; type=&quot;text&quot; id=&quot;tutorialContent&quot; class=&quot;form-control&quot;&gt;
                      &lt;/v-textarea&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;v-text-field required label=&quot;Date&quot; class=&quot;form-control&quot; type='date' v-model='newTutorial.date'&gt;
                      &lt;/v-text-field&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;form-group&quot;&gt;
                      &lt;v-text-field  required label=&quot;Tutorial Sample Code Link&quot; type=&quot;url&quot; id=&quot;tutorialCode&quot; class=&quot;form-control&quot; v-model=&quot;newTutorial.code&quot;&gt;
                      &lt;/v-text-field&gt;
                  &lt;/div&gt;
  
                &lt;div&gt;
  
                  &lt;br&gt;
  
                &lt;/div&gt;
                  &lt;v-divider class=&quot;m-tb-20&quot;&gt;&lt;/v-divider&gt;
                  &lt;h4&gt; Preview &lt;/h4&gt;
                  &lt;v-card class=&quot;m-tb-20&quot; v-model=&quot;newTutorial&quot;&gt;
                    &lt;img class=&quot;preview &quot; :src=&quot;picture&quot;&gt;&lt;br&gt;
                      &lt;v-card-title class=&quot;center&quot;&gt;{{ newTutorial.title }} &lt;/v-card-title&gt;
                      &lt;v-card-subtitle&gt; {{ newTutorial.first }} {{ newTutorial.last }} &lt;/v-card-subtitle&gt;
                      &lt;v-divider class=&quot;m-tb-20&quot;&gt;&lt;/v-divider&gt;
                      &lt;v-card-text&gt;{{ newTutorial.content }}&lt;/v-card-text&gt;
  
                      &lt;v-card-text&gt;
                          &lt;h5&gt;{{ newTutorial.language }}&lt;/h5&gt;
                          &lt;h5&gt;{{ newTutorial.email }}&lt;/h5&gt;
                          &lt;h5&gt;{{ newTutorial.date }}&lt;/h5&gt;
                      &lt;/v-card-text&gt;
  
                  &lt;/v-card&gt;
  
                  &lt;!-- Form push btn --&gt;
                  &lt;v-btn class=&quot;m-tb-20&quot; @click=&quot;markcompleted();&quot; type=&quot;submit&quot; small color=&quot;primary&quot; dark&gt;
                      {{ displayText }}
                  &lt;/v-btn&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/v-dialog&gt;
  &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import firebase from '../plugins/firebase'
  
  import toastr from 'toastr';
  // to debug multiple Fire apps
  //if (!firebase.apps.length) {
  //    firebase.initializeApp(config);
  //    this.newTutorial.userID= uid;
  //}
  import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
  import {
    Blockquote,
    CodeBlock,
    HardBreak,
    Heading,
    OrderedList,
    BulletList,
    ListItem,
    TodoItem,
    TodoList,
    Bold,
    Code,
    Italic,
    Link,
    Strike,
    Underline,
    History,
  } from 'tiptap-extensions'
  
  let db = firebase.database();
  
  let messagesRef = db.ref('tutorials');
  
  export default {
      name: 'tutform',
      firebase: {
          tutorials: messagesRef
      },
      components: {
        EditorMenuBar,
        EditorContent,
      },
      data() {
          return {
            editor: new Editor({
              extensions: [
                new Blockquote(),
                new CodeBlock(),
                new HardBreak(),
                new Heading({ levels: [1, 2, 3] }),
                new BulletList(),
                new OrderedList(),
                new ListItem(),
                new TodoItem(),
                new TodoList(),
                new Bold(),
                new Code(),
                new Italic(),
                new Link(),
                new Strike(),
                new Underline(),
                new History(),
              ],
              content: '',
              }),
              imageData:null,
              picture:null,
              uploadValue: 0,
              dialog: false,
              displayText: 'Push me!',
              newTutorial: {
                  first: '',
                  content: '',
                  email: '',
                  last: '',
                  language: [],
                  title: '',
                  date: '',
                  picture:'',
                  code: '',
              },
              languages: [
                  'Html', 'CSS', 'VUE', 'React', 'Ruby', 'JS', 'SASS', 'Python','PHP','C#','JAVA','Other',
              ],
              nameRules: [
                  v =&gt; !!v || 'you must type something',
                  v =&gt; v.length &lt;= 10 || 'hum.. this monk smelling somthing strange... must be less than 10 characters',
              ],
              emailRules: [
                  v =&gt; !!v || 'E-mail is required',
                  v =&gt; /.+@.+/.test(v) || 'Please enter a valid email containing @ ',
              ],
              contentRules: [
                  v =&gt; !!v || 'Content is required amigo!'
              ],
              titleRules: [
                  v =&gt; !!v || 'Tittle is required buddy!',
                  v =&gt; v.length &lt;= 100 || 'Woots!, Lets try making this one shorter'
              ]
          }
      },
  
      methods: {
          previewImage(event){
              this.uploadValue=0;
              this.picture=null;
              this.imageData=event.target.files[0];
          },
          onUpload() {
            this.picture=null;
            const storageRef=firebase.storage().ref(`tutorials/images/${this.imageData.name}`).put(this.imageData);
            storageRef.on(`state_changed`, snapshot=&gt;{
              this.uploadValue=(snapshot.bytesTransferred/snapshot.totalBytes)*100;
            }, error=&gt;{console.log(error.message)},
            ()=&gt;{this.uploadValue=100;
            storageRef.snapshot.ref.getDownloadURL().then((url)=&gt;{
              this.picture=url;
              this.newTutorial.picture = url;
              console.log(this.picture);
              toastr.success('Image Uploaded successfully');
            })}
          )
          },
          addTutorial: function() {
              messagesRef.child(this.newTutorial.userID).push(this.newTutorial);
              this.newTutorial.first = '';
              this.newTutorial.last = '';
              this.newTutorial.content = '';
              this.newTutorial.email = '';
              this.newTutorial.language = '';
              this.newTutorial.title = '';
              this.newTutorial.date = '',
              this.newTutorial.picture= '',
              this.newTutorial.code= '',
              toastr.success('Horray! message sent successfully');
              this.displayText = 'Nice job!';
              this.nameRules = true;
              this.emailRules = true;
              this.contentRules = true;
              this.titleRules = true;
          },
          markcompleted: function() {
              this.displayText = 'hum.. somthing still missing';
          }
      },
      // this functions trow in uid from user in data valu to {uid}
      created: function(){
        var user = firebase.auth().currentUser;
        var uid;
        if (user != null) {
          uid = user.uid; // The user's ID, unique to the Firebase project. Do NOT use
                           // this value to authenticate with your backend server, if
                           // you have one. Use User.getToken() instead.
        }
        this.newTutorial.userID = uid;
      },
      beforeDestroy() {
        this.editor.destroy()
      }
  }
  
  &lt;/script&gt;
  </code></pre>