将 SummerNote 与 vue.js 2 一起使用

Question

我想在我的 vue.js 2 spa 中使用 Summernote，并且因为并非所有页面都使用 SummerNote，所以我通过添加来使 SummerNote 成为一个组件

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

然后我将其导入到需要 SummerNote 的 .vue 文件中并调用editor_function函数，但是当 npm 将我的 vue 项目编译到单个 app.js 文件中时mounted()出现错误。unknown codemirror

所以我只在我的index.html中包含summernote.min.js，这意味着它将在vue js spa启动之前加载（这不是很理想，因为只有某些页面需要这个插件，但我需要这个才能工作）

所以之后它就可以工作了，但是现在我不知道如何将summernote的输出数据获取到vuejs中，我像这样model添加v-textarea

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

我也尝试过像这样进行自定义输入但不起作用

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

但它只是没有绑定到我的 v-model 内容中，这意味着当我发布 Summernote/content 的输出时，它将是空的......

那么如何让summernote与vue js 2一起工作呢？我找到了一些 Summernote 和 vue js 的包，但它仅适用于旧版本的 vue js（可能是 v.1？），并且与 vue js 2 不兼容。

Answer 1

我在这里回答是因为注释不太擅长显示代码。

\n\n

<template>\n<div id="app">\n  <summernote\n    name="editor"\n    :model="content"\n    v-on:change="value => { content = value }"\n  ></summernote>\n</div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n        content: null   \n    }\n  },\n  components: {\n    \'summernote\' : require(\'./Summernote\')\n  }\n}\n</script>\n

\n\n

我认为你可以通过这种方式使用Summernote 模块。
\n我查看了源代码。它非常简单和简短，因为它只是 Summernote 的包装。

\n\n

更新
\n我分叉了该项目并更改了一些代码，以便更轻松地设置 Summernote\ 的配置和插件。在此版本中，您可以将配置作为对象 prop 传递。\n您还可以通过在 html 标签中导入插件来添加插件script。
\n请参阅下面的示例代码。

\n\n

<template>\n<div id="app">\n  <summernote\n    name="editor"\n    :model="content"\n    v-on:change="value => { content = value }"\n    :config="config"\n  ></summernote>\n</div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n        content: null,\n        // \xe2\x86\x93 It is what the configuration object looks like. \xe2\x86\x93\n        config: {\n            height: 100,\n            toolbar: [\n                // [groupName, [list of button]]\n                [\'style\', [\'bold\', \'italic\', \'underline\', \'clear\']],\n                [\'font\', [\'strikethrough\', \'superscript\', \'subscript\']],\n                [\'fontsize\', [\'fontsize\']],\n                [\'color\', [\'color\']],\n                [\'para\', [\'ul\', \'ol\', \'paragraph\']],\n                [\'insert\', [\'gxcode\']], // plugin config: summernote-ext-codewrapper\n          ],\n        }, \n    }\n  },\n  components: {\n    \'summernote\' : require(\'./Summernote\')\n  }\n}\n</script>\n

\n\n

我希望你能明白我的想法。您还可以查看分叉项目以获取更多信息。

\n