Meteor & react：在标签上<script></script>加载所需 tinymce 脚本的替代方法

有时在使用 react 进行开发时，您需要放置如下内容：

<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>标签放在client/main.html的<head></head>

所以我尝试执行以下操作：

//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;

然后将其用于我的组件

//React required imports
import tinymce from './myTinymce';
class DummyEditor extends Component {

componentwillMount(){
window.myVars={
tinymce:tinymce
}
}
componentDidMount(){
tinymce.init({
//DO intializationn stuff there
})
}
}

但是在这两个动作中，我都得到了：

SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] plugin.js：1
SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] theme.js：1
SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] plugin.js：1
SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] plugin.js：1
SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] plugin.js：1
SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] plugin.js：1
SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] plugin.js：1
SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] plugin.js：1
SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] plugin.js：1
SyntaxError： expected expression， got '<'[Μάθετε Περισσότερα] plugin.js：1
TypeError： t is not a constructor[Μάθετε Περισσότερα]

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

你可以使用 jquerygetScript方法。在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 id='mytextarea'></textarea>

相关内容

最新更新

热门标签：