hurricanejames / react-tinymce-input

A React Component to Control a TinyMCE Input

React TinyMCE Input

React-TinyMCE-Input was written to use a TinyMCE input from within React. It is not the first, and is unlikely to be the last. If you are looking for a bare metal implementation, there is another great component, react-tinymce (demo). React-Tinymce is awesome, but was too low level to work for me. I wanted something that was a bit more React like.

React-TinyMCE-Input handles a lot of the boilerplate. It tried to bind to the editor events that cause changes to the content and tell React when content changes. It also tried to keep TinyMCE in sync with changes coming from React.

Using React-TinyMCE-Input.

var TinyMCEInput = require('react-tinymce-input');
<TinyMCEInput value={this.state.value} onChange={this.onTinyMCEChange} tinymceConfig={this.props.tinymceConfig} />

There are a few other props, and it is possible to listen for most events.

Note: the onChange event handler take a single param, a string with the updated content. The other event handlers all receive TinyMCE events. At some point, I may upgrade this to use React's synthetic event system, but currently it is unneeded.

Examples

git clone https://github.com/HurricaneJames/react-tinymce-input.git
cd react-tinymce-input
npm install
npm run dev
open localhost:8090

ChangeLog

• 2.1.0

  • revert to textarea as the default component

• 2.0.0

  • added support for React 15+
  • allow inline mode
  • fix even handlers
  • remove react 15.5+ warnings

• 1.2.0 passthroughs

  • added onClick prop that will bind to the 'click' event on the tinymce editor
  • added textareaProps prop that will pass through to the textarea
  • added otherEventHandlers prop that takes an Object<string, Function>. Each key in otherEventHandlers will be bound to the TinyMCE editor. This is direct access to the TinyMCE event binding for any future enhancements that might be required before they can be added as a direct prop on the TinyMCEInput component.

• 1.0.5 mitigate textarea blink

  • Update to initialize tinymce immediately if already defined (no more 100ms delay).
  • Pseudo-hide the textarea. The TinyMCE editor will appear to "pop-in", but the textarea will not be visible before

• 1.0.1 Add onSetupEditor prop to allow editor configuration

• 1.0.0 Initial Release

react-tinymce-input's Issues

Font Size Resets When Selecting Bold or Italic

Hi

I am facing an issue of this kind:
I select font size as 36pt and then if I select bold/italic/underline options, the font size resets to default. In the menu bar it still shows 36pt as selected.

Thanks
Amul

React 15.5 deprecation warnings

From React 15.5's release notes:

• Added a deprecation warning for React.createClass. Points users to create-react-class instead.
• Added a deprecation warning for React.PropTypes. Points users to prop-types instead.

This results in projects that are using that version of React to have warnings due to react-tinymce-input.
I propose going with React's recommendations, but I don't know how that will affect the backwards compatibility of this project, if you really want to maintain compatibility all the way back to React 13.

When passing new config to <TinyMCEInput>

When I update a tinymceConfig attribute, the editor is not updated.

return (
    <div className={`form-group ${className}`} id={`${id}-container`}>
      <TinyMCEInput
        {...input}
        tinymceConfig={{
          plugins: 'lists',
          toolbar: disabled ? false : 'undo redo | bold italic | alignleft aligncenter alignright | numlist bullist',
          menubar: !disabled,
          statusbar: !disabled,
          height: 350,
          branding: false,
          skin_url: './static/assets/tinymce/skins/lightgray',
          readonly: disabled ? 1 : 0,
          entity_encoding: 'raw',
          relative_urls : false,
          document_base_url : "/",
        }}
      />
    </div>
  );

disabled is passed into this component via props, but has no effect on the TinyMCEInput component

cursor jump to top when typing

I see a error when do steps :

1. type some character 'abcdef'
2. choise Bold or Italic or Underline (of tinymce)
3. then type some character againt 'zxcvbn' ==> when you typing the cursor jump to first line

Thank you so much.
(My English is not good, sorry for the mistake)

onFocus is not working

I'm using TintMCEInput as suggested:

<TinyMCEInput value={this.state.text} onChange={this.handleEditorChange} onFocus={this.handleFocus} onBlur={this.handleBlur} tinymceConfig={config} />

But focus is not working - blur does.

handleFocus: function () {
        console.log("FOCUS POCUS!");
        this.setState({
            focused: true
        });
    },
    handleBlur: function () {
        console.log("BLURRED BLUR!");
        this.setState({
            focused: false
        });
    },    

Cursor position drift when change font-size by fontsizeselect

Seem change font-size will cause the cursor'is position reset.

Regards.

Ipad issue

Tinymce randomly jumps on ipad.
Could you please let us know if its possible to fix this?

Setting textarea height

Hi I am using your tool for a note editing app, and I am having trouble setting the height of the input control. I can set the width by passing a style to the props of the TinyMCEInput component, but height seems to have no effect.

I have decided to use the auto-resize plugin from tinymce.

Trailing spaces disappear on Firefox

Example: https://stackblitz.com/edit/react-sk9ruu

The example was based on #28, but the config value seems to have nothing to do with it. I also saw some related discussion in #19 but there hasn't been any movement on that.

In FF, if you leave a space after a word and stop, the space disappears after a short time. In Chromium, the space gets replaced with a   and thus doesn't disappear visually.

Tested in FF 62 on Ubuntu 18.04.

Edit: I suspected it might be a bug with TinyMCE itself, but in this minimal example with the latest version, I couldn't reproduce the issue.

Textarea blinks before TinyMCE rendering

I've found that you have setTimeout here, and component blinks with textarea before it shows an editor, could you make this setTimeout optional?

componentDidMount: function componentDidMount() {
    this.initTimeout = setTimeout(this.initTinyMCE, 100);
    this.initStartTime = Date.now();
}

Spaces disappear when using forced_root_block

First of all, thanks for the great job on this control! I've been happily using it in my projects.

But I'm experiencing a problem when using it in combination with the forced_root_block config option. When it's set to an empty string, the trailing space seems to get trimmed after about half a second.

So if you're typing slowly, your words don't have spaces between them.

Here's a minimal example that reproduces the issue:
https://stackblitz.com/edit/react-yhkgu9

onClick event && placeholder

Hey,

Firstly, great work on this, I tried the other react tinymce but I agree with you, it was too low level and didn't play nice when you wanted react to update the content.

Your implementation is perfect except two things..

1. I would love to get an on-click event so I can auto-fill the content when clicked.
2. I really would love to get a placeholder on the text area. I managed to get it working with this plugin "https://github.com/mohan999/tinymce-placeholder" so if you could just pass through a "placeholder" prop to the textarea that would be great.

Thanks for the awesome work!
Mike

Provide example of otherEventHandlers

I currently provide custom events for tinyMCE to allow for other components to work with the text editor,

can you provide a working example of the otherEventHandlers code, as it's not very clear how you would run code like this:

setup: (editor) => {
  editor.addButton('my button', {
    icon: false,
    id: 'myButtonID',
    text: null,
    onclick: (editor) => {
      console.log(editor.getContent())
    },
  });
},

fix eventHandlers

line 134 Can you change

 for(var i = 0, len = DIRECT_PASSTHROUGH_EVENTS.length; i < len; ++i) {
      event = DIRECT_PASSTHROUGH_EVENTS[i];
      editor.on(event.toLowerCase(), function(tinyMCEEvent) {
        var handler = _this.props['on' + event];
        if(typeof handler === 'function') { handler(tinyMCEEvent); }
      });

with

     for (var i = 0, len = DIRECT_PASSTHROUGH_EVENTS.length; i < len; ++i) {
      (function(event){
        editor.on(event.toLowerCase(), function (tinyMCEEvent) {
          var handler = _this.props['on' + event];
          if (typeof handler === 'function') {
            handler(tinyMCEEvent);
          }
        });
      })(DIRECT_PASSTHROUGH_EVENTS[i])

defaultValue

Any chance of implementing the defaultValue prop?
BTW This project is much more convenient than the default one for tine-mce!

Upgrade peer dependencies

Hi,

There are issues with the peer dependencies for this project. The current version of React is 15.0.2, for some reason they went from 0.14.0 to 15.0.0 when they bumped the version.

The issue is that that react is listed as: "react": ">=0.13 <0.15" for this project which obviously means that version 15.0.0 doesnt work. I need 15 for some other dependencies.

Is it possible to bump the peerDependency for react up to 15 ?

Cheers,
Mike

Can't populate react-tinymce-input value after migration to 2.0 version

Hi,

I've just updated my react-tinymce-input from 1.2.0 to 2.0 and the prop 'value' can't be populated anymore, my tinyMce stay empty instead of displaying the text from its prop (which I console logged and it wasn't empty). Is there a new way to use it ?

Thanks in advance

Prop `tinymceConfig` name prefix is redundant

Could just be config?

Cannot read property 'getBookmark' of undefined

I get the following exception when updating right after mounted:

Thanks.

Not working with React v16

I get an error when compiling:
Module not found: Can't resolve 'create-react-class'