Question

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

错误TS2339（TS）'jQuery'类型中不存在属性'summernote'。

我的代码看起来像吼叫：

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

然后在模板中我有div：

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

并在mount（）中我有：

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

并将此.summernote（）方法标记为错误，并在顶部显示消息。所有代码都用typescript编写。到了晚上，我在这个网站上添加了summernote包：https://www.npmjs.com/package/summernote

Answer 1

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

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

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

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

summernote: any;

Answer 2

这就是我结婚的方式 Vue + TypeScrypt + Summernote ：

模板：

R$ 10,00

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

（正在请求拉动）

打字稿和vue中的Summernote

2 个答案: