最近需要在 react 代码中插入一个文本编辑器，然后看了一下tinymce这个库。

导入库

在npm中搜索相关的库，然后发现有直接包装好的react-tinymce库，但是在引用过程中会出现 “Unknown prop config on <tinymce> tag” 的错误提示。所以就放弃了直接引用这个库转而使用tinymce。

导入tinymce,可以参考官方网站，有多种导入的方式。
这里选用了在js中直接引入库的方式。
把下面的代码插入到HTML中：

<script src="//tinymce.cachefly.net/4.3/tinymce.min.js"></script>

使用

在react js 代码中加入以下代码

componentDidMount(){
    tinymce.init({
      selector: "textarea.tinymce-editor",
      theme: "modern",
      skin_url: '//cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.5/skins/lightgray/',
      height: 150,
      resize: "both",
      content_css: ["//nuance.jiveon.com/resources/statics/30387/nuance_simplified.css", "//nuance.jiveon.com/resources/statics/30387/nuance_bootstrap_combined.css"],
      plugins: [
        'advlist autolink lists link image charmap print preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen',
        'insertdatetime media nonbreaking save table contextmenu directionality',
        'emoticons template paste textcolor colorpicker textpattern imagetools'
      ],
      toolbar1: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
      toolbar2: 'forecolor backcolor emoticons',
      image_advtab: true
    });
  }

在对应的HTML中加入以下代码，然后就生效了。

 <textarea className="tinymce-editor"></textarea>