en utilisant summernote avec vue js 2

Question

Je veux utiliser summernote dans ma vue js 2 spa, et parce que pas toute ma page à l'aide summernote donc je faire summernote d'être un composant en ajoutant

export default { 
    editor_function(){ 
    //summernote function in summernote.min.js 
    } 
} 

puis je viens importez-le dans mon fichier .vue qui a besoin de summernote et appelez le editor_function sur la fonction mounted() mais j'ai l'erreur unknown codemirror lorsque npm compile mon projet vue en un seul fichier app.js. Donc, je suis entré dans juste ajouter summernote.min.js dans mon index.html et cela signifie qu'il sera chargé avant la vue js spa est commencé (ce qui n'est pas très idéal car seulement quelques pages ont besoin de ce plugin, mais bien je besoin que cela fonctionne)

donc après qu'il fonctionne, mais maintenant je suis arrivé aucune idée de comment obtenir des données ouput de summernote dans vuejs, j'ajoute V- model dans textarea comme celui-ci

<textarea class="summernote" v-model="content"></textarea> 

i a également essayé de faire une entrée personnalisée comme celle-ci, mais ne fonctionne pas

<textarea class="summernote" 
      :value="content" 
      @input="content = $event.target.value"></textarea> 

mais tout simplement pas binded dans mon contenu v-modèle et qui est moyenne quand je posterai la sortie de summernote/contenu, il sera vide ...

alors comment faire summernote travaille avec vue js 2? J'ai trouvé un paquet pour summernote et vue js mais cela fonctionne uniquement avec l'ancienne version vue js (v.1 peut-être?) et pas compatible avec vue js 2.

Answer 1

J'ai répondu ici car les commentaires ne sont pas très bons pour afficher le code. Je pense que vous pouvez utiliser le summernote module de cette façon.
J'ai regardé dans le code source. C'est assez simple et court car c'est juste une enveloppe de summernote.

Mise à jour
Je fourchue le projet et a changé un peu de code pour le rendre plus facile de définir la configuration de summernote et plugins. Avec this version, vous pouvez transmettre votre configuration en tant qu'objet prop. Vous pouvez également ajouter un plugin en l'important dans le tag html script.
Voir l'exemple de code ci-dessous.

<template> 
<div id="app"> 
    <summernote 
    name="editor" 
    :model="content" 
    v-on:change="value => { content = value }" 
    :config="config" 
    ></summernote> 
</div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     content: null, 
     // ↓ It is what the configuration object looks like. ↓ 
     config: { 
      height: 100, 
      toolbar: [ 
       // [groupName, [list of button]] 
       ['style', ['bold', 'italic', 'underline', 'clear']], 
       ['font', ['strikethrough', 'superscript', 'subscript']], 
       ['fontsize', ['fontsize']], 
       ['color', ['color']], 
       ['para', ['ul', 'ol', 'paragraph']], 
       ['insert', ['gxcode']], // plugin config: summernote-ext-codewrapper 
      ], 
     }, 
    } 
    }, 
    components: { 
    'summernote' : require('./Summernote') 
    } 
} 
</script> 

Je souhaite que vous pourriez obtenir mon idée. Vous pouvez également regarder dans le projet fourchu pour plus d'informations.