Question

有时候用反应进行开发时，你需要输入如下内容：

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>

但我也已经通过npm安装了它：

npm install tinymce

并创建了一个自定义组件：

//React required imports
import tinymce from 'tinymce';

class DummyEditor extends Component {

   componentDidMount(){
      tinymce.init({
        //DO intializationn stuff there
      })
   }
}

所以我试图使用npm安装版本而不需要将<script></script>标记放到<head></head>的{{1}}

所以我尝试做以下事情：

client/main.html

以下内容：

创建名为//React required imports import tinymce from 'tinymce'; class DummyEditor extends Component { componentwillMount(){ window.myVars={ tinymce:tinymce } } componentDidMount(){ tinymce.init({ //DO intializationn stuff there }) } }的文件：

myTinymce.js

然后将其用于我的组件

import tinymce from './myTinymce';
window.tinymce=tinymce;
export default tinymce;

但是我得到了两个动作：

SyntaxError：expected expression，got'＆lt;'[ΜάθετεΠερισσότερα] plugin.js：1

SyntaxError：expect expression，got'＆lt;'[ΜάθετεΠερισσότερα] theme.js：1

SyntaxError：expected expression，got'＆lt;'[ΜάθετεΠερισσότερα] plugin.js：1

SyntaxError：expected expression，got'＆lt;'[ΜάθετεΠερισσότερα] plugin.js：1

SyntaxError：expected expression，got'＆lt;'[ΜάθετεΠερισσότερα] plugin.js：1

SyntaxError：expected expression，got'＆lt;'[ΜάθετεΠερισσότερα] plugin.js：1

SyntaxError：expected expression，got'＆lt;'[ΜάθετεΠερισσότερα] plugin.js：1

SyntaxError：expected expression，got'＆lt;'[ΜάθετεΠερισσότερα] plugin.js：1

SyntaxError：expected expression，got'＆lt;'[ΜάθετεΠερισσότερα] plugin.js：1

SyntaxError：expected expression，got'＆lt;'[ΜάθετεΠερισσότερα] plugin.js：1

TypeError：t不是构造函数[ΜάθετεΠερισσότερα]

你们有没有想法如何动态加载影响全局范围或事件的脚本（或tinymce脚本）不加载它们并通过npm下载相同的结果？

Answer 1

您可以使用jquery getScript方法。在getScript的回调中配置TinyMCE，并在render方法中保留一个选择器。在state中保留一个标记，该标记将在加载TinyMCE时更新，并更新为状态rerender该组件。

希望以下代码段有助于：

componentDidMount(){
    let context = this;
    $.getScript('https://cdn.tinymce.com/4/tinymce.min.js', function(){
      context.setState({
        loading: false
      });

      tinymce.init({
         selector:'#mytextarea',
         plugins: 'code, image, textcolor, table',
         toolbar: ["undo | redo | italic | bold <and other options>"]
       });
    });
  }

并且，在render方法中，只需保留一个具有相同ID的textarea：

<textarea id='mytextarea'></textarea>

流星＆amp; react：替代在<script> </script>标记上加载所需的tinymce脚本脚本的替代方法

1 个答案: