ReactでTinyMCEエディタを追加する

エディタといえばTinyMCEはかなりのメジャーどころですね。ということで、TinyMCEをReact SPAに入れてみるところまで試してみました。 Tiny Cloudアカウントの作成 TinyMCEのスクリプトをTi […]

エディタといえばTinyMCEはかなりのメジャーどころですね。ということで、TinyMCEをReact SPAに入れてみるところまで試してみました。

Tiny Cloudアカウントの作成

TinyMCEのスクリプトをTiny Cloudから読み込みます。その際にはAPIキーが必要です。Freeアカウントから利用できますので、アカウントを作成しておきましょう。

自前でビルドする方法もある様子ですが、今回は割愛します。

URLを求められますが、ローカルで試す分であれば、”localhost”でよいでしょう。

完了するとAPI KEYとExampleのscriptタグが発行されます。

あとで使うので、Exampleの方をコピーしておきましょう。

インストール

プロジェクトのセットアップはおなじみcreate-react-appを使います。実運用や既存プロジェクトであれば、３行目のnpm installだけ実行しましょう。

$ create-react-app editor
$ cd edirot
$ npm install --save @tinymce/tinymce-react

JSファイルの読み込み

先ほどコピーしたscriptタグをindex.htmlで読み込みます。create-react-appの場合は、public/index.htmlを編集しましょう。

<!DOCTYPE html>
<html lang="en">
...
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=XXXXXXXXXXXXX"></script>
  </body>
</html>

ライブラリの読み込み

続いてReact側で読み込みます。設置したいJSファイルに以下を追記します。

import React, { Component } from 'react';
import { Editor } from '@tinymce/tinymce-react';

class App extends Component {
  handleEditorChange = (e) => {
    console.log('Content was updated:', e.target.getContent());
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
            <Editor
              initialValue="<p>This is the initial content of the editor</p>"
              init={{
                plugins: 'link image code',
                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
              }}
              onChange={this.handleEditorChange}
            />
...

これでnpm startすると、エディタが表示されます。

入力した内容をpreviewする

せっかくなので、入力した内容を簡単に表示させてみます。

Notice:
あくまで「表示してみよう」という目的のコードです。
XSSのリスクがありますので、本番にそのまま使うことはおやめください。

import React, { Component } from 'react';
import { Editor } from '@tinymce/tinymce-react';

class App extends Component {
  state = {
    content: "<p>This is the initial content of the editor</p>"
  }
  handleEditorChange = (e) => {
    this.setState({
      content: e.target.getContent()
    })
  }
  render() {
    return (
       <div>
            <div dangerouslySetInnerHTML={{__html: this.state.content}} />
            <Editor
              initialValue="<p>This is the initial content of the editor</p>"
              init={{
                plugins: 'link image code',
                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
              }}
              onChange={this.handleEditorChange}
            />
       </div>
    );
  }
}
...

動かしてみると、いい感じになりました。

XSSのリスクを考えると、なかなかライブプレビューを組むのは勇気が要りそうではあります。