typescript 和 vue 中的 Summernote

Question

我想在用 Typescript 编写的 Vue 组件中使用 summernote。但是我得到错误：

Error TS2339 (TS) Property 'summernote' does not exist on type 'JQuery'.

我的代码如下所示：

import Vue from "vue";
import * as $ from "jquery";
require('summernote');

然后在模板中我有 div:

<div ref="mysummernote" id="summernote"><p>Hello Summernote</p></div>

在 mounted() 中我有：

$('#summernote').summernote();

并且此 .summernote() 方法被标记为错误，并带有顶部的消息。所有代码都是用打字稿写的。对于 npm，我在这个网站上添加了 summernote 包：https://www.npmjs.com/package/summernote

Answer 1

我在尝试将 summernote 编辑器添加到 Angular2 站点时遇到了类似的问题。

我所做的是将 summernote 属性添加到 jQuery 打字文件中。

我的项目已有 jQuery 的类型文件 - 在本例中为 jquery.d.ts（位于类型文件夹中）。

我在该文件中找到了 "interface JQuery {" 部分并向其中添加了以下行：

summernote: any;

Answer 2

所以我就是这样嫁给 Vue + TypeScrypt + Summernote:

模板：

<html-editor height="200" :model.sync="yourFieldName"></html-editor>

我的package.json:

{
  "devDependencies": {
    "typescript": "^3.4.5"
  },
  "dependencies": {
    "@types/bootstrap": "^4.3.1",
    "@types/jquery": "^3.3.29",
    "@types/select2": "^4.0.48",
    "@types/summernote": "^0.8.0"
  }
}

这是我的组件：

/// <reference path="../node_modules/@types/summernote/index.d.ts" />

Vue.component("html-editor", {
    props : {
        model: {
            required: true
        },
        height: {
            type: String,
            default: "150"
        }
    },
    template: "#html-editor",
    mounted() {           

        let config : Summernote.Options = {
            height: this.height,
            followingToolbar: false, // that needs some tweak see below
            toolbar: [
                ['style', ['bold', 'italic']]
            ],
            callbacks: {},   
        };            

        let vm = this;
        config.callbacks = {
            onInit: function () {
                $(vm.$el).summernote("code", vm.model);
            },
            onChange: function () {
                vm.$emit("update:model", $(vm.$el).summernote("code"));
            },
        };
        $(this.$el).summernote(config);
    }
})

我不得不修改 @types/summernote/index.d.ts:

namespace Summernote {
    interface Options {
        ...
        followingToolbar?: boolean;
    }
}

（拉取请求进行中）

typescript 和 vue 中的 Summernote

Summernote in typescript and vue

typescript

summernote

vuejs2