打字稿和 vue 中的 Summernote答案

【问题标题】：Summernote in typescript and vue打字稿和 vue 中的 Summernote
【发布时间】：2018-04-13 08:37:04
【问题描述】：

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

错误 TS2339 (TS) 属性“summernote”在类型“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

【问题讨论】：

我在让 Summernote 使用该配置时遇到了很多问题。最后我放弃了，改用这个。 github.com/davidroyer/vue2-editor

标签： typescript vuejs2 summernote

【解决方案1】：

这就是我与 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;
    }
}

（拉取请求中途）

【讨论】：

【解决方案2】：

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

我所做的是将 Summernote 属性添加到 jQuery 类型文件中。

我的项目已经有一个 jQuery 的类型文件 - 在本例中是 jquery.d.ts（在类型文件夹中找到）。

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

summernote: any;

【讨论】：