React TinyMCE без узла

Question

Я новичок в React и пытаюсь использовать React TinyMCE Component на моем сайте.

Я могу запустить базовое приложение React, но когда я пытаюсь интегрировать компонент TinyMCE, я получаю сообщение об ошибке «Uncaught ReferenceError: TinyMCE не определено» в консоли.

Из чего ограниченный knowlegde, у меня есть, кажется, используется функция «требует» узла? Есть ли способ использования компонента без узла?

Я создал this пример в Plunker, который показывает проблему, убрав следующую строку в файле script.jsx предотвращает ошибку:

  < TinyMCE content = "<p>This is the initial content of the editor</p>" 
    config = { 
    { 
     plugins: 'autolink link image lists print preview', 
     toolbar: 'undo redo | bold italic | alignleft aligncenter alignright' 
    } 
    } 
    /> 

Answer 1

У вас есть две проблемы. Первый react-tinymce-min.js не найден. Поэтому вам нужно как-то потянуть это в свой проект. Мертвый способ сделать это - просто скопировать source в ваш проект. Второй, поскольку вы не используете Webpack TinyMCE, попадает в глобальную переменную ReactTinymce. Edited plunk.

В конечном итоге вы захотите использовать Webpack. Это то, что используют все классные дети. И это сделает вашу жизнь намного легче.

Answer 2

Для любого, кто имеет такой же вопрос это то, что я закончил с:

Убедитесь, у вас есть файл с именем .babelrc (в том числе).

.babelrc

{ 
    "presets": ["es2015"] 
} 

пакет .json

{ 
    "name": "demo", 
    "version": "1.0.0", 
    "description": "Demo", 
    "main": "app.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "PN", 
    "license": "ISC", 
    "dependencies": { 
    "babel-preset-react": "^6.3.13", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "react-tinymce": "^0.4.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.4.0", 
    "babel-loader": "^6.2.1", 
    "babel-preset-es2015": "^6.3.13", 
    "webpack": "^1.12.11", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

webpack.config.js

module.exports = { 
    entry: "./main.js", 
    output: { 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel", 
      query: 
     { 
     presets:['react'] 
     } 
     } 
     ] 
    }, 
    resolve: { 
     extension: ['', '.js', '.jsx', '.es6'] 
    } 
}