无法访问与npm一起安装的包中的函数

Question

我试图从tinyMCE访问不同的方法，但它找不到get、setContent或insertContent。有没有人知道我怎么访问这些东西？以下代码是他们的文档的副本。

到目前为止，我的代码如下：

App.vue：

    <template>
      <div id="app">
        <Editor id="test"></Editor>
        <button @click="insertData">Test</button>
      </div>

    </template>

    <script>


    export default {

      name: 'App',
      components: {
        Editor
      },
      methods: {
          insertData: function () {
            Editor.get("test").setContent("This is a test.")
          }
      }
    }
    </script>

    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false;
// es modulesc
var commonjsrequire = require('commonjs-require');
// NOTE: default needed after require
var Editor = require('@tinymce/tinymce-vue').default;

Vue.component('Editor',
    () => import('@tinymce/tinymce-vue')
);

new Vue({
  render: function (h) { return h(App) },
}).$mount('#app')

Answer 1

您想要的函数被绑定到tinymce全局对象。当您在应用程序的上下文中定义Editor组件时，对TinyMCE的实际API调用是tinymce全局对象的一部分。

例如：

tinymce.get("test").setContent("<p>This is a test.</p>")