mit summernote mit vue js 2

Question

ich will summernote verwenden in meinem vue js 2 Spa, und weil nicht alle meine Seite summernote so mit i summernote machen durch Zugabe von

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

und dann i eine Komponente zu sein, nur Importieren Sie es in meine .vue-Datei, die Summernote benötigen und rufen Sie editor_function auf mounted() Funktion, aber ich habe Fehler unknown codemirror, wenn Npm mein Vue-Projekt in einzelne app.js Datei kompilieren.

so ging ich in nur summernote.min.js in meine index.html und das bedeutet, es wird geladen werden, bevor vue js spa gestartet wird (das ist nicht sehr ideal, da nur einige seite dieses plugin brauchen, aber gut ich müssen diese Arbeit)

so nach, dass es funktioniert, aber jetzt habe ich keine Ahnung, wie ouput Daten von summernote in vuejs zu bekommen, ich bin das Hinzufügen v- model in textarea wie diese

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

i auch versucht, benutzerdefinierte Eingabe wie folgt, aber nicht funktioniert

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

aber es binded einfach nicht in meinen V-Modell Inhalt und das ist gemein, wenn ich die Ausgabe von summernote/Inhalt per Post leer sein ...

so wie summernote arbeitet mit vue js 2 zu machen? Ich fand ein Paket für Summernote und Vue JS aber es funktioniert nur mit alten Version Vue JS (V.1 vielleicht?) und nicht kompatibel mit Vue JS 2.

Answer 1

Ich antwortete hier, da Kommentare nicht sehr gut bei der Anzeige von Code sind.

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

<script> 
export default { 
    data() { 
    return { 
     content: null 
    } 
    }, 
    components: { 
    'summernote' : require('./Summernote') 
    } 
} 
</script> 

Ich denke, dass Sie die summernote module auf diese Weise verwenden können.
Ich schaute in den Quellcode. Es ist ziemlich einfach und kurz, da es nur eine Zusammenfassung von Summernote ist.

aktualisieren
gegabelt ich das Projekt und änderte einige Code zu erleichtern summernote Konfiguration und Plugins einzustellen. Mit this version können Sie Ihre Konfiguration als Objektstütze übergeben. Sie können auch ein Plugin hinzufügen, indem Sie es in html script Tag importieren.
Siehe Beispielcode unten.

<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> 

Ich wünschte, du könntest meine Idee bekommen. Sie können auch in das verzweigte Projekt nachsehen, um weitere Informationen zu erhalten.