hurricanejames / react-tinymce-input Goto Github PK

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.

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

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])

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.

Could just be config?

I get the following exception when updating right after mounted:

Thanks.

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)

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

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

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.

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();
}

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())
    },
  });
},

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
        });
    },    

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

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

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

Regards.

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

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

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

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