Используя summernote с vue js 2

Question

Я хочу использовать summernote в моем vue js 2 spa, и потому что не все мои страницы используют summernote, поэтому я делаю summernote компонентом, добавляя

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

а затем я просто импортирую его в мой файл.vue, который нуждается в SummerNote и вызова editor_function на mounted() функция, но я получил ошибку unknown codemirror когда npm компилирует мой vue-проект в один файл app.js.

поэтому я просто включил summernote.min.js в мой index.html, и это означает, что он будет загружен до запуска vue js spa (что не очень идеально, так как этот плагин нужен только какой-то странице, но мне нужно, чтобы он работал)

так что после этого он работает, но теперь я понятия не имел, как получить выходные данные из summernote в vuejs, я добавляю v-model в textarea как это

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

Я также пытался сделать пользовательский ввод, как это, но не работает

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

но он просто не привязан к моему контенту v-модели, и это значит, что когда я опубликую вывод из summernote/content, он будет пустым...

так как сделать так, чтобы summernote работал с vue js 2? я нашел какой-то пакет для summernote и vue js, но он работает только со старой версией vue js(возможно, v.1) и не совместим с vue js 2.

Answer 1

Я ответил здесь, так как комментарии не очень хороши в отображении кода.

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

Я думаю, что вы можете использовать модуль Summernote таким образом.
Я посмотрел в исходный код. Это довольно просто и коротко, так как это просто обертка Summernote.

Обновить
Я разработал проект и изменил код, чтобы упростить настройку конфигурации и плагинов SummerNote. В этой версии вы можете передать свою конфигурацию как объектную опору. Вы также можете добавить плагин, импортировав его в HTML script тег.
Смотрите пример кода ниже.

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

Я хотел бы, чтобы вы могли получить мою идею. Вы также можете заглянуть в разветвленный проект для получения дополнительной информации.