loicmahieu / aor-tinymce-input

<TinyMCEInput> component for admin-on-rest, useful for editing HTML in admin GUIs.

<TinyMCEInput> for admin-on-rest

component for admin-on-rest, useful for editing HTML in admin GUIs.

Binding of <TinyMCE /> for admin-on-rest.

Installation

npm install aor-tinymce-input --save

Usage

import React from 'react'
import {
  Edit,
  TextInput
} from 'admin-on-rest/mui'

import tinymce from 'tinymce/tinymce'

import 'tinymce/themes/modern/theme'
import 'tinymce/skins/lightgray/skin.min.css'

import TinyMCEInput from 'aor-tinymce-input'

// react-tinymce use global ref
window.tinymce = tinymce

export const PostEdit = (props) => (
  <Edit>
    <TextInput source="title" />
    <TinyMCEInput source="content" config={{ skin: false }} />
  </Edit>
)

License

This library is licensed under the MIT Licence, and sponsored by iGLOO.

aor-tinymce-input's Issues

Cannot read property 'object' of undefined at eval (TinyMCE.js:42)

I am trying with the provided demo and it fails:

Uncaught TypeError: Cannot read property 'object' of undefined
at eval (TinyMCE.js:42)
at Object../node_modules/react-tinymce/lib/components/TinyMCE.js (reactBoilerplateDeps.dll.js:14857)
at webpack_require (reactBoilerplateDeps.dll.js:21)
at eval (main.js:3)
at Object../node_modules/react-tinymce/lib/main.js (reactBoilerplateDeps.dll.js:14881)
at webpack_require (reactBoilerplateDeps.dll.js:21)
at eval (index.js:13)
at Object../node_modules/aor-tinymce-input/lib/index.js (reactBoilerplateDeps.dll.js:1636)
at webpack_require (reactBoilerplateDeps.dll.js:21)
at eval (index.js from dll-reference reactBoilerplateDeps?6845:1)

The page can render if I remove this import:

import TinyMCEInput from 'aor-tinymce-input'

Any idea why ?

Version

aor-tinymce-input: 1.0.0
admin-on-rest: 1.3.2

react is not in peerDependencies

Is there any reason for specifying explicit react dependency?

"react": "~15.4.0"

It leads to errors like this: https://facebook.github.io/react/warnings/refs-must-have-owner.html

Webpack 3.5.5 throw ERROR in ./node_modules/tinymce/skins/lightgray/img/loader.gif

I am trying to build into webpack 3.5.5 this component.

/* eslint-disable */

import React from 'react';
import {
  Create,
  SimpleForm,
  TextInput,
} from 'admin-on-rest';
import tinymce from 'tinymce/tinymce';
// react-tinymce use global ref
window.tinymce = tinymce;

import 'tinymce/themes/modern/theme';
import 'tinymce/skins/lightgray/skin.min.css';
import TinyMCEInput from 'aor-tinymce-input/lib/index'

export const EmailCreate = (props) => (
  <Create title="Create a Email" {...props}>
    <SimpleForm>
      <TextInput source="to" />
      <TextInput source="subject" />
      <TinyMCEInput source="text" config={{ skin: false }} />
    </SimpleForm>
  </Create>
);

When running with webpack I have:

ERROR in ./node_modules/tinymce/skins/lightgray/img/loader.gif
Module build failed: Error: spawn /usr/src/app/node_modules/gifsicle/vendor/gifsicle ENOENT
    at _errnoException (util.js:1019:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:192:19)
    at onErrorNT (internal/child_process.js:374:16)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/css-loader!./node_modules/tinymce/skins/lightgray/skin.min.css 6:32349-32376
 @ ./node_modules/tinymce/skins/lightgray/skin.min.css

There are open issues and resources related:

• tinymce/tinymce#2836 (comment)
• https://www.tinymce.com/docs/advanced/usage-with-module-loaders/

I am not sure if this up to date.
I have tried a few times to configure using the tinymce.com advices but nothing worked.

Am I the only one getting this issue ?

consider adding the admin-on-rest tag to improve discoverability

Hi, great package! I've mentioned it in https://marmelab.com/admin-on-rest/Inputs.html#third-party-components.

GitHub repositories now have tags. To help people discover your library, consider adding the admin-on-rest tag!