在 vue.js 2 中使用 Summernote

Posted 2023-03-22

【中文标题】在 vue.js 2 中使用 Summernote

【英文标题】：using summernote with vue.js 2

【发布时间】：2018-02-03 05:30:33

【问题描述】：

我想在我的 vue.js 2 spa 中使用summernote，因为不是我的所有页面都使用summernote，所以我通过添加使summernote 成为一个组件

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

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

所以我只在我的 index.html 中包含了 summernote.min.js，这意味着它将在 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-model 内容中，这意味着当我发布来自 summernote/content 的输出时，它将是空的...

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

【问题讨论】：

你试过this，我认为它符合你的要求。

哦，我已经研究过了，它看起来很有希望，但缺乏指导，不知道如何在我自己的项目中实现它

【参考方案1】：

因为cmets不太擅长显示代码，所以在这里回答。

<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 module。 我查看了源代码。它非常简单和简短，因为它只是 Summernote 的一个包装。

更新 我分叉了项目并更改了一些代码，以便更容易设置summernote的配置和插件。使用this version，您可以将配置作为对象道具传递。 您也可以通过在 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>

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

【讨论】：

哇，它正在工作.... soo 如果我想定制summernote 就像我想添加sumernote 插件或者只是选择出现在工具栏中的哪个按钮/控件我应​​该在哪里写？它在summernote模块中吗？因为我看到那里设置了 height 属性

@LaurensiusTony 我分叉了该项目以满足您的要求。请参阅我的更新答案。

@choasia 我不断收到 $.summernote() 不是函数。我做错什么了吗？

@choasia 我已经尝试过您的上述解决方案，但得到 $.summernote() is not a function 错误。知道我做错了什么吗？

@PaulCezanne 我完全没问题，但请注意原始存储库不包含任何许可信息。