无法从使用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>")